Extract windowsize function from map script
This commit is contained in:
parent
6fa3d727b0
commit
8177802bb3
3 changed files with 33 additions and 28 deletions
|
@ -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,12 +13,14 @@ function stopPropagation(e: any) {
|
|||
e.stopPropagation();
|
||||
}
|
||||
|
||||
|
||||
const Sidebar = () => {
|
||||
const isMobile = useWindowSize();
|
||||
console.log(isMobile); // DEBUG
|
||||
const router = useRouter();
|
||||
const [active, setActive] = useState(true);
|
||||
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 (
|
||||
|
@ -40,7 +43,7 @@ const Sidebar = () => {
|
|||
))}
|
||||
</nav>
|
||||
<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>
|
||||
);
|
||||
|
|
24
components/windowsize.tsx
Normal file
24
components/windowsize.tsx
Normal 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;
|
||||
}
|
|
@ -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")
|
||||
|
|
Reference in a new issue