Neshweb-Sites/readyornot
Neshweb-Sites/readyornot
Archived
1
0
Fork 0
Code Issues 6 Pull requests Releases 1 Packages Activity Actions

Various changes

Browse source 
Removed debug logging, implemented Issue #7
This commit is contained in:
Neshura 2022-12-09 18:29:47 +01:00
parent fbc815e776
commit 758cb6a9f0
No known key found for this signature in database
GPG key ID: ACDF5B6EBECF6B0A
1 changed files with 36 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
components/sidebar.tsx
View file

@ -15,37 +15,51 @@ function stopPropagation(e: any) {
const Sidebar = () => { const Sidebar = () => {
const isMobile = useWindowSize(); const isMobile = useWindowSize();
console.log(isMobile); // DEBUG
const router = useRouter(); const router = useRouter();
const [active, setActive] = useState(!isMobile); const [active, setActive] = useState(isMobile);
const { maps, isLoading, isError } = useNavbar(); const { maps, isLoading, isError }:{ maps: ReadyOrNotMap[], isLoading: boolean, isError: boolean} = useNavbar();
if(typeof(isMobile) === "boolean" && typeof(active) === "undefined") {
setActive(!isMobile);
}
if (isError) { return (<div><nav><a>Error loading Sidemenu</a></nav></div>) } if (isError) {
return (
<>
<div><nav><a>Error loading Sidemenu</a></nav></div>
<div className={styles.sidebarPlaceholder}></div>
</>
)
}
else if (isLoading) { else if (isLoading) {
return ( return (
<>
<div> <div>
<nav> <nav>
<a>Loading...</a> <a>Loading...</a>
</nav> </nav>
</div> </div>
<div className={styles.sidebarPlaceholder}></div>
</>
) )
} }
else { else {
// > is a placeholder
return ( return (
<>
<div className={styles.sidebar} onClick={() => setActive(!active)}> <div className={styles.sidebar} onClick={() => setActive(!active)}>
<nav className={[styles.sidebarList, (active ? styles.sl_active : styles.sl_inactive)].join(" ")}> <nav className={[styles.sidebarList, (active ? styles.sl_active : styles.sl_inactive)].join(" ")}>
{maps.map((item: ReadyOrNotMap) => ( {maps.map((item) => (
<Link key={item.name} href={item.href}> <Link key={item.name} href={item.href}>
<a className={[styles.navElem, (router.query.map == item.href ? styles.ne_active: styles.ne_inactive)].join(" ")} onClick={stopPropagation}>{item.name}</a> <a className={[styles.navElem, (router.query.map == item.href ? styles.ne_active : styles.ne_inactive)].join(" ")} onClick={stopPropagation}>{item.name}</a>
</Link> </Link>
))} ))}
</nav> </nav>
<div className={styles.sidebarArrow}> <div className={styles.sidebarArrow}>
<Image src={active ? "/sidebar_arrow_flipped.webp" : "/sidebar_arrow.webp"} width={32} height={96} alt={active ? ">" : "<" }/> <Image src={active ? "/sidebar_arrow_flipped.webp" : "/sidebar_arrow.webp"} width={32} height={96} alt={active ? ">" : "<"} />
</div> </div>
</div> </div>
<div className={styles.sidebarPlaceholder}></div>
</>
); );
} }
} }