feat: enhance documentation sidebar style

Author: LeadcodeDev

src/lib/components/elements/collapsible.tsx

@@ -7,6 +7,7 @@ type Props = {
   defaultOpen?: boolean;
   currentPathname: string;
   item: any;
+  isNestedElement?: boolean;
 };
 
 export default function Collapsible(props: PropsWithChildren<Props>) {
@@ -19,8 +20,39 @@ export default function Collapsible(props: PropsWithChildren<Props>) {
       className="flex flex-col gap-2 w-full"
     >
       <CollapsiblePrimitives.CollapsibleTrigger asChild>
-        <div className="flex items-center justify-between w-full px-2.5 gap-1.5 text-sm text-secondary-foreground font-medium cursor-pointer">
-          <p className="truncate">{props.item.data.label}</p>
+        <div
+          className={clsx(
+            "flex items-center w-full gap-1.5 text-sm font-medium cursor-pointer justify-between",
+            isOpen
+              ? "text-muted-foreground"
+              : "text-muted/75 dark:text-neutral-400",
+          )}
+        >
+          <div className="flex items-center gap-1.5">
+            {props.isNestedElement && (
+              <Icon
+                icon={props.item.data.icon}
+                className={clsx(
+                  "shrink-0 size-4 mr-1",
+                  isOpen
+                    ? "text-muted-foreground"
+                    : "text-muted/75 dark:text-neutral-400",
+                )}
+              />
+            )}
+            <p className="truncate">{props.item.data.label}</p>
+          </div>
+          {props.isNestedElement && (
+            <Icon
+              icon="lucide:chevron-down"
+              className={clsx(
+                "shrink-0 size-4 mr-1",
+                props.currentPathname.startsWith(`/docs/${props.item.id}`)
+                  ? "text-primary"
+                  : "group-data-[state=open]:text-muted-foreground",
+              )}
+            />
+          )}
         </div>
       </CollapsiblePrimitives.CollapsibleTrigger>
       <CollapsiblePrimitives.CollapsibleContent className="flex flex-col pl-5 ml-1">
@@ -29,11 +61,12 @@ export default function Collapsible(props: PropsWithChildren<Props>) {
             return (
               <div
                 key={item.id}
-                className="group relative w-full px-2.5 py-1.5 flex items-center gap-1.5 text-sm after:absolute after:-left-1.5 after:inset-y-0 after:block after:w-px after:transition-colors after:bg-muted/25 dark:after:bg-neutral-700 text-muted/75 dark:text-neutral-400"
+                className="group relative w-full px-2.5 py-1.5 flex items-center gap-1.5 text-sm after:absolute after:-left-1.5 after:inset-y-0 after:block after:w-px after:transition-colors after:bg-muted/25 dark:after:bg-secondary text-muted/75 dark:text-neutral-400"
               >
                 <Collapsible
                   item={item}
                   currentPathname={props.currentPathname}
+                  isNestedElement={true}
                 />
               </div>
             );
@@ -44,17 +77,18 @@ export default function Collapsible(props: PropsWithChildren<Props>) {
               key={item.id}
               href={`/docs/${item.id}`}
               className={clsx(
-                "group relative w-full px-2.5 py-1.5 flex items-center gap-1.5 text-sm after:absolute after:-left-1.5 after:inset-y-0 after:block after:w-px after:transition-colors",
+                "group relative w-full px-2.5 py-1.5 flex items-center gap-1.5 text-sm after:absolute after:inset-y-0 after:block after:w-px after:transition-colors",
+                props.isNestedElement ? "after:-left-4" : "after:-left-1.5",
                 props.currentPathname.startsWith(`/docs/${item.id}`)
                   ? "text-primary after:bg-primary after:z-1 after:rounded-full"
-                  : "after:bg-muted/25 dark:after:bg-neutral-700 text-muted/75 dark:text-neutral-400",
+                  : "after:bg-muted/25 dark:after:bg-secondary text-muted/75 dark:text-neutral-400",
               )}
             >
               <Icon
                 icon={item.data.icon}
                 className={clsx(
                   "shrink-0 size-4 mr-1",
-                  props.currentPathname.startsWith(`/docs/${item.href}`)
+                  props.currentPathname.startsWith(`/docs/${item.id}`)
                     ? "text-primary"
                     : "group-data-[state=open]:text-muted-foreground",
                 )}

src/lib/layouts/DocsLayout.astro

@@ -23,7 +23,6 @@ const currentCollection = documentations.find((element) => {
 
 <BaseLayout>
   <main class="relative flex-1">
-    <Separator />
     <div class="mx-auto px-2 sm:px-0 max-w-[var(--container-width)]">
       <div class="flex flex-col lg:grid lg:grid-cols-10 lg:gap-8">
         <aside class="hidden lg:block lg:col-span-2 pr-2">
@@ -42,11 +41,11 @@ const currentCollection = documentations.find((element) => {
                         <div
                           class={clsx(
                             "rounded-sm p-1 inline-flex ring-inset ring-1",
-                            // Astro.url.pathname.startsWith(
-                            //   `${element.children[0].href}`,
-                            // )
-                            //   ? "bg-primary ring-primary text-white"
-                            //   : "bg-gray-50 dark:bg-gray-800 ring-gray-200 dark:ring-gray-700 text-muted-foreground",
+                            Astro.url.pathname.startsWith(
+                              `/docs/${currentCollection.id.replace("_default", "")}`,
+                            )
+                              ? "bg-primary ring-primary text-background"
+                              : "bg-gray-50 dark:bg-gray-800 ring-gray-200 dark:ring-gray-700 text-muted-foreground",
                           )}
                         >
                           {element.data.icon && (
@@ -60,11 +59,11 @@ const currentCollection = documentations.find((element) => {
                         <span
                           class={clsx(
                             "text-sm relative",
-                            // Astro.url.pathname.startsWith(
-                            //   `${element.children[0].href}`,
-                            // )
-                            //   ? "text-primary"
-                            //   : "text-muted-foreground",
+                            Astro.url.pathname.startsWith(
+                              `/docs/${currentCollection.id.replace("_default", "")}`,
+                            )
+                              ? "text-primary/80"
+                              : "text-muted-foreground",
                           )}
                         >
                           {element.data.label}