feat: improve small screen toc

Signed-off-by: ZTL-UwU <zhangtianli2006@163.com>

components/layout/Header.vue

@@ -1,11 +1,12 @@
 <template>
-  <header class="sticky z-40 top-0 bg-background/80 backdrop-blur-lg border-b border-border">
-    <div
-      class="container px-4 md:px-8 flex h-14 max-w-screen-2xl items-center"
-    >
+  <header class="sticky z-40 top-0 bg-background/80 backdrop-blur-lg border-b">
+    <div class="container px-4 md:px-8 flex h-14 max-w-screen-2xl items-center border-b lg:border-none">
       <LayoutMobileNav />
       <span class="flex-1" />
       <DarkModeToggle />
     </div>
+    <div class="lg:hidden">
+      <LayoutToc />
+    </div>
   </header>
 </template>

components/layout/Toc.vue

@@ -1,29 +1,34 @@
 <template>
   <template v-if="toc?.links">
-    <div class="hidden xl:block">
+    <div class="hidden lg:block">
       <UiScrollArea orientation="vertical" class="h-[calc(100vh-6.5rem)] z-30 md:block overflow-y-auto" type="hover">
-        <p class="mb-2 text-base font-semibold">
+        <p v-if="toc.links.length" class="mb-2 text-base font-semibold">
           On This Page
         </p>
         <LayoutTocTree :links="toc.links" :level="0" />
       </UiScrollArea>
     </div>
 
-    <div class="block xl:hidden mb-6">
-      <UiCollapsible>
-        <UiCollapsibleTrigger>
-          <UiButton variant="outline">
-            On This Page
-          </UiButton>
-        </UiCollapsibleTrigger>
-        <UiCollapsibleContent>
-          <LayoutTocTree :links="toc.links" :level="0" class="text-sm pl-4 border-l mt-4" />
-        </UiCollapsibleContent>
-      </UiCollapsible>
-    </div>
+    <UiCollapsible
+      v-model:open="isOpen"
+      class="block lg:hidden text-sm px-4 py-3 w-full"
+    >
+      <UiCollapsibleTrigger class="w-full flex text-left font-semibold">
+        On This Page
+        <Icon
+          name="lucide:chevron-right"
+          class="ml-auto self-center transition-all"
+          :class="[isOpen && 'rotate-90']"
+        />
+      </UiCollapsibleTrigger>
+      <UiCollapsibleContent>
+        <LayoutTocTree :links="toc.links" :level="0" class="text-sm pl-4 border-l my-3" />
+      </UiCollapsibleContent>
+    </UiCollapsible>
   </template>
 </template>
 
 <script setup lang="ts">
 const { toc } = useContent();
+const isOpen = ref(false);
 </script>

components/layout/TocTree.vue

@@ -3,8 +3,8 @@
     <li v-for="link in links" :key="link.id" class="pt-2">
       <NuxtLink
         :to="`#${link.id}`"
-        class="text-muted-foreground hover:text-primary hover:font-medium transition-all"
-        :class="[activeHeadings.includes(link.id) && 'text-primary font-medium']"
+        class="text-muted-foreground hover:text-primary transition-all"
+        :class="[activeHeadings.includes(link.id) && 'text-primary']"
       >
         {{ link.text }}
       </NuxtLink>

pages/[...slug].vue

@@ -2,14 +2,11 @@
   <LayoutHeader />
   <div class="border-b">
     <div class="container px-4 md:px-8 flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10">
-      <aside class="fixed top-16 z-30 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 md:sticky md:block overflow-y-auto">
+      <aside class="fixed top-[100px] lg:top-[60px] z-30 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 md:sticky md:block overflow-y-auto">
         <LayoutAside />
       </aside>
-      <main class="relative py-6 lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_250px]">
+      <main class="relative py-6 lg:gap-10 lg:py-8 lg:grid lg:grid-cols-[1fr_200px]">
         <div class="mx-auto w-full min-w-0">
-          <div class="xl:hidden">
-            <LayoutToc />
-          </div>
           <LayoutBreadcrumb class="mb-4" />
 
           <div class="space-y-2 mb-6">
@@ -38,8 +35,8 @@
 
           <LayoutPrevNext />
         </div>
-        <div class="hidden text-sm xl:block">
-          <div class="sticky top-16 h-[calc(100vh-3.5rem)] overflow-hidden">
+        <div class="hidden text-sm lg:block">
+          <div class="sticky top-[90px] h-[calc(100vh-3.5rem)] overflow-hidden">
             <LayoutToc />
           </div>
         </div>