60 lines
1.6 KiB
TypeScript
60 lines
1.6 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'
|
||
|
|
|
||
|
|
const fetcher = (url: string) => fetch(url).then((res) => res.json())
|
||
|
|
|
||
|
|
function stopPropagation(e: any) {
|
||
|
|
e.stopPropagation();
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
const Sidebar = () => {
|
||
|
|
const router = useRouter();
|
||
|
|
const [active, setActive] = useState(true);
|
||
|
|
const { maps, isLoading, isError } = useNavbar();
|
||
|
|
|
||
|
|
if (isError) { return (<div><nav><a>Error loading Sidemenu</a></nav></div>) }
|
||
|
|
else if (isLoading) {
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<nav>
|
||
|
|
<a>Loading...</a>
|
||
|
|
</nav>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
// > is a placeholder
|
||
|
|
return (
|
||
|
|
<div className={styles.sidebar} onClick={() => setActive(!active)}>
|
||
|
|
<nav className={[styles.sidebarList, (active ? styles.sl_active : styles.sl_inactive)].join(" ")}>
|
||
|
|
{maps.map((item: ReadyOrNotMap) => (
|
||
|
|
<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="/sidebar_arrow.webp" width={32} height={96} alt=">"/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function useNavbar() {
|
||
|
|
const { data, error } = useSWR(`/api/navbar`, fetcher)
|
||
|
|
|
||
|
|
return {
|
||
|
|
maps: data,
|
||
|
|
isLoading: !error && !data,
|
||
|
|
isError: error
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Sidebar;
|