This repository has been archived on 2024-08-06. You can view files and clone it, but cannot push or open issues or pull requests.
readyornot/components/sidebar.tsx

63 lines
1.8 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();
console.log(isMobile); // DEBUG
const router = useRouter();
const [active, setActive] = useState(!isMobile);
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={active ? "/sidebar_arrow_flipped.webp" : "/sidebar_arrow.webp"} width={32} height={96} alt={active ? ">" : "<" }/>
</div>
</div>
);
}
}
function useNavbar() {
const { data, error } = useSWR(`/api/navbar`, fetcher)
return {
maps: data,
isLoading: !error && !data,
isError: error
}
}
export default Sidebar;