fix(hub): sidebar — grey background, uppercase section labels, section borders, 260px width to match GitHub docs style

Author: Phatfella

public/styles/global.css

@@ -65,15 +65,15 @@ svg {
   position: fixed;
   top: 0;
   left: 0;
-  width: 240px;
+  width: 260px;
   height: 100vh;
   padding-top: 52px;
   /* Primer Header height */
   padding-bottom: 40px;
   border-right: 1px solid var(--borderColor-default, var(--color-border-default, #d1d9e0));
   overflow-y: auto;
   overflow-x: hidden;
-  background-color: var(--bgColor-default, var(--color-canvas-default));
+  background-color: var(--bgColor-muted, var(--color-canvas-subtle, #f6f8fa));
   z-index: 50;
 }
 
@@ -89,15 +89,23 @@ svg {
 
 /* -- Nav section wrappers ---------------------------------- */
 .nav-section {
-  padding: 0 0 4px;
+  padding: 0 0 8px;
+  border-top: 1px solid var(--borderColor-muted, var(--color-border-muted, #d8dee4));
+}
+
+.nav-section:first-child {
+  border-top: none;
+  padding-top: 8px;
 }
 
 /* Static section heading (e.g. "Understand") */
 .nav-section-label {
   display: block;
   padding: 12px 16px 4px;
-  font-size: var(--font-size-small, 0.75rem);
+  font-size: 0.6875rem;
   font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
   color: var(--fgColor-muted, var(--color-fg-muted));
 }
 
@@ -107,12 +115,14 @@ svg {
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  padding: 8px 14px 4px 16px;
+  padding: 10px 14px 10px 16px;
   background: none;
   border: none;
   cursor: pointer;
-  font-size: var(--font-size-small, 0.75rem);
+  font-size: 0.6875rem;
   font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
   color: var(--fgColor-muted, var(--color-fg-muted));
   line-height: 1.5;
 }
@@ -151,7 +161,7 @@ svg {
 /* .SideNav-item (Primer) + .nav-link (ours) + optional .active */
 .SideNav-item.nav-link {
   display: block;
-  padding: 6px 16px;
+  padding: 5px 16px 5px 14px;
   font-size: 0.875rem;
   font-weight: 400;
   color: var(--fgColor-default, var(--color-fg-default));
@@ -165,7 +175,8 @@ svg {
 }
 
 .SideNav-item.nav-link:hover {
-  background-color: var(--bgColor-muted, var(--color-canvas-subtle));
+  background-color: var(--bgColor-neutral-hover, rgba(0,0,0,0.05));
+  border-left-color: var(--borderColor-default, var(--color-border-default));
   color: var(--fgColor-default, var(--color-fg-default));
   text-decoration: none;
 }
@@ -174,12 +185,12 @@ svg {
   border-left-color: var(--fgColor-accent, var(--color-accent-fg));
   color: var(--fgColor-default, var(--color-fg-default));
   font-weight: 600;
-  background-color: var(--bgColor-muted, var(--color-canvas-subtle));
+  background-color: var(--bgColor-neutral-hover, rgba(0,0,0,0.05));
 }
 
 /* -- Content offset (right of fixed sidebar) --------------- */
 .page-offset {
-  margin-left: 240px;
+  margin-left: 260px;
   display: flex;
   flex-direction: column;
   min-height: calc(100vh - 52px);
@@ -283,14 +294,12 @@ svg {
   }
 
   .sidebar {
-    left: -240px;
+    left: -260px;
     top: 0;
     padding-top: 56px;
     z-index: 300;
     transition: left 0.2s ease;
-    /* Solid fallback + CSS variable for light/dark */
-    background-color: #ffffff;
-    background-color: var(--bgColor-default, var(--color-canvas-default, #ffffff));
+    background-color: var(--bgColor-muted, var(--color-canvas-subtle, #f6f8fa));
   }
 
   .sidebar.open {