Merge branch 'rework/sidebar' into 'main'

Small changes to the sidebar and repo

Closes #7

See merge request neshura-websites/readyornot!4
This commit is contained in:
Neshura 2022-12-09 17:32:41 +00:00
commit 989b9e5ae9
10 changed files with 84 additions and 55 deletions

11
.gitignore vendored
View file

@ -1,8 +1,9 @@
# do not track installed modules # do not track installed modules
/node_modules node_modules/
# do not track built files # do not track built files
/.next .vscode/
.next/
*.tsbuildinfo *.tsbuildinfo
next-env.d.ts next-env.d.ts
@ -13,6 +14,6 @@ yarn-error.log*
.pnpm-debug.log* .pnpm-debug.log*
# production # production
/build build/
/data data/
/confs confs/

View file

@ -26,7 +26,6 @@ const LayoutReadyOrNot = ({ children }: { children: React.ReactNode }) => {
</Script> </Script>
<Sidebar /> <Sidebar />
<div className={styles.sidebarPlaceholder}></div>
<main className={styles.main}> <main className={styles.main}>
{children} {children}
</main> </main>

View file

@ -4,7 +4,8 @@ import { useRouter } from 'next/router'
import useSWR from 'swr'; import useSWR from 'swr';
import ReadyOrNotMap from '../interfaces/ReadyOrNot'; import ReadyOrNotMap from '../interfaces/ReadyOrNot';
import React, { useState } from 'react'; 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()) const fetcher = (url: string) => fetch(url).then((res) => res.json())
@ -12,37 +13,53 @@ function stopPropagation(e: any) {
e.stopPropagation(); e.stopPropagation();
} }
const Sidebar = () => { const Sidebar = () => {
const isMobile = useWindowSize();
const router = useRouter(); const router = useRouter();
const [active, setActive] = useState(true); const [active, setActive] = useState(isMobile);
const { maps, isLoading, isError } = useNavbar(); 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) { else if (isLoading) {
return ( return (
<>
<div> <div>
<nav> <nav>
<a>Loading...</a> <a>Loading...</a>
</nav> </nav>
</div> </div>
<div className={styles.sidebarPlaceholder}></div>
</>
) )
} }
else { else {
// > is a placeholder
return ( return (
<>
<div className={styles.sidebar} onClick={() => setActive(!active)}> <div className={styles.sidebar} onClick={() => setActive(!active)}>
<nav className={[styles.sidebarList, (active ? styles.sl_active : styles.sl_inactive)].join(" ")}> <nav className={[styles.sidebarList, (active ? styles.sl_active : styles.sl_inactive)].join(" ")}>
{maps.map((item: ReadyOrNotMap) => ( {maps.map((item) => (
<Link key={item.name} href={item.href}> <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> <a className={[styles.navElem, (router.query.map == item.href ? styles.ne_active : styles.ne_inactive)].join(" ")} onClick={stopPropagation}>{item.name}</a>
</Link> </Link>
))} ))}
</nav> </nav>
<div className={styles.sidebarArrow}> <div className={styles.sidebarArrow}>
<Image src="/sidebar_arrow.webp" width={32} height={96} alt=">"/> <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>
</>
); );
} }
} }

34
components/windowsize.tsx Normal file
View 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;
}
}

View file

@ -6,34 +6,12 @@ import { NextPageWithLayout } from './_app';
import React from 'react'; import React from 'react';
import useSWR, { KeyedMutator, mutate } from 'swr'; import useSWR, { KeyedMutator, mutate } from 'swr';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import Image from 'next/image' import Image from 'next/image';
import ReadyOrNotMap from '../interfaces/ReadyOrNot'; import ReadyOrNotMap from '../interfaces/ReadyOrNot';
import useWindowSize from '../components/windowsize';
const fetcher = (url: string) => fetch(url).then((res) => res.json()) 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 ReadyOrNotMaps: NextPageWithLayout = () => {
const [floor, setFloor] = useState(0); const [floor, setFloor] = useState(0);
const { mapInfo, isLoadingInfo, isErrorInfo } = useMap(useRouter().query.map?.toString() || "a_lethal_obsession") const { mapInfo, isLoadingInfo, isErrorInfo } = useMap(useRouter().query.map?.toString() || "a_lethal_obsession")

Binary file not shown.

Before

Width:  |  Height:  |  Size: 532 B

After

Width:  |  Height:  |  Size: 704 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 696 B

View file

@ -28,8 +28,8 @@
inkscape:document-units="px" inkscape:document-units="px"
showgrid="true" showgrid="true"
inkscape:zoom="11.313709" inkscape:zoom="11.313709"
inkscape:cx="-3.1819805" inkscape:cx="-3.1819804"
inkscape:cy="35.974057" inkscape:cy="36.062444"
inkscape:window-width="2560" inkscape:window-width="2560"
inkscape:window-height="1391" inkscape:window-height="1391"
inkscape:window-x="0" inkscape:window-x="0"
@ -52,7 +52,7 @@
id="layer1"> id="layer1">
<path <path
id="path1211" 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" 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" /> sodipodi:nodetypes="ccccccc" />
</g> </g>

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 532 B

After

Width:  |  Height:  |  Size: 704 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 696 B