diff --git a/components/sidebar.tsx b/components/sidebar.tsx
index 113c438..ccf3a7f 100644
--- a/components/sidebar.tsx
+++ b/components/sidebar.tsx
@@ -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,11 +13,13 @@ 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 (
) }
else if (isLoading) {
@@ -40,7 +43,7 @@ const Sidebar = () => {
))}
-
+ " : "<" }/>
);
diff --git a/components/windowsize.tsx b/components/windowsize.tsx
new file mode 100644
index 0000000..27cb575
--- /dev/null
+++ b/components/windowsize.tsx
@@ -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;
+}
\ No newline at end of file
diff --git a/pages/[map].tsx b/pages/[map].tsx
index 5676b61..922df1d 100644
--- a/pages/[map].tsx
+++ b/pages/[map].tsx
@@ -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")