feat: hide empty toc for small screen

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

components/layout/Header.vue

@@ -1,12 +1,12 @@
 <template>
-  <header class="sticky z-40 top-0 bg-background/80 backdrop-blur-lg border-b">
+  <header class="sticky z-40 top-0 bg-background/80 backdrop-blur-lg 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 />
+      <LayoutToc is-small />
     </div>
   </header>
 </template>

components/layout/Toc.vue

@@ -1,17 +1,20 @@
 <template>
-  <template v-if="toc?.links">
-    <div class="hidden lg:block">
-      <UiScrollArea orientation="vertical" class="h-[calc(100vh-6.5rem)] z-30 md:block overflow-y-auto" type="hover">
-        <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>
-
+  <template v-if="toc?.links.length">
+    <UiScrollArea
+      v-if="!isSmall"
+      orientation="vertical"
+      class="hidden lg:block h-[calc(100vh-6.5rem)] z-30 md:block overflow-y-auto"
+      type="hover"
+    >
+      <p class="mb-2 text-base font-semibold">
+        On This Page
+      </p>
+      <LayoutTocTree :links="toc.links" :level="0" />
+    </UiScrollArea>
     <UiCollapsible
+      v-else
       v-model:open="isOpen"
-      class="block lg:hidden text-sm px-4 py-3 w-full"
+      class="block lg:hidden text-sm px-4 py-3 w-full border-b"
     >
       <UiCollapsibleTrigger class="w-full flex text-left font-semibold">
         On This Page
@@ -29,6 +32,8 @@
 </template>
 
 <script setup lang="ts">
+defineProps<{ isSmall: boolean }>();
+
 const { toc } = useContent();
 const isOpen = ref(false);
 </script>

pages/[...slug].vue

@@ -2,7 +2,7 @@
   <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-[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">
+      <aside class="fixed top-[102px] 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 lg:grid lg:grid-cols-[1fr_200px]">
@@ -37,7 +37,7 @@
         </div>
         <div class="hidden text-sm lg:block">
           <div class="sticky top-[90px] h-[calc(100vh-3.5rem)] overflow-hidden">
-            <LayoutToc />
+            <LayoutToc :is-small="false" />
           </div>
         </div>
       </main>