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 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,11 +13,13 @@ 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) {
|
||||||
|
@ -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
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 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")
|
||||||
|
|
Reference in a new issue