Refine sidebar and navigation styles for light/dark modes

Author: kylemclaren

src/components/react/LinkCard.tsx

@@ -63,7 +63,7 @@ const LinkCard: React.FC<LinkCardProps> = ({
       className="block no-underline group"
     >
       <SpotlightCard
-        className="h-full transition-colors hover:border-primary/30"
+        className="h-full"
         spotlightColor="color-mix(in oklch, var(--primary) 15%, transparent)"
       >
         <div className="flex flex-col gap-3">

src/styles/custom.css

@@ -185,7 +185,7 @@
   /* Background colors */
   --sl-color-bg: oklch(0.147 0.004 49.25);
   --sl-color-bg-nav: oklch(0.18 0.005 49.25);
-  --sl-color-bg-sidebar: oklch(0.16 0.004 49.25);
+  --sl-color-bg-sidebar: oklch(0.147 0.004 49.25);
   --sl-color-bg-inline-code: oklch(0.25 0.007 34.298);
 
   /* Border colors */
@@ -317,6 +317,27 @@ header.header {
   border-bottom-color: var(--sl-color-hairline);
 }
 
+/* Dark mode - remove borders between sections (except header) */
+[data-theme='dark'] .sidebar-pane {
+  border-inline-end: none;
+}
+
+[data-theme='dark'] .right-sidebar {
+  border-inline-start: none;
+}
+
+[data-theme='dark'] .content-panel {
+  border-top: none;
+}
+
+[data-theme='dark'] nav.sidebar {
+  border: none;
+}
+
+[data-theme='dark'] .sidebar-content {
+  border: none;
+}
+
 /* Table styling */
 table {
   width: 100%;
@@ -364,22 +385,54 @@ h1, h2, h3, h4, h5, h6 {
   background-color: oklch(0.97 0 0) !important; /* #f5f5f5 neutral gray */
 }
 
-[data-theme='light'] nav[aria-label="Main"] a[aria-current="page"] {
+[data-theme='light'] nav[aria-label="Main"] a[aria-current="page"],
+[data-theme='light'] nav[aria-label="Main"] a[aria-current="page"]:hover,
+[data-theme='light'] nav[aria-label="Main"] a[aria-current="page"]:focus {
   color: oklch(0.15 0 0) !important;
-  background-color: oklch(0.97 0 0) !important; /* #f5f5f5 neutral gray */
+  background-color: transparent !important;
   font-weight: 600;
 }
 
+/* Nested sidebar items in light mode */
+[data-theme='light'] nav[aria-label="Main"] ul ul li {
+  border-inline-start: 1px solid oklch(0 0 0 / 10%);
+  border-radius: 0 0.5rem 0.5rem 0;
+}
+
+[data-theme='light'] nav[aria-label="Main"] ul ul li:has(> a[aria-current="page"]) {
+  border-inline-start: 2px solid oklch(0.5 0.2 285);
+}
+
+[data-theme='light'] nav[aria-label="Main"] ul ul li:has(> a[aria-current="page"]) > a {
+  margin-left: -1px;
+}
+
 /* Sidebar navigation in dark mode */
-[data-theme='dark'] nav[aria-label="Main"] a:hover {
+[data-theme='dark'] nav[aria-label="Main"] a:hover,
+[data-theme='dark'] nav[aria-label="Main"] li:has(> a:hover) {
   color: oklch(0.98 0 0) !important;
-  background-color: oklch(0.22 0 0) !important; /* lighter gray for visibility */
+  background-color: oklch(0.22 0 0) !important;
 }
 
-[data-theme='dark'] nav[aria-label="Main"] a[aria-current="page"] {
+[data-theme='dark'] nav[aria-label="Main"] a[aria-current="page"],
+[data-theme='dark'] nav[aria-label="Main"] a[aria-current="page"]:hover,
+[data-theme='dark'] nav[aria-label="Main"] a[aria-current="page"]:focus {
   color: oklch(0.98 0 0) !important;
-  background-color: oklch(0.22 0 0) !important; /* lighter gray for visibility */
-  font-weight: 600;
+  background-color: transparent !important;
+}
+
+/* Nested sidebar items get a left border indicator */
+[data-theme='dark'] nav[aria-label="Main"] ul ul li {
+  border-inline-start: 1px solid oklch(1 0 0 / 10%);
+  border-radius: 0 0.5rem 0.5rem 0;
+}
+
+[data-theme='dark'] nav[aria-label="Main"] ul ul li:has(> a[aria-current="page"]) {
+  border-inline-start: 2px solid var(--sl-color-accent);
+}
+
+[data-theme='dark'] nav[aria-label="Main"] ul ul li:has(> a[aria-current="page"]) > a {
+  margin-left: -1px;
 }
 
 /* Sidebar group labels in light mode */