c0ntroller/frontpage
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects 1 Activity

Both diary navs (will be selected in css)

Browse Source
This commit is contained in:
Daniel Kluge 2022-10-08 13:35:40 +02:00
parent 7bb69e9b37
commit d6d34b1fc2
1 changed files with 19 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
components/Blog/DiaryPageSelector.tsx
View File

@ -6,18 +6,22 @@ import { useEffect } from "react";
import styles from "../../styles/Blog/DiaryPageSelector.module.scss"; import styles from "../../styles/Blog/DiaryPageSelector.module.scss";
interface IContentNavBar { interface IContent {
pages: string[]; pages: string[];
name: string; name: string;
title: string; title: string;
pageSelected: number pageSelected: number
} }
interface IContentNav extends IContentNavBar { interface IContentNavBar extends IContent {
mobile?: boolean;
}
interface IContentNav extends IContent {
bottom?: boolean; bottom?: boolean;
} }
const PageSelectorBar: NextPage<IContentNavBar> = ({ pages, name, title, pageSelected }) => { const PageSelectorBar: NextPage<IContentNavBar> = ({ pages, name, title, pageSelected, mobile }) => {
const router = useRouter(); const router = useRouter();
// When we are on the main page no previous page exists, otherwise we need to check if the previous page is the main page // When we are on the main page no previous page exists, otherwise we need to check if the previous page is the main page
@ -46,8 +50,10 @@ const PageSelectorBar: NextPage<IContentNavBar> = ({ pages, name, title, pageSel
</select> </select>
); );
const classNames = mobile ? `${styles.barNav} ${styles.mobile}` : styles.barNav;
return ( return (
<div className={styles.barPageSelector}> <div className={classNames}>
{prev} {prev}
<span style={{visibility: prevLink ? "visible" : "hidden"}}>&nbsp;&nbsp;|&nbsp;&nbsp;</span> <span style={{visibility: prevLink ? "visible" : "hidden"}}>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
{select} {select}
@ -62,12 +68,16 @@ const PageSelector: NextPage<IContentNav> = (content) => {
if (content.bottom) return <PageSelectorBar pages={content.pages} name={content.name} title={content.title} pageSelected={content.pageSelected} />; if (content.bottom) return <PageSelectorBar pages={content.pages} name={content.name} title={content.title} pageSelected={content.pageSelected} />;
return ( return (
<div className={styles.navPageSelector}> <div className={styles.nav}>
<PageSelectorBar pages={content.pages} name={content.name} title={content.title} pageSelected={content.pageSelected} mobile />
<div className={`${styles.sideNav} ${styles.desktop}`}>
<Link href={`/blog/diary/${content.name}`}><a><h4>{content.title}</h4></a></Link> <Link href={`/blog/diary/${content.name}`}><a><h4>{content.title}</h4></a></Link>
<ul> <ul>
{content.pages.map((e, idx) => <li key={idx}><Link href={`/blog/diary/${content.name}/${idx + 1}`}><a>{e}</a></Link></li>)} {content.pages.map((e, idx) => <li key={idx}><Link href={`/blog/diary/${content.name}/${idx + 1}`}><a>{e}</a></Link></li>)}
</ul> </ul>
</div> </div>
</div>
); );
}; };