Add selected marker

components/OrganizedContent.module.css

@@ -12,6 +12,7 @@
 }
 
 .navOption {
+  display: flex;
   width: max-content;
   padding: 0.5rem 2rem 0.5rem 0.5rem;
   font-size: 0.875rem;
@@ -42,6 +43,12 @@
   background-color: rgba(92, 175, 249, 0.05);
 }
 
+.selectedMarker {
+  background-color: var(--blue-2);
+  width: 0.22rem;
+  margin-right: 0.5rem;
+}
+
 .readAll {
   font-weight: bold;
 }

components/OrganizedContent.tsx

@@ -37,12 +37,17 @@ export const OrganizedContent: React.FC<Props> = ({
       ? headings[currentIndex + 1]
       : undefined;
 
+  const isMobile = true;
+
+  if (!isMobile) {
     return (
       <div className={styles.organizedContent}>
         <div className={styles.nav}>
           {headings.map((heading, index) => (
             <div
-            className={index === currentIndex ? styles.selectedHeadingArea : ""}
+              className={
+                index === currentIndex ? styles.selectedHeadingArea : ""
+              }
               key={heading.url}
             >
               <div
@@ -56,6 +61,9 @@ export const OrganizedContent: React.FC<Props> = ({
                     : "")
                 }
               >
+                {index === currentIndex && (
+                  <span className={styles.selectedMarker} />
+                )}
                 <Link url={heading.url}>{heading.name}</Link>
               </div>
               <div className={styles.divider}></div>
@@ -137,4 +145,7 @@ export const OrganizedContent: React.FC<Props> = ({
         </div>
       </div>
     );
+  } else {
+    return <div>Test</div>;
+  }
 };