From 61d052fc620ed5642e3db4e7fff8b3e2ba59ec26 Mon Sep 17 00:00:00 2001
From: Rainnny7 <braydonrainnny@gmail.com>
Date: Mon, 7 Oct 2024 14:24:57 -0400
Subject: [PATCH] update how the links in the sidebar look

Took 40 minutes
---
 src/components/docs-footer.tsx           |  2 +-
 src/components/sidebar/sidebar-links.tsx | 18 ++++++++++--------
 src/components/sidebar/sidebar.tsx       |  2 +-
 tailwind.config.ts                       |  4 ++++
 4 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/components/docs-footer.tsx b/src/components/docs-footer.tsx
index b8bd96b..c2f9415 100644
--- a/src/components/docs-footer.tsx
+++ b/src/components/docs-footer.tsx
@@ -53,7 +53,7 @@ const DocsFooter = ({
             </div>
 
             {/* Pages */}
-            <Separator className="my-4" />
+            <Separator className="my-4 bg-separator-gradient" />
             <div className="flex justify-between">
                 {/* Previous */}
                 {previous && (
diff --git a/src/components/sidebar/sidebar-links.tsx b/src/components/sidebar/sidebar-links.tsx
index 37e13f1..84966c3 100644
--- a/src/components/sidebar/sidebar-links.tsx
+++ b/src/components/sidebar/sidebar-links.tsx
@@ -51,14 +51,15 @@ const CategoryItem = ({
     const hasChildren = Object.keys(node.children).length > 0;
 
     return (
-        <div className={`relative ${depth > 0 ? "ml-2.5" : ""} select-none`}>
+        <div className={cn(`relative select-none`, depth > 0 && "ml-2.5")}>
             {/* Indentation */}
             {depth > 0 && (
                 <div
-                    className={`absolute left-0 top-1 bottom-0 border-l-2 border-muted`}
-                    style={{
-                        height: isLast ? "30px" : "100%",
-                    }}
+                    className={cn(
+                        "absolute left-0 bottom-0 border-l-2 border-muted",
+                        isLast ? "h-[32px]" : "h-[100%]",
+                        active && "border-primary"
+                    )}
                 />
             )}
 
@@ -71,9 +72,10 @@ const CategoryItem = ({
                     >
                         <Button
                             className={cn(
-                                `relative px-1.5 ${depth > 0 ? "pl-4" : ""} w-full justify-between`,
+                                `relative w-full px-1.5 h-8 text-base justify-between hover:bg-accent/20`,
+                                depth > 0 && "pl-4",
                                 active &&
-                                    "bg-primary/15 hover:bg-primary/20 text-primary/95 hover:text-primary"
+                                    "text-primary/95 font-bold hover:text-primary"
                             )}
                             variant="ghost"
                         >
@@ -134,7 +136,7 @@ const CategoryItem = ({
 const buildTree = (pages: DocsContentMetadata[]): Record<string, TreeNode> => {
     const tree: Record<string, TreeNode> = {};
 
-    pages.forEach((page) => {
+    pages.forEach((page: DocsContentMetadata) => {
         const parts: string[] | undefined = page.slug?.split("/");
         let currentLevel = tree;
 
diff --git a/src/components/sidebar/sidebar.tsx b/src/components/sidebar/sidebar.tsx
index e84c1eb..c849327 100644
--- a/src/components/sidebar/sidebar.tsx
+++ b/src/components/sidebar/sidebar.tsx
@@ -42,7 +42,7 @@ const SidebarContent = (): ReactElement => {
 
             {/* Theme Switcher */}
             <div className="flex flex-col">
-                <Separator className="mb-3" />
+                <Separator className="mb-3 bg-separator-gradient" />
                 <ThemeSwitcher />
             </div>
         </div>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 750f8ca..2a0b5f0 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -63,6 +63,10 @@ const config: Config = {
                 md: "calc(var(--radius) - 2px)",
                 sm: "calc(var(--radius) - 4px)",
             },
+            backgroundImage: {
+                "separator-gradient":
+                    "linear-gradient(90deg, #161619, hsl(var(--muted)), #161619)",
+            },
         },
     },
     plugins: [require("tailwindcss-animate")],