侧边栏统一迁移到导航中的侧边栏

components/header/mobile-nav.vue

@@ -28,10 +28,14 @@ const flag: any = {
 <template>
   <ADrawer
     v-model="isDrawerShown"
-    class="!w-80%"
+    class="h-screen overflow-y-scroll px-2 scrollbar-thumb-color-dark-50 scrollbar-track-color-transparent scrollbar-radius-2 scrollbar-thumb-radius-4 scrollbar-w-4px !w-80% scrollbar scrollbar-rounded"
   >
+    <div class="flex justify-center">
+      <BrandLogo />
+    </div>
+    <Divider class="mb-5" />
     <LocaleNuxtLink v-for="(nav, i) in navs" :key="i" class="ml-3px block w-full shadow-transparent transition-all" :href="nav.href" active-class="active-nav ">
-      <ABtn v-if="!nav.child" variant="text" class="w-full text-xl [&_.a-btn-content]:(w-full justify-start px-2)">
+      <ABtn v-if="!nav.child" variant="text" class="w-full text-lg [&_.a-btn-content]:(w-full justify-start px-2)">
         <span style="color: hsla(var(--a-base-c), 0.87); " class="font-bold">{{ $t(nav.title) }}</span>
       </ABtn>
 
@@ -60,6 +64,10 @@ const flag: any = {
         </div>
       </div>
     </LocaleNuxtLink>
+
+    <div class="p-5">
+      <div id="pages-sider" class="bg-black/10" />
+    </div>
   </ADrawer>
 
   <ABtn

pages/community/vamx/index.vue

@@ -32,23 +32,13 @@ const status = [
 </script>
 
 <template>
-  <div
+  <ClientOnly>
-    class="fixed bottom-16 right-6 md:hidden"
+    <Teleport to="#pages-sider">
-  >
-    <ABtn
-      class="text-xl"
-      icon-only
-      icon="i-material-symbols-view-headline"
-    >
-      <ATooltip
-        trigger="click"
-        class="[&_.a-tooltip]-bg-transparent"
-      >
       <ACard
         shadow="none"
         :title="$t('community.vamx.sider.title')"
         :subtitle="$t('filtrate.discription')"
-          class="w-300px"
+        class="w-full"
       >
         <!-- <img
             src="/images/demo/minimal-1.jpg"
@@ -63,7 +53,6 @@ const status = [
               v-model="data"
               :value="tag.value"
               :label="$t(tag.label)"
-                class="mx-auto"
             />
           </div>
 
@@ -82,9 +71,8 @@ const status = [
           </LocaleNuxtLink>
         </div>
       </ACard>
-      </ATooltip>
+    </Teleport>
-    </ABtn>
+  </ClientOnly>
-  </div>
   <div class="mt-0 lg:mt-20">
     <Section class="flex flex-col gap-4 md:flex-row">
       <div>
@@ -92,7 +80,7 @@ const status = [
           shadow="none"
           :title="$t('community.vamx.sider.title')"
           :subtitle="$t('filtrate.discription')"
-          class="hidden w-full md:block md:w-300px"
+          class="hidden lg:(block w-300px)"
         >
           <!-- <img
             src="/images/demo/minimal-1.jpg"

pages/community/vamx/join.vue

@@ -9,23 +9,13 @@ const { data } = await useAsyncData(`content-${path}`, () => {
 </script>
 
 <template>
-  <div
+  <ClientOnly>
-    class="fixed bottom-16 right-6 md:hidden"
+    <Teleport to="#pages-sider">
-  >
-    <ABtn
-      class="text-xl"
-      icon-only
-      icon="i-material-symbols-view-headline"
-    >
-      <ATooltip
-        trigger="click"
-        class="[&_.a-tooltip]-bg-transparent"
-      >
       <ACard
         shadow="none"
         :title="$t('community.vamx.join.title')"
         :subtitle="$t('community.vamx.join.discription')"
-          class="w-300px"
+        class="w-full"
       >
         <!-- <img
             src="/images/demo/minimal-1.jpg"
@@ -57,17 +47,16 @@ const { data } = await useAsyncData(`content-${path}`, () => {
           </LocaleNuxtLink>
         </div>
       </ACard>
-      </ATooltip>
+    </Teleport>
-    </ABtn>
+  </ClientOnly>
-  </div>
+  <div class="mt-0 lg:mt-20">
-  <div class="mt-10 md:mt-20">
     <Section class="flex flex-col gap-4 md:flex-row">
       <div>
         <ACard
           shadow="none"
           :title="$t('community.vamx.join.title')"
           :subtitle="$t('community.vamx.join.discription')"
-          class="hidden w-full md:block md:w-300px"
+          class="hidden lg:(block w-300px)"
         >
           <!-- <img
             src="/images/demo/minimal-1.jpg"

pages/community/vamx/news.vue

@@ -32,23 +32,13 @@ const status = [
 </script>
 
 <template>
-  <div
+  <ClientOnly>
-    class="fixed bottom-16 right-6 md:hidden"
+    <Teleport to="#pages-sider">
-  >
-    <ABtn
-      class="text-xl"
-      icon-only
-      icon="i-material-symbols-view-headline"
-    >
-      <ATooltip
-        trigger="click"
-        class="[&_.a-tooltip]-bg-transparent"
-      >
       <ACard
         shadow="none"
         :title="$t('community.vamx.news.title')"
         :subtitle="$t('community.vamx.news.discription')"
-          class="w-300px"
+        class="w-full"
       >
         <!-- <img
             src="/images/demo/minimal-1.jpg"
@@ -69,17 +59,16 @@ const status = [
           </LocaleNuxtLink>
         </div>
       </ACard>
-      </ATooltip>
+    </Teleport>
-    </ABtn>
+  </ClientOnly>
-  </div>
+  <div class="mt-0 lg:mt-20">
-  <div class="mt-0 md:mt-20">
     <Section class="flex flex-col gap-4 md:flex-row">
       <div>
         <ACard
           shadow="none"
           :title="$t('community.vamx.news.title')"
           :subtitle="$t('community.vamx.news.discription')"
-          class="hidden w-full md:block md:w-300px"
+          class="hidden lg:(block w-300px)"
         >
           <!-- <img
             src="/images/demo/minimal-1.jpg"

pages/community/vamx/structure.vue

@@ -9,23 +9,13 @@ const { data } = await useAsyncData(`content-${path}`, () => {
 </script>
 
 <template>
-  <div
+  <ClientOnly>
-    class="fixed bottom-16 right-6 md:hidden"
+    <Teleport to="#pages-sider">
-  >
-    <ABtn
-      class="text-xl"
-      icon-only
-      icon="i-material-symbols-view-headline"
-    >
-      <ATooltip
-        trigger="click"
-        class="[&_.a-tooltip]-bg-transparent"
-      >
       <ACard
         shadow="none"
         :title="$t('community.vamx.structure.title')"
         :subtitle="$t('community.vamx.structure.discription')"
-          class="w-300px"
+        class="w-full"
       >
         <!-- <img
             src="/images/demo/minimal-1.jpg"
@@ -57,17 +47,16 @@ const { data } = await useAsyncData(`content-${path}`, () => {
           </LocaleNuxtLink>
         </div>
       </ACard>
-      </ATooltip>
+    </Teleport>
-    </ABtn>
+  </ClientOnly>
-  </div>
+  <div class="mt-0 lg:mt-20">
-  <div class="mt-10 md:mt-20">
     <Section class="flex flex-col gap-4 md:flex-row">
       <div>
         <ACard
           shadow="none"
           :title="$t('community.vamx.structure.title')"
           :subtitle="$t('community.vamx.structure.discription')"
-          class="hidden w-full md:block md:w-300px"
+          class="hidden lg:(block w-300px)"
         >
           <!-- <img
             src="/images/demo/minimal-1.jpg"

pages/release/index.vue

@@ -19,6 +19,35 @@ const list = computed(() => {
 </script>
 
 <template>
+  <ClientOnly>
+    <Teleport to="#pages-sider">
+      <ACard
+        shadow="none"
+        :title="$t('filtrate')"
+        :subtitle="$t('filtrate.discription')"
+        class="w-full"
+      >
+        <!-- <img
+            src="/images/demo/minimal-1.jpg"
+            alt="girl"
+          > -->
+
+        <div class="a-card-body a-card-spacer">
+          <div class="grid grid-rows-2 gap-y-3">
+            <ACheckbox
+              v-for="tag in tags"
+              :key="tag.value"
+              v-model="data"
+              :value="tag.value"
+              :label="$t(tag.label)"
+            />
+          </div>
+
+        <!-- <ABtn>Read more</ABtn> -->
+        </div>
+      </ACard>
+    </Teleport>
+  </ClientOnly>
   <div class="mt-0 lg:mt-20">
     <Section class="flex flex-col gap-4 md:flex-row">
       <div>
@@ -26,7 +55,7 @@ const list = computed(() => {
           shadow="none"
           :title="$t('filtrate')"
           :subtitle="$t('filtrate.discription')"
-          class="w-full md:w-300px"
+          class="hidden lg:(block w-300px)"
         >
           <!-- <img
             src="/images/demo/minimal-1.jpg"