Fix styling for Link

components/OrganizedContent.module.css

@@ -14,25 +14,25 @@
 
 .navOption {
   display: flex;
-  width: max-content;
-  padding: 0.5rem 2rem 0.5rem 0.5rem;
+  overflow: hidden;
+  white-space: nowrap;
   font-size: 0.875rem;
 }
 
-.divider {
-  border-bottom: 1px solid var(--blue-2);
-  opacity: 0.25;
-  width: '100%',
+.navLink {
+  width: 100%;
+  cursor: pointer;
+  padding: 0.5rem 2rem 0.5rem 0.5rem;
 }
 
-.footer {
-  margin-top: 1rem;
-  display: flex;
-  justify-content: space-between;
+.readAll {
+  font-weight: bold;
 }
 
-.footerSection {
-  display: flex; 
+.divider {
+  border-bottom: 1px solid var(--blue-2);
+  opacity: 0.25;
+  width: '100%',
 }
 
 .selectedHeadingArea > .navOption {
@@ -41,17 +41,23 @@
 }
 
 .selectedHeadingArea {
-  background-color: rgba(92, 175, 249, 0.05);
+  background-color: var(--blue-1-05);
 }
 
 .selectedMarker {
   background-color: var(--blue-2);
   width: calc(4rem / 16);
-  margin-right: 0.5rem;
+  margin: 0.4rem 0.1rem 0.4rem 0.5rem;
 }
 
-.readAll {
-  font-weight: bold;
+.footer {
+  margin-top: 1rem;
+  display: flex;
+  justify-content: space-between;
+}
+
+.footerSection {
+  display: flex; 
 }
 
 .arrowHeading {
@@ -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;