valaxy-theme-hairy 0.1.4 → 0.2.0

package/components/HairyNav.vue

@@ -22,11 +22,14 @@ const show = computed(() => {
 <template>
   <div class="HairyNav fixed w-full h-3.125rem top-0 z-20 opacity-0 transition-opacity duration-200" :class="[show && 'opacity-100']">
     <div class="mx-auto breakpoint flex relative z-1">
-      <div class="flex-1 flex items-center">
-        <HairyNavTitle class="lt-sm:hidden" />
-        <HairyMenu />
+      <div class="flex items-center lt-sm:order-1 lt-sm:flex-1 justify-center">
+        <HairyNavTitle />
       </div>
-      <div class="flex-center lt-sm:hidden">
+      <div class="flex items-center sm:flex-1">
+        <HairyNavMenu class="sm:hidden pl-3 pr-12" />
+        <HairyMenu class="lt-sm:hidden" />
+      </div>
+      <div class="flex-center order-1">
         <HairyNavToggleDark />
         <HairyNavSearch />
       </div>

package/components/HairyNavMenu.vue

@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+import { useContext } from '../hooks/useContext'
+
+const { drawerShow } = useContext()
+</script>
+
+<template>
+  <button class="yun-icon-btn" @click="drawerShow = true">
+    <div i="ri-menu-fill" />
+  </button>
+</template>

package/components/HairyUserCard.vue

@@ -11,7 +11,7 @@ const description = computed(() => theme.value.user?.description || config.value
 </script>
 
 <template>
-  <div class="pt-5 animate__animated animate__fadeIn">
+  <div class="pt-5 animate__animated animate__fadeIn relative z-1">
     <div class="flex flex-col items-center">
       <img class="mx-auto w-40 rounded-full -mx-1px" :src="config.author.avatar" />
       <div class="leading-loose mt-2">

package/components/HairyUserPopup.vue

@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import { ElDrawer } from 'element-plus'
+import 'element-plus/es/components/drawer/style/index'
+import { useContext } from '../hooks/useContext'
+const { drawerShow } = useContext()
+</script>
+
+<template>
+  <el-drawer v-model="drawerShow" size="auto" @close="drawerShow = false">
+    <HairyUserCard />
+    <div class="dark:hidden absolute inset-0 bg-white bg-opacity-85 blur-5" />
+  </el-drawer>
+</template>
+
+<style lang="scss">
+  .el-drawer {
+    .el-drawer__header {
+      position: relative;
+      z-index: 1;
+    }
+
+    background-color: transparent;
+    .el-icon.el-drawer__close {
+      font-size: 24px;
+    }
+    @media (max-width: 420px) {
+      width: 100% !important;
+    }
+  }
+  .dark {
+    .el-drawer {
+      background: radial-gradient(black, transparent);
+    }
+  }
+</style>

package/hooks/useContext.ts

@@ -1,16 +1,13 @@
 import { ref } from 'vue'
-import { createContext } from '../utils/createContext'
+import { createSharedComposable } from '@vueuse/core'
 
-const HairyContext = createContext('Hairy', () => {
+const _useContext = () => {
   const headerRef = ref<HTMLDivElement>()
-
+  const drawerShow = ref(false)
   return {
     headerRef,
+    drawerShow,
   }
-})
-
-export const useContext = () => {
-  return HairyContext.inject()
 }
 
-export default HairyContext
+export const useContext = createSharedComposable(_useContext)

package/layouts/hairy.vue

@@ -22,6 +22,7 @@ setupDefaultDark()
 <template>
   <HairyBackToTop />
   <HairyMeting />
+  <HairyUserPopup />
   <home v-if="type === 'home'" />
   <post v-if="type === 'post'" />
   <archives v-if="type === 'archives'" />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valaxy-theme-hairy",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "packageManager": "pnpm@7.5.0",
   "author": {
     "email": "wwu710632@gmail.com",
@@ -24,6 +24,7 @@
     "@hairy/vue-use": "^1.2.0",
     "@iconify-json/ant-design": "^1.1.3",
     "@iconify-json/simple-icons": "^1.1.19",
+    "@iconify-json/fluent": "^1.1.18",
     "@vueuse/core": "^8.9.4",
     "@waline/client": "^2.6.1",
     "animate.css": "^4.1.1",

package/setup/main.ts

@@ -2,10 +2,8 @@ import { defineAppSetup } from 'valaxy'
 
 // import { install as installScroll } from '../modules/scroll'
 import { install as installLoading } from '../modules/loading'
-import { install as installContext } from '../modules/context'
 
 export default defineAppSetup((ctx) => {
   // installScroll(ctx)
   installLoading(ctx)
-  installContext(ctx)
 })

package/modules/context.ts

@@ -1,5 +0,0 @@
-import HairyContext from '../hooks/useContext'
-import type { UserModule } from '..'
-export const install: UserModule = ({ app }) => {
-  app.provide(HairyContext.key, HairyContext.getter())
-}