Add selected marker
This commit is contained in:
parent
6099a0b337
commit
7f33bbdabd
|
@ -12,6 +12,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.navOption {
|
.navOption {
|
||||||
|
display: flex;
|
||||||
width: max-content;
|
width: max-content;
|
||||||
padding: 0.5rem 2rem 0.5rem 0.5rem;
|
padding: 0.5rem 2rem 0.5rem 0.5rem;
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
|
@ -42,6 +43,12 @@
|
||||||
background-color: rgba(92, 175, 249, 0.05);
|
background-color: rgba(92, 175, 249, 0.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.selectedMarker {
|
||||||
|
background-color: var(--blue-2);
|
||||||
|
width: 0.22rem;
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
.readAll {
|
.readAll {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
|
@ -37,12 +37,17 @@ export const OrganizedContent: React.FC<Props> = ({
|
||||||
? headings[currentIndex + 1]
|
? headings[currentIndex + 1]
|
||||||
: undefined;
|
: undefined;
|
||||||
|
|
||||||
|
const isMobile = true;
|
||||||
|
|
||||||
|
if (!isMobile) {
|
||||||
return (
|
return (
|
||||||
<div className={styles.organizedContent}>
|
<div className={styles.organizedContent}>
|
||||||
<div className={styles.nav}>
|
<div className={styles.nav}>
|
||||||
{headings.map((heading, index) => (
|
{headings.map((heading, index) => (
|
||||||
<div
|
<div
|
||||||
className={index === currentIndex ? styles.selectedHeadingArea : ""}
|
className={
|
||||||
|
index === currentIndex ? styles.selectedHeadingArea : ""
|
||||||
|
}
|
||||||
key={heading.url}
|
key={heading.url}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
|
@ -56,6 +61,9 @@ export const OrganizedContent: React.FC<Props> = ({
|
||||||
: "")
|
: "")
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
|
{index === currentIndex && (
|
||||||
|
<span className={styles.selectedMarker} />
|
||||||
|
)}
|
||||||
<Link url={heading.url}>{heading.name}</Link>
|
<Link url={heading.url}>{heading.name}</Link>
|
||||||
</div>
|
</div>
|
||||||
<div className={styles.divider}></div>
|
<div className={styles.divider}></div>
|
||||||
|
@ -137,4 +145,7 @@ export const OrganizedContent: React.FC<Props> = ({
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
} else {
|
||||||
|
return <div>Test</div>;
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue