Extract windowsize function from map script

This commit is contained in:
Neshura 2022-12-04 16:42:49 +01:00
parent 6fa3d727b0
commit 8177802bb3
No known key found for this signature in database
GPG key ID: ACDF5B6EBECF6B0A
3 changed files with 33 additions and 28 deletions

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,12 +13,14 @@ function stopPropagation(e: any) {
e.stopPropagation(); e.stopPropagation();
} }
const Sidebar = () => { const Sidebar = () => {
const isMobile = useWindowSize();
console.log(isMobile); // DEBUG
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 } = useNavbar();
if (isError) { return (<div><nav><a>Error loading Sidemenu</a></nav></div>) } if (isError) { return (<div><nav><a>Error loading Sidemenu</a></nav></div>) }
else if (isLoading) { else if (isLoading) {
return ( return (
@ -40,7 +43,7 @@ const Sidebar = () => {
))} ))}
</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>
); );

24
components/windowsize.tsx Normal file
View file

@ -0,0 +1,24 @@
import { useEffect, useState } from "react";
export default 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;
}

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")