From 758cb6a9f036f0dc2af436b57012dc08e87d4479 Mon Sep 17 00:00:00 2001
From: Neshura <neshura@proton.me>
Date: Fri, 9 Dec 2022 18:29:47 +0100
Subject: [PATCH] Various changes

Removed debug logging, implemented Issue #7
---
 components/sidebar.tsx | 58 ++++++++++++++++++++++++++----------------
 1 file changed, 36 insertions(+), 22 deletions(-)

diff --git a/components/sidebar.tsx b/components/sidebar.tsx
index ccf3a7f..35386ec 100644
--- a/components/sidebar.tsx
+++ b/components/sidebar.tsx
@@ -15,37 +15,51 @@ function stopPropagation(e: any) {
 
 const Sidebar = () => {
   const isMobile = useWindowSize();
-  console.log(isMobile); // DEBUG
   const router = useRouter();
-  const [active, setActive] = useState(!isMobile);
-  const { maps, isLoading, isError } = useNavbar();
-  
+  const [active, setActive] = useState(isMobile);
+  const { maps, isLoading, isError }:{ maps: ReadyOrNotMap[], isLoading: boolean, isError: boolean} = useNavbar();
 
-  if (isError) { return (<div><nav><a>Error loading Sidemenu</a></nav></div>) }
+  if(typeof(isMobile) === "boolean" && typeof(active) === "undefined") {
+    setActive(!isMobile);
+  }
+
+  if (isError) {
+    return (
+      <>
+        <div><nav><a>Error loading Sidemenu</a></nav></div>
+        <div className={styles.sidebarPlaceholder}></div>
+      </>
+    )
+  }
   else if (isLoading) {
     return (
-      <div>
-        <nav>
-          <a>Loading...</a>
-        </nav>
-      </div>
+      <>
+        <div>
+          <nav>
+            <a>Loading...</a>
+          </nav>
+        </div>
+        <div className={styles.sidebarPlaceholder}></div>
+      </>
     )
   }
   else {
-    // > is a placeholder
     return (
-      <div className={styles.sidebar} onClick={() => setActive(!active)}>
-        <nav className={[styles.sidebarList, (active ? styles.sl_active : styles.sl_inactive)].join(" ")}>
-          {maps.map((item: ReadyOrNotMap) => (
-            <Link key={item.name} href={item.href}>
-              <a className={[styles.navElem, (router.query.map == item.href ? styles.ne_active: styles.ne_inactive)].join(" ")} onClick={stopPropagation}>{item.name}</a>
-            </Link>
-          ))}
-        </nav>
-        <div className={styles.sidebarArrow}>
-          <Image src={active ? "/sidebar_arrow_flipped.webp" : "/sidebar_arrow.webp"} width={32} height={96} alt={active ? ">" : "<" }/>
+      <>
+        <div className={styles.sidebar} onClick={() => setActive(!active)}>
+          <nav className={[styles.sidebarList, (active ? styles.sl_active : styles.sl_inactive)].join(" ")}>
+            {maps.map((item) => (
+              <Link key={item.name} href={item.href}>
+                <a className={[styles.navElem, (router.query.map == item.href ? styles.ne_active : styles.ne_inactive)].join(" ")} onClick={stopPropagation}>{item.name}</a>
+              </Link>
+            ))}
+          </nav>
+          <div className={styles.sidebarArrow}>
+            <Image src={active ? "/sidebar_arrow_flipped.webp" : "/sidebar_arrow.webp"} width={32} height={96} alt={active ? ">" : "<"} />
+          </div>
         </div>
-      </div>
+        <div className={styles.sidebarPlaceholder}></div>
+      </>
     );
   }
 }