[docs] Full width sidenav links (mui#1199)

samuelsycamore · Dec 20, 2024 · 9b7ec75 · 9b7ec75
1 parent 6961942
commit 9b7ec75
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 9 deletions.
diff --git a/docs/src/components/SideNav.css b/docs/src/components/SideNav.css
@@ -101,26 +101,28 @@
   }
 
   .SideNavLink {
-    display: block;
-    padding: var(--side-nav-item-padding-y) 0.75rem;
+    flex-grow: 1;
+    padding: calc(var(--side-nav-item-padding-y) - 1px) 0.75rem;
+    border-block: 1px solid transparent; /* Maintain a 1px gap between active an inactive item */
+    background-clip: padding-box;
     border-radius: var(--radius-md);
+    letter-spacing: 0.0025em;
 
     @media (hover: hover) {
       &:hover {
-        text-decoration: underline;
-        text-decoration-color: var(--color-gray-500);
-        text-decoration-thickness: 1px;
-        text-underline-offset: 2px;
+        background-color: var(--color-gray-50);
       }
     }
 
     &[data-active] {
-      flex-grow: 1;
+      border: none;
+      padding: var(--side-nav-item-padding-y) 0.75rem;
       background-color: var(--color-gray-50);
       outline: 1px solid var(--color-gray-200);
       outline-offset: -1px;
-      text-decoration: none;
       font-weight: 500;
+      letter-spacing: -0.0025em;
+      word-spacing: -0.005em;
       cursor: default;
     }
 

diff --git a/docs/src/components/SideNav.tsx b/docs/src/components/SideNav.tsx
@@ -124,8 +124,15 @@ export function Item({ children, className, href, ...props }: ItemProps) {
         data-active={active || undefined}
         className="SideNavLink"
         href={href}
+        scroll={!active}
+        onClick={() => {
+          // Scroll to top smoothly when clicking on the currently active item
+          if (active) {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+          }
+        }}
       >
-        {children}
+        <span className="SideNavLinkInner">{children}</span>
       </NextLink>
     </li>
   );