Merge branch 'rework/sidebar' into 'main'
Small changes to the sidebar and repo Closes #7 See merge request neshura-websites/readyornot!4
11
.gitignore
vendored
|
@ -1,8 +1,9 @@
|
|||
# do not track installed modules
|
||||
/node_modules
|
||||
node_modules/
|
||||
|
||||
# do not track built files
|
||||
/.next
|
||||
.vscode/
|
||||
.next/
|
||||
*.tsbuildinfo
|
||||
next-env.d.ts
|
||||
|
||||
|
@ -13,6 +14,6 @@ yarn-error.log*
|
|||
.pnpm-debug.log*
|
||||
|
||||
# production
|
||||
/build
|
||||
/data
|
||||
/confs
|
||||
build/
|
||||
data/
|
||||
confs/
|
||||
|
|
|
@ -26,7 +26,6 @@ const LayoutReadyOrNot = ({ children }: { children: React.ReactNode }) => {
|
|||
</Script>
|
||||
|
||||
<Sidebar />
|
||||
<div className={styles.sidebarPlaceholder}></div>
|
||||
<main className={styles.main}>
|
||||
{children}
|
||||
</main>
|
||||
|
|
|
@ -4,7 +4,8 @@ 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 Image from 'next/image';
|
||||
import useWindowSize from '../components/windowsize';
|
||||
|
||||
const fetcher = (url: string) => fetch(url).then((res) => res.json())
|
||||
|
||||
|
@ -12,37 +13,53 @@ function stopPropagation(e: any) {
|
|||
e.stopPropagation();
|
||||
}
|
||||
|
||||
|
||||
const Sidebar = () => {
|
||||
const isMobile = useWindowSize();
|
||||
const router = useRouter();
|
||||
const [active, setActive] = useState(true);
|
||||
const { maps, isLoading, isError } = useNavbar();
|
||||
const [active, setActive] = useState(isMobile);
|
||||
const { maps, isLoading, isError }:{ maps: ReadyOrNotMap[], isLoading: boolean, isError: boolean} = useNavbar();
|
||||
|
||||
if (isError) { return (<div><nav><a>Error loading Sidemenu</a></nav></div>) }
|
||||
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>
|
||||
<nav>
|
||||
<a>Loading...</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div className={styles.sidebarPlaceholder}></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 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>
|
||||
<div className={styles.sidebarPlaceholder}></div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
34
components/windowsize.tsx
Normal file
|
@ -0,0 +1,34 @@
|
|||
import { useEffect, useState } from "react";
|
||||
|
||||
interface ScreenSize {
|
||||
width: number | undefined;
|
||||
height: number | undefined;
|
||||
}
|
||||
|
||||
export default function useWindowSize(): boolean | undefined {
|
||||
const [windowSize, setWindowSize] = useState<ScreenSize>({
|
||||
width: undefined,
|
||||
height: undefined,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
function handleResize() {
|
||||
setWindowSize({
|
||||
width: window.innerWidth,
|
||||
height: window.innerHeight,
|
||||
});
|
||||
}
|
||||
|
||||
window.addEventListener("resize", handleResize);
|
||||
|
||||
handleResize();
|
||||
|
||||
return () => window.removeEventListener("resize", handleResize);
|
||||
}, []);
|
||||
if(typeof(windowSize.width) === "number") {
|
||||
return windowSize.width <= 1080;
|
||||
}
|
||||
else {
|
||||
return undefined;
|
||||
}
|
||||
}
|
|
@ -6,34 +6,12 @@ import { NextPageWithLayout } from './_app';
|
|||
import React from 'react';
|
||||
import useSWR, { KeyedMutator, mutate } from 'swr';
|
||||
import { useRouter } from 'next/router';
|
||||
import Image from 'next/image'
|
||||
import Image from 'next/image';
|
||||
import ReadyOrNotMap from '../interfaces/ReadyOrNot';
|
||||
import useWindowSize from '../components/windowsize';
|
||||
|
||||
const fetcher = (url: string) => fetch(url).then((res) => res.json())
|
||||
|
||||
function useWindowSize() {
|
||||
const [windowSize, setWindowSize] = useState({
|
||||
width: 0,
|
||||
height: 0,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
function handleResize() {
|
||||
setWindowSize({
|
||||
width: window.innerWidth,
|
||||
height: window.innerHeight,
|
||||
});
|
||||
}
|
||||
|
||||
window.addEventListener("resize", handleResize);
|
||||
|
||||
handleResize();
|
||||
|
||||
return () => window.removeEventListener("resize", handleResize);
|
||||
}, []);
|
||||
return windowSize.width <= 1080;
|
||||
}
|
||||
|
||||
const ReadyOrNotMaps: NextPageWithLayout = () => {
|
||||
const [floor, setFloor] = useState(0);
|
||||
const { mapInfo, isLoadingInfo, isErrorInfo } = useMap(useRouter().query.map?.toString() || "a_lethal_obsession")
|
||||
|
|
Before Width: | Height: | Size: 532 B After Width: | Height: | Size: 704 B |
BIN
public/sidebar_arrow_flipped.webp
Normal file
After Width: | Height: | Size: 696 B |
|
@ -28,8 +28,8 @@
|
|||
inkscape:document-units="px"
|
||||
showgrid="true"
|
||||
inkscape:zoom="11.313709"
|
||||
inkscape:cx="-3.1819805"
|
||||
inkscape:cy="35.974057"
|
||||
inkscape:cx="-3.1819804"
|
||||
inkscape:cy="36.062444"
|
||||
inkscape:window-width="2560"
|
||||
inkscape:window-height="1391"
|
||||
inkscape:window-x="0"
|
||||
|
@ -52,7 +52,7 @@
|
|||
id="layer1">
|
||||
<path
|
||||
id="path1211"
|
||||
style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
style="fill:#999999;fill-opacity:1;stroke:#999999;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
d="M 8,3.9708715 V 19.970872 c 3.449498,11.952732 9.599609,28.000391 9.599609,28.000391 L 8,75.970872 v 16 L 24,47.971263 C 18.666759,33.304433 13.333375,18.637654 8,3.9708715 Z"
|
||||
sodipodi:nodetypes="ccccccc" />
|
||||
</g>
|
||||
|
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
Before Width: | Height: | Size: 532 B After Width: | Height: | Size: 704 B |
BIN
resources/sidebar_arrow_flipped.webp
Normal file
After Width: | Height: | Size: 696 B |