From 8177802bb3581ad67e9102ba5026d0e05e4c313c Mon Sep 17 00:00:00 2001
From: Neshura <neshura@proton.me>
Date: Sun, 4 Dec 2022 16:42:49 +0100
Subject: [PATCH] Extract windowsize function from map script

---
 components/sidebar.tsx    | 11 +++++++----
 components/windowsize.tsx | 24 ++++++++++++++++++++++++
 pages/[map].tsx           | 26 ++------------------------
 3 files changed, 33 insertions(+), 28 deletions(-)
 create mode 100644 components/windowsize.tsx

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 (<div><nav><a>Error loading Sidemenu</a></nav></div>) }
   else if (isLoading) {
@@ -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>
     );
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")