clean up navigation styles

souporserious · Jan 4, 2024 · 7ba64f3 · 7ba64f3 · vercel · Jan 4, 2024
1 parent fcbc6fd
commit 7ba64f3
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 19 deletions.
diff --git a/site/components/Sidebar/NavigationBoundary.module.css b/site/components/Sidebar/NavigationBoundary.module.css
@@ -1,6 +1,7 @@
 .container {
-  display: flex;
+  grid-area: 1 / 1;
   flex-direction: column;
+  margin-top: calc(var(--font-size-heading-1) + 1rem);
 }
 
 .container[data-open='false'] {

diff --git a/site/components/Sidebar/Sidebar.module.css b/site/components/Sidebar/Sidebar.module.css
@@ -1,8 +1,7 @@
 .container {
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  align-items: start;
   padding: 3rem 2rem;
-  gap: 2.5rem;
 }
 
 @media screen and (min-width: 60rem) {

diff --git a/site/components/Sidebar/Sidebar.tsx b/site/components/Sidebar/Sidebar.tsx
@@ -12,6 +12,7 @@ export function Sidebar() {
     <aside className={styles.container}>
       <div
         style={{
+          gridArea: '1 / 1',
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'space-between',
@@ -59,20 +60,13 @@ export function Sidebar() {
 function renderList(props: any) {
   const styles: React.CSSProperties = {
     fontSize: 'var(--font-size-body-2)',
-    fontWeight: 400,
-    textTransform: 'initial',
-    letterSpacing: 'initial',
     display: 'flex',
     flexDirection: 'column',
     listStyle: 'none',
     paddingLeft: 0,
   }
 
   if (props.depth === 0) {
-    styles.fontSize = 'var(--font-size-title)'
-    styles.fontWeight = 600
-    styles.textTransform = 'uppercase'
-    styles.letterSpacing = '0.1rem'
     styles.gap = '1.5rem'
   } else if (props.depth === 1) {
     styles.paddingLeft = '0.8rem'
@@ -88,12 +82,20 @@ function renderList(props: any) {
 function renderItem(props: any) {
   return (
     <li key={props.label}>
-      <SidebarLink
-        pathname={props.pathname}
-        name={props.label}
-        hasData={props.hasData}
-        style={{ marginBottom: props.depth === 0 ? '0.5rem' : 0 }}
-      />
+      {props.depth === 0 ? (
+        <div
+          className="title"
+          style={{ padding: '0.25rem 0px', marginBottom: '0.5rem' }}
+        >
+          {props.label}
+        </div>
+      ) : (
+        <SidebarLink
+          pathname={props.pathname}
+          name={props.label}
+          hasData={props.hasData}
+        />
+      )}
       {props.children}
     </li>
   )

diff --git a/site/components/TableOfContents/TableOfContents.tsx b/site/components/TableOfContents/TableOfContents.tsx
@@ -30,7 +30,7 @@ export function TableOfContents({
             <li
               key={id}
               style={{
-                fontSize: 'var(--font-size-body-2)',
+                fontSize: 'var(--font-size-body-3)',
                 padding: '0.25rem 0',
                 paddingLeft: (depth - 2) * 0.8 + 'rem',
               }}
@@ -55,7 +55,7 @@ export function TableOfContents({
                 href={sourcePath}
                 target="_blank"
                 rel="noreferrer"
-                style={{ fontSize: 'var(--font-size-body-2)' }}
+                style={{ fontSize: 'var(--font-size-body-3)' }}
               >
                 View Source
               </a>