77 lines
2.2 KiB
TypeScript
77 lines
2.2 KiB
TypeScript
import styles from '/styles/ReadyOrNot.module.css'
|
|
import Link from 'next/link'
|
|
import { useRouter } from 'next/router'
|
|
import useSWR from 'swr';
|
|
import ReadyOrNotMap from '../interfaces/ReadyOrNot';
|
|
import React, { useState } from 'react';
|
|
import Image from 'next/image';
|
|
import useWindowSize from '../components/windowsize';
|
|
|
|
const fetcher = (url: string) => fetch(url).then((res) => res.json())
|
|
|
|
function stopPropagation(e: any) {
|
|
e.stopPropagation();
|
|
}
|
|
|
|
const Sidebar = () => {
|
|
const isMobile = useWindowSize();
|
|
const router = useRouter();
|
|
const [active, setActive] = useState(isMobile);
|
|
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>
|
|
<div className={styles.sidebarPlaceholder}></div>
|
|
</>
|
|
)
|
|
}
|
|
else if (isLoading) {
|
|
return (
|
|
<>
|
|
<div>
|
|
<nav>
|
|
<a>Loading...</a>
|
|
</nav>
|
|
</div>
|
|
<div className={styles.sidebarPlaceholder}></div>
|
|
</>
|
|
)
|
|
}
|
|
else {
|
|
return (
|
|
<>
|
|
<div className={styles.sidebar} onClick={() => setActive(!active)}>
|
|
<nav className={[styles.sidebarList, (active ? styles.sl_active : styles.sl_inactive)].join(" ")}>
|
|
{maps.map((item) => (
|
|
<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>
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
<div className={styles.sidebarArrow}>
|
|
<Image src={active ? "/sidebar_arrow_flipped.webp" : "/sidebar_arrow.webp"} width={32} height={96} alt={active ? ">" : "<"} />
|
|
</div>
|
|
</div>
|
|
<div className={styles.sidebarPlaceholder}></div>
|
|
</>
|
|
);
|
|
}
|
|
}
|
|
|
|
function useNavbar() {
|
|
const { data, error } = useSWR(`/api/navbar`, fetcher)
|
|
|
|
return {
|
|
maps: data,
|
|
isLoading: !error && !data,
|
|
isError: error
|
|
}
|
|
}
|
|
|
|
export default Sidebar; |