fix: improve docs layout + remove unused component

Author: pheralb

docs/src/components/examples/exampleToast.astro

@@ -1,4 +1,6 @@
 ---
+import { getCollection } from 'astro:content';
+
 import { cn } from '@/utils';
 import { SocialLinks } from '@/docs.config';
 
@@ -26,7 +28,7 @@ import SearchModal from '@/components/search/searchModal';
         class="group flex items-center space-x-3 font-medium tracking-tight transition-opacity duration-75 hover:opacity-80"
       >
         <Logo width={22} className="group-hover:animate-pulse" />
-        <span class="text-neutral-700 dark:text-neutral-300">
+        <span class="hidden md:block text-neutral-700 dark:text-neutral-300">
           pheralb/toast
         </span>
       </a>

docs/src/components/header.astro

@@ -28,7 +28,8 @@ const currentPath = Astro.url.pathname;
                 title={r.title}
                 class={cn(
                   'px-4 py-2 text-sm',
-                  'border-l border-neutral-200 dark:border-neutral-800',
+                  'border-l border-neutral-200 dark:border-neutral-800 hover:border-neutral-800 dark:hover:border-neutral-200',
+                  'transition-colors',
                   'text-neutral-600 hover:text-black dark:text-neutral-400 dark:hover:text-white',
                   currentPath.replace(/\/$/, '') === r.path.replace(/\/$/, '')
                     ? 'border-black font-medium text-black dark:border-white dark:text-white'

docs/src/components/sidebar/sidebar.astro

@@ -1,7 +1,6 @@
 ---
 import type { MarkdownHeading } from 'astro';
 import { cn } from '@/utils';
-import { TableOfContents, TableOfContentsIcon } from 'lucide-react';
 
 type Props = {
   headings: MarkdownHeading[];
@@ -13,16 +12,17 @@ const { headings } = Astro.props;
 <aside
   class={cn(
     'py-4',
-    'fixed z-30 hidden h-[calc(100vh-4rem)] w-[150px] shrink-0 overflow-y-auto text-sm xl:block',
+    'fixed z-30 hidden h-[calc(100vh-4rem)] w-[150px] overflow-y-hidden text-sm xl:block',
     'bg-neutral-50 dark:bg-neutral-900',
     'flex items-end justify-end',
+    'border-none',
   )}
 >
   <div class="flex flex-col py-5">
     <h2 class="mb-2 text-sm text-neutral-600 dark:text-neutral-400">
       On this page
     </h2>
-    <ul class="flex flex-col">
+    <ul class="flex flex-col overflow-y-auto">
       {
         headings.map((heading) => (
           <a
@@ -31,7 +31,6 @@ const { headings } = Astro.props;
             class={cn(
               'px-4 py-2 text-sm',
               'border-l border-neutral-200 dark:border-neutral-800 hover:border-neutral-800 dark:hover:border-neutral-200',
-              'transition-colors',
               'text-neutral-600 hover:text-black dark:text-neutral-400 dark:hover:text-white',
               'bg-transparent',
             )}