Styling for active item on docs side nav

homepage/design-system/tailwind.config.js

@@ -6,8 +6,7 @@ const plugin = require("tailwindcss/plugin");
 
 const stonePalette = {
   50: "oklch(0.988281 0.002 75)",
-  75: "oklch(0.980563 0.002 75)",
-  100: "oklch(0.964844 0.002 75)",
+  100: "oklch(0.980563 0.002 75)",
   200: "oklch(0.917969 0.002 75)",
   300: "oklch(0.853516 0.002 75)",
   400: "oklch(0.789063 0.002 75)",

homepage/homepage/components/SideNav.tsx

@@ -29,7 +29,7 @@ export function SideNav({
     <div className={clsx(className, "text-sm space-y-5")}>
       {children}
 
-      <div className="flex items-center gap-2">
+      <div className="flex items-center gap-2 px-2">
         <span className="inline-block size-2 rounded-full bg-yellow-400"></span>{" "}
         Documentation coming soon
       </div>

homepage/homepage/components/SideNavHeader.tsx

@@ -7,7 +7,8 @@ export function SideNavHeader({
   href?: string;
   children: React.ReactNode;
 }) {
-  const className = "block font-medium text-stone-900 py-1 dark:text-white";
+  const className =
+    "block px-2 font-medium text-stone-900 py-1 dark:text-white mb-1";
 
   if (href) {
     return (

homepage/homepage/components/SideNavItem.tsx

@@ -16,7 +16,7 @@ export function SideNavItem({
 }) {
   const classes = clsx(
     className,
-    "py-1 flex items-center hover:transition-colors",
+    "py-1.5 px-2 rounded-md flex items-center  transition-colors",
   );
   const path = usePathname();
 
@@ -26,10 +26,9 @@ export function SideNavItem({
         href={href}
         className={clsx(
           classes,
-          href &&
-            "hover:text-stone-900 dark:hover:text-stone-200 transition-colors hover:transition-none",
+          href && "hover:text-stone-900 dark:hover:text-stone-200",
           {
-            "text-stone-900 dark:text-white": path === href,
+            "text-stone-900  bg-stone-100 dark:text-white": path === href,
           },
         )}
       >

homepage/homepage/components/docs/DocsLayout.tsx

@@ -40,7 +40,7 @@ export default function DocsLayout({
             className={clsx(
               "py-8",
               "pr-3 md:col-span-4 lg:col-span-3",
-              "sticky align-start top-[72px] h-[calc(100vh-72px)] overflow-y-auto overflow-x-hidden",
+              "sticky align-start top-[72px] h-[calc(100vh-72px)] overflow-y-auto",
               "hidden md:block",
             )}
           >
@@ -55,7 +55,7 @@ export default function DocsLayout({
             {toc && (
               <>
                 <TableOfContents
-                  className="pl-3 py-6 shrink-0 text-sm sticky align-start top-[72px] w-[16rem] h-[calc(100vh-72px)] overflow-y-auto overflow-x-hidden hidden lg:block"
+                  className="pl-3 py-6 shrink-0 text-sm sticky align-start top-[72px] w-[16rem] h-[calc(100vh-72px)] overflow-y-auto hidden lg:block"
                   items={toc as Toc}
                 />
               </>

homepage/homepage/components/docs/FrameworkSelect.tsx

@@ -51,7 +51,7 @@ export function FrameworkSelect({ className }: { className?: string }) {
   };
 
   return (
-    <Dropdown>
+    <Dropdown as="div" className="px-2">
       <DropdownButton
         icon="chevronDown"
         className="flex-row-reverse w-full justify-between"

homepage/homepage/lib/docNavigationItems.js

@@ -57,26 +57,26 @@ export const docNavigationItems = [
     items: [
       {
         // upgrade guides
-        name: "Jazz 0.10.0 - New authentication flow",
+        name: "0.10.0 - New authentication flow",
         href: "/docs/upgrade/0-10-0",
         done: 100,
       },
       {
         // upgrade guides
-        name: "Jazz 0.9.8 - Without me!",
+        name: "0.9.8 - Without me!",
         href: "/docs/upgrade/0-9-8",
         done: 100,
       },
       {
         // upgrade guides
-        name: "Jazz 0.9.2 - Local persistence on React Native",
+        name: "0.9.2 - Local persistence on React Native",
         href: "/docs/upgrade/react-native-local-persistence",
         done: 100,
         framework: "react-native",
       },
       {
         // upgrade guides
-        name: "Jazz 0.9.0 - Top level imports",
+        name: "0.9.0 - Top level imports",
         href: "/docs/upgrade/0-9-0",
         done: 100,
       },