自制二级菜单问题

[naahi-i]

UPUP，我最新的提交里想把搜索的按钮独立出来移入二级菜单里，但是搜索框无法正常全屏显示

还有就是菜单的定位，我想和顶栏的右侧对齐

[Alittfre]

1.搜索框无法正常全屏显示

直接使用Navbar组件里的SearchDialog组件，Search-button组件通过store传递控制搜索框显示的Boolean就好了

2.右侧对齐

css一通乱试😇
另外建议安装名称Prettier统一代码格式，不然这个diff把格式更改都算进去了

diff展示：

diff --git a/.vitepress/theme/store/index.ts b/.vitepress/theme/store/index.ts
index 1640b34..5ea4541 100644
--- a/.vitepress/theme/store/index.ts
+++ b/.vitepress/theme/store/index.ts
@@ -5,6 +5,7 @@ interface StoreState {
   selectedPosts: PostData[]
   currTag: string
   currPost: PostData
+  searchDialog: boolean
 }
 
 const state: StoreState = reactive({
@@ -22,6 +23,7 @@ const state: StoreState = reactive({
     cover: '',
     excerpt: '',
   },
+  searchDialog: false,
 })
 
 export function useStore() {
diff --git a/.vitepress/theme/components/DropdownMenu.vue b/.vitepress/theme/components/DropdownMenu.vue
index 096c24a..63c4a71 100644
--- a/.vitepress/theme/components/DropdownMenu.vue
+++ b/.vitepress/theme/components/DropdownMenu.vue
@@ -1,53 +1,50 @@
 <template>
-    <div class="DropdownMenu">
-        <div class="menu-content">
-            <MusicControl></MusicControl>
-            <!-- <SearchButton></SearchButton> -->
-        </div>
+  <div class="DropdownMenu">
+    <div class="menu-content">
+      <MusicControl></MusicControl>
+      <SearchButton></SearchButton>
     </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import MusicControl from './Music-control.vue';
-import SearchButton from './Search-button.vue';
+import MusicControl from './Music-control.vue'
+import SearchButton from './Search-button.vue'
 </script>
 
 <style scoped lang="less">
 .DropdownMenu {
-    position: fixed;
-    top: -20%;
-    right: 2vw;
-    width: 10%;
-    height: 10%;
-    z-index: 95;
+  position: fixed;
+  right: 0;
+  z-index: 95;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transform: scale(0.9);
+  transition: top 0.6s cubic-bezier(0.25, 1, 0.5, 1), transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
+
+  .menu-content {
+    position: relative;
+    width: auto;
+    max-width: 768px;
+    background-color: rgb(255, 255, 255);
+    border-radius: 16px;
+    padding: 30px;
+    gap: 10px;
     display: flex;
-    justify-content: center;
+    flex-direction: column;
     align-items: center;
     transform: scale(0.9);
-    transition: top 0.6s cubic-bezier(0.25, 1, 0.5, 1), transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
-
-    .menu-content {
-        position: relative;
-        width: auto;
-        max-width: 768px;
-        background-color: rgb(255, 255, 255);
-        border-radius: 16px;
-        padding: 30px;
-        gap: 10px;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        transform: scale(0.9);
-        transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
-    }
+    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
+  }
 }
 
-.DropdownMenu[showmenu="true"] {
-    top: 10%;
-    transform: scale(1);
+.DropdownMenu[showmenu='true'] {
+  top: 100%;
+  transform: scale(1);
 }
 
-.DropdownMenu[showmenu="false"] {
-    top: -20%;
+.DropdownMenu[showmenu='false'] {
+  top: -200%;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/.vitepress/theme/components/Navbar.vue b/.vitepress/theme/components/Navbar.vue
index cc00f46..6de3d0f 100644
--- a/.vitepress/theme/components/Navbar.vue
+++ b/.vitepress/theme/components/Navbar.vue
@@ -10,19 +10,22 @@
         </ul>
       </span>
       <span class="control">
-        <span class="iconfont icon-search search" @click="showDialog = true"></span>
+        <!-- <span class="iconfont icon-search search" @click="showDialog = true"></span> -->
         <label class="hamburger">
-          <input type="checkbox" @change="toggleDropdownMenu">
+          <input type="checkbox" @change="toggleDropdownMenu" />
           <svg viewBox="0 0 32 32">
-            <path class="line line-top-bottom" d="M27 10 13 10C10.8 10 9 8.2 9 6 9 3.5 10.8 2 13 2 15.2 2 17 3.8 17 6L17 26C17 28.2 18.8 30 21 30 23.2 30 25 28.2 25 26 25 23.8 23.2 22 21 22L7 22"></path>
+            <path
+              class="line line-top-bottom"
+              d="M27 10 13 10C10.8 10 9 8.2 9 6 9 3.5 10.8 2 13 2 15.2 2 17 3.8 17 6L17 26C17 28.2 18.8 30 21 30 23.2 30 25 28.2 25 26 25 23.8 23.2 22 21 22L7 22"
+            ></path>
             <path class="line" d="M7 16 27 16"></path>
           </svg>
         </label>
       </span>
+      <DropdownMenu :showMenu="showDropdownMenu" @close-dialog="closeDropdownMenu"></DropdownMenu>
     </nav>
-    <DropdownMenu :showMenu="showDropdownMenu" @close-dialog="closeDropdownMenu"></DropdownMenu>
   </header>
-  <SearchDialog v-if="showDialog" @close-dialog="closeDialog"></SearchDialog>
+  <SearchDialog v-if="state.searchDialog" @close-dialog="closeDialog"></SearchDialog>
 </template>
 
 <script setup lang="ts">
@@ -39,11 +42,10 @@ const { state } = useStore()
 import SearchDialog from './Search-Dialog.vue'
 import DropdownMenu from './DropdownMenu.vue'
 
-const showDialog = ref(false)
 const showDropdownMenu = ref(false)
 
 const closeDialog = () => {
-  showDialog.value = false
+  state.searchDialog = false
 }
 
 const closeDropdownMenu = () => {
@@ -91,7 +93,7 @@ header {
   }
 
   .menu {
-    margin-left: 45px; 
+    margin-left: 45px;
     ul {
       display: flex;
       align-items: center;
@@ -119,7 +121,7 @@ header {
       }
     }
   }
-  
+
   // 鎺у埗鏍?   .control {
     display: flex;
@@ -127,16 +129,6 @@ header {
     justify-content: space-between;
     padding: 0;
     margin: 0;
-    width: 100px;
-    .search {
-      cursor: pointer;
-      font-size: 36px;
-      color: var(--font-color-grey);
-      transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
-      &:hover {
-        transform: translateY(-3px);
-      }
-    }
 
     .hamburger {
       cursor: pointer;
@@ -161,7 +153,7 @@ header {
         stroke-linejoin: round;
         stroke-width: 3;
         transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
-                    stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
+          stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
       }
 
       .line-top-bottom {
@@ -185,7 +177,7 @@ header {
     li {
       margin: 0 50px;
       a {
-          font-size: 18px;
+        font-size: 18px;
       }
     }
   }
diff --git a/.vitepress/theme/components/Search-button.vue b/.vitepress/theme/components/Search-button.vue
index ebabc03..708bd47 100644
--- a/.vitepress/theme/components/Search-button.vue
+++ b/.vitepress/theme/components/Search-button.vue
@@ -1,32 +1,25 @@
 <template>
-    <span class="iconfont icon-search search" @click="showDialog = true"></span>
-    <SearchDialog v-if="showDialog" @close-dialog="closeDialog"></SearchDialog>
+  <span class="iconfont icon-search search" @click="showDialog"></span>
 </template>
 
 <script setup lang="ts">
-import { useData } from 'vitepress'
-import { ref, onMounted } from 'vue'
 import { useStore } from '../store'
 const { state } = useStore()
-const themeConfig = useData().theme.value
 
-import SearchDialog from './Search-Dialog.vue'
-
-const showDialog = ref(false)
-const closeDialog = () => {
-    showDialog.value = false
+const showDialog = () => {
+  state.searchDialog = true
 }
 </script>
 
 <style scoped lang="less">
 .search {
-    cursor: pointer;
-    font-size: 38px;
-    color: var(--font-color-grey);
-    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
+  cursor: pointer;
+  font-size: 38px;
+  color: var(--font-color-grey);
+  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
 
-    &:hover {
-        transform: translateY(-3px);
-    }
+  &:hover {
+    transform: translateY(-3px);
+  }
 }
 </style>

[Alittfre]

我加到仓库里了😋