Fix styling for Link

components/OrganizedContent.module.css

@@ -14,17 +14,42 @@
 
 .navOption {
   display: flex;
-  width: max-content;
-  padding: 0.5rem 2rem 0.5rem 0.5rem;
+  overflow: hidden;
+  white-space: nowrap;
   font-size: 0.875rem;
 }
 
+.navLink {
+  width: 100%;
+  cursor: pointer;
+  padding: 0.5rem 2rem 0.5rem 0.5rem;
+}
+
+.readAll {
+  font-weight: bold;
+}
+
 .divider {
   border-bottom: 1px solid var(--blue-2);
   opacity: 0.25;
   width: '100%',
 }
 
+.selectedHeadingArea > .navOption {
+  color: var(--blue-2);
+  font-weight: bold;
+}
+
+.selectedHeadingArea {
+  background-color: var(--blue-1-05);
+}
+
+.selectedMarker {
+  background-color: var(--blue-2);
+  width: calc(4rem / 16);
+  margin: 0.4rem 0.1rem 0.4rem 0.5rem;
+}
+
 .footer {
   margin-top: 1rem;
   display: flex;
@@ -35,25 +60,6 @@
   display: flex; 
 }
 
-.selectedHeadingArea > .navOption {
-  color: var(--blue-2);
-  font-weight: bold;
-}
-
-.selectedHeadingArea {
-  background-color: rgba(92, 175, 249, 0.05);
-}
-
-.selectedMarker {
-  background-color: var(--blue-2);
-  width: calc(4rem / 16);
-  margin-right: 0.5rem;
-}
-
-.readAll {
-  font-weight: bold;
-}
-
 .arrowHeading {
   color: var(--blue-2);
   font-size: 0.875rem;
@@ -92,6 +98,10 @@
   display: flex; 
 }
 
+.footerDivider {
+  width: 1rem;
+}
+
 @media only screen and (max-width: calc(768rem / 16)) {
   .nav {
     display: none;

components/OrganizedContent.tsx

@@ -2,8 +2,9 @@ import React, { ReactNode, ComponentType } from "react";
 import styles from "./OrganizedContent.module.css";
 
 export interface LinkProps {
-  children: string | ReactNode | (string | ReactNode)[];
+  className: string;
   url: string;
+  children: string | ReactNode | (string | ReactNode)[];
 }
 
 type Link = ComponentType<LinkProps>;
@@ -68,7 +69,6 @@ export const OrganizedContent = ({
   );
 };
 
-//todo push class to link
 const Nav = ({ headings, currentIndex, link: Link }: ChildProps) => {
   return (
     <div className={styles.nav}>
@@ -87,7 +87,9 @@ const Nav = ({ headings, currentIndex, link: Link }: ChildProps) => {
             {index === currentIndex && (
               <span className={styles.selectedMarker} />
             )}
-            <Link url={heading.url}>{heading.name}</Link>
+            <Link className={styles.navLink} url={heading.url}>
+              {heading.name}
+            </Link>
           </div>
           <div className={styles.divider}></div>
         </div>

components/playground.tsx

@@ -206,9 +206,10 @@ export function OrganizedContentDemo() {
 
   const [index, setIndex] = useState(0);
 
-  function FakeLink({ url, children }: LinkProps) {
+  function FakeLink({ className, url, children }: LinkProps) {
     return (
       <div
+        className={className}
         onClick={() => {
           const target = sections.findIndex((section) => section.url === url);
 

pages/_app.css

@@ -9,6 +9,7 @@ body {
   --teal-1: #76ffdc;
   --teal-2: #4ed4b2;
   --blue-1: #5caff9;
+  --blue-1-05: #5caff90D;
   --blue-1-20: #5caff934;
   --blue-2: #1482e3;
   --purple-1: #525284;
@@ -27,6 +28,7 @@ body {
   --teal-1: #76ffdc;
   --teal-2: #4ed4b2;
   --blue-1: #5caff9;
+  --blue-1-05: #5caff90D;
   --blue-1-20: #5caff934;
   --blue-2: #1482e3;
   --purple-1: #525284;