parent
fbc815e776
commit
758cb6a9f0
1 changed files with 36 additions and 22 deletions
|
@ -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>
|
<>
|
||||||
<nav>
|
<div>
|
||||||
<a>Loading...</a>
|
<nav>
|
||||||
</nav>
|
<a>Loading...</a>
|
||||||
</div>
|
</nav>
|
||||||
|
</div>
|
||||||
|
<div className={styles.sidebarPlaceholder}></div>
|
||||||
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
// > is a placeholder
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.sidebar} onClick={() => setActive(!active)}>
|
<>
|
||||||
<nav className={[styles.sidebarList, (active ? styles.sl_active : styles.sl_inactive)].join(" ")}>
|
<div className={styles.sidebar} onClick={() => setActive(!active)}>
|
||||||
{maps.map((item: ReadyOrNotMap) => (
|
<nav className={[styles.sidebarList, (active ? styles.sl_active : styles.sl_inactive)].join(" ")}>
|
||||||
<Link key={item.name} href={item.href}>
|
{maps.map((item) => (
|
||||||
<a className={[styles.navElem, (router.query.map == item.href ? styles.ne_active: styles.ne_inactive)].join(" ")} onClick={stopPropagation}>{item.name}</a>
|
<Link key={item.name} href={item.href}>
|
||||||
</Link>
|
<a className={[styles.navElem, (router.query.map == item.href ? styles.ne_active : styles.ne_inactive)].join(" ")} onClick={stopPropagation}>{item.name}</a>
|
||||||
))}
|
</Link>
|
||||||
</nav>
|
))}
|
||||||
<div className={styles.sidebarArrow}>
|
</nav>
|
||||||
<Image src={active ? "/sidebar_arrow_flipped.webp" : "/sidebar_arrow.webp"} width={32} height={96} alt={active ? ">" : "<" }/>
|
<div className={styles.sidebarArrow}>
|
||||||
|
<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>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Reference in a new issue