www/www-new
16
3
Fork 11
Code Issues 60 Pull Requests 49 Projects Releases Wiki Activity

Add selected marker

Browse Source
This commit is contained in:
William Tran 2021-05-24 20:28:23 -04:00
parent 6099a0b337
commit 7f33bbdabd
2 changed files with 109 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
components/OrganizedContent.module.css
View File

@ -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;
}

193
components/OrganizedContent.tsx
View File

@ -37,104 +37,115 @@ export const OrganizedContent: React.FC<Props> = ({
? headings[currentIndex + 1]
: undefined;
return (
<div className={styles.organizedContent}>
<div className={styles.nav}>
{headings.map((heading, index) => (
<div
className={index === currentIndex ? styles.selectedHeadingArea : ""}
key={heading.url}
>
const isMobile = true;
if (!isMobile) {
return (
<div className={styles.organizedContent}>
<div className={styles.nav}>
{headings.map((heading, index) => (
<div
className={
styles.navOption +
" " +
(index === currentIndex
? styles.selectedHeading
: heading.name === "Read All"
? styles.readAll
: "")
index === currentIndex ? styles.selectedHeadingArea : ""
}
key={heading.url}
>
<Link url={heading.url}>{heading.name}</Link>
<div
className={
styles.navOption +
" " +
(index === currentIndex
? styles.selectedHeading
: heading.name === "Read All"
? styles.readAll
: "")
}
>
{index === currentIndex && (
<span className={styles.selectedMarker} />
)}
<Link url={heading.url}>{heading.name}</Link>
</div>
<div className={styles.divider}></div>
</div>
<div className={styles.divider}></div>
</div>
))}
</div>
))}
</div>
<div>
{!isReadAll ? (
<h2 className={styles.contentHeading}>
{headings[currentIndex].name}
</h2>
) : (
<div>
{headings
.filter(
(heading: { name: string }) => heading.name !== "Read All"
)
.map((heading) => (
<div key={heading.url}>
<h2 className={styles.contentHeading}>{heading.name}</h2>
{heading.content}
</div>
))}
<div>
{!isReadAll ? (
<h2 className={styles.contentHeading}>
{headings[currentIndex].name}
</h2>
) : (
<div>
{headings
.filter(
(heading: { name: string }) => heading.name !== "Read All"
)
.map((heading) => (
<div key={heading.url}>
<h2 className={styles.contentHeading}>{heading.name}</h2>
{heading.content}
</div>
))}
</div>
)}
{children}
<div className={styles.footer}>
{prevHeading && (
<div className={styles.clickable}>
<Link url={prevHeading.url}>
<div className={styles.footerSection}>
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="9"
viewBox="0 0 14 9"
className={styles.arrow + " " + styles.prevArrow}
>
<path d="M6.24407 8.12713C6.64284 8.58759 7.35716 8.58759 7.75593 8.12713L13.3613 1.65465C13.9221 1.00701 13.4621 0 12.6053 0H1.39467C0.537918 0 0.0778675 1.00701 0.638743 1.65465L6.24407 8.12713Z" />
</svg>
<div>
<div className={styles.prevNext}>Previous</div>
<div className={styles.arrowHeading}>
{prevHeading.name}
</div>
</div>
</div>
</Link>
</div>
)}
<div></div>
{nextHeading && (
<div className={styles.clickable}>
<Link url={nextHeading.url}>
<div className={styles.footerSection}>
<div>
<div className={styles.prevNext + " " + styles.nextText}>
Next
</div>
<div className={styles.arrowHeading}>
{nextHeading.name}
</div>
</div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="9"
viewBox="0 0 14 9"
className={styles.arrow + " " + styles.nextArrow}
>
<path d="M6.24407 8.12713C6.64284 8.58759 7.35716 8.58759 7.75593 8.12713L13.3613 1.65465C13.9221 1.00701 13.4621 0 12.6053 0H1.39467C0.537918 0 0.0778675 1.00701 0.638743 1.65465L6.24407 8.12713Z" />
</svg>
</div>
</Link>
</div>
)}
</div>
)}
{children}
<div className={styles.footer}>
{prevHeading && (
<div className={styles.clickable}>
<Link url={prevHeading.url}>
<div className={styles.footerSection}>
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="9"
viewBox="0 0 14 9"
className={styles.arrow + " " + styles.prevArrow}
>
<path d="M6.24407 8.12713C6.64284 8.58759 7.35716 8.58759 7.75593 8.12713L13.3613 1.65465C13.9221 1.00701 13.4621 0 12.6053 0H1.39467C0.537918 0 0.0778675 1.00701 0.638743 1.65465L6.24407 8.12713Z" />
</svg>
<div>
<div className={styles.prevNext}>Previous</div>
<div className={styles.arrowHeading}>
{prevHeading.name}
</div>
</div>
</div>
</Link>
</div>
)}
<div></div>
{nextHeading && (
<div className={styles.clickable}>
<Link url={nextHeading.url}>
<div className={styles.footerSection}>
<div>
<div className={styles.prevNext + " " + styles.nextText}>
Next
</div>
<div className={styles.arrowHeading}>
{nextHeading.name}
</div>
</div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="9"
viewBox="0 0 14 9"
className={styles.arrow + " " + styles.nextArrow}
>
<path d="M6.24407 8.12713C6.64284 8.58759 7.35716 8.58759 7.75593 8.12713L13.3613 1.65465C13.9221 1.00701 13.4621 0 12.6053 0H1.39467C0.537918 0 0.0778675 1.00701 0.638743 1.65465L6.24407 8.12713Z" />
</svg>
</div>
</Link>
</div>
)}
</div>
</div>
</div>
);
);
} else {
return <div>Test</div>;
}
};