diff --git a/components/OrganizedContent.module.css b/components/OrganizedContent.module.css index e3bde3d1..8a1c772f 100644 --- a/components/OrganizedContent.module.css +++ b/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; } diff --git a/components/OrganizedContent.tsx b/components/OrganizedContent.tsx index 0bc80c42..af22a0cb 100644 --- a/components/OrganizedContent.tsx +++ b/components/OrganizedContent.tsx @@ -37,104 +37,115 @@ export const OrganizedContent: React.FC = ({ ? headings[currentIndex + 1] : undefined; - return ( -
-
- {headings.map((heading, index) => ( -
+ const isMobile = true; + + if (!isMobile) { + return ( +
+
+ {headings.map((heading, index) => (
- {heading.name} +
+ {index === currentIndex && ( + + )} + {heading.name} +
+
-
-
- ))} -
+ ))} +
-
- {!isReadAll ? ( -

- {headings[currentIndex].name} -

- ) : ( -
- {headings - .filter( - (heading: { name: string }) => heading.name !== "Read All" - ) - .map((heading) => ( -
-

{heading.name}

- {heading.content} -
- ))} +
+ {!isReadAll ? ( +

+ {headings[currentIndex].name} +

+ ) : ( +
+ {headings + .filter( + (heading: { name: string }) => heading.name !== "Read All" + ) + .map((heading) => ( +
+

{heading.name}

+ {heading.content} +
+ ))} +
+ )} + {children} +
+ {prevHeading && ( +
+ +
+ + + +
+
Previous
+
+ {prevHeading.name} +
+
+
+ +
+ )} +
+ {nextHeading && ( +
+ +
+
+
+ Next +
+
+ {nextHeading.name} +
+
+ + + +
+ +
+ )}
- )} - {children} -
- {prevHeading && ( -
- -
- - - -
-
Previous
-
- {prevHeading.name} -
-
-
- -
- )} -
- {nextHeading && ( -
- -
-
-
- Next -
-
- {nextHeading.name} -
-
- - - -
- -
- )}
-
- ); + ); + } else { + return
Test
; + } };