From df67fe6aa0cde459fa6fcc2a1a11aa83060bd0b5 Mon Sep 17 00:00:00 2001
From: Tobias Frauenfelder <tobias.frauenfelder@gmail.com>
Date: Fri, 23 Feb 2024 10:21:30 +0100
Subject: [PATCH] Make Sidebare more mobile friendly

---
 frontend/src/components/admin/Sidebar.vue | 253 ++++++++++++----------
 1 file changed, 134 insertions(+), 119 deletions(-)

diff --git a/frontend/src/components/admin/Sidebar.vue b/frontend/src/components/admin/Sidebar.vue
index b851a63..16c5241 100644
--- a/frontend/src/components/admin/Sidebar.vue
+++ b/frontend/src/components/admin/Sidebar.vue
@@ -1,128 +1,116 @@
 <template>
-  <div
-    @click="dMSb = !dMSb"
-    :class="`flex items-center h-full ${
-      dMSb ? 'hidden' : 'md:hidden'
-    } bg-gray-900 text-white w-3`"
-  >
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      class="h-2 w-2"
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke="currentColor"
-    >
-      <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
-        d="M9 5l7 7-7 7"
-      />
-    </svg>
-  </div>
-  <div
-    :class="`bg-gray-900 w-64 md:flex flex-col md:rounded-r-lg h-full ${
-      dMSb ? 'flex' : 'hidden'
-    }`"
-  >
-    <router-link to="/dashboard">
-      <div
-        v-if="settings.divisionLogo?.path"
-        class="w-full flex flex-col justify-center"
-      >
-        <img
-          class="h-32 p-3"
-          :src="`${backendURL}/${settings.divisionLogo?.path}`"
-        />
-      </div>
-      <div
-        v-else
-        class="text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-b from-indigo-500 via-purple-500 to-pink-500 text-center mx-auto p-5 cursor-pointer"
-      >
-        {{ settings.divisionName || "Abteilungshomepage" }}
+  <div class="absolute bottom-0 top-0 md:static z-30">
+    <div class="-right-16 absolute size-16 bottom-0 md:hidden">
+      <button @click="hideMobileMenu=!hideMobileMenu" class="size-12 bg-gray-900 rounded-r-lg">
+        <font-awesome-icon :icon="icons.faBars" class="text-white" />
+      </button>
+    </div>
+    <Transition @beforeEnter="beforeEnter" @enter="enter" @leave="leave">
+    <div v-if="!(hideMobileMenu&&!isDesktop)" class="bg-gray-900 md:w-64 md:flex flex-col md:rounded-r-lg h-full">
+      <router-link to="/dashboard">
+        <div
+          v-if="settings.divisionLogo?.path"
+          class="w-full flex flex-col justify-center"
+        >
+          <img
+            class="h-32 p-3"
+            :src="`${backendURL}/${settings.divisionLogo?.path}`"
+          />
+        </div>
+        <div
+          v-else
+          class="text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-b from-indigo-500 via-purple-500 to-pink-500 text-center mx-auto p-5 cursor-pointer"
+        >
+          {{ settings.divisionName || "Abteilungshomepage" }}
+        </div>
+      </router-link>
+      <div class="flex flex-col md:justify-between h-full">
+        <div>
+          <SidebarItem
+            v-if="isAdmin"
+            to="/dashboard/menu"
+            :icon="icons.faEllipsis"
+          >
+            {{ $t("dashboard.menuAndLinks") }}
+          </SidebarItem>
+          <SidebarItem
+            v-if="isAdmin"
+            to="/dashboard/pages"
+            :icon="icons.faBookOpen"
+          >
+            {{ $t("dashboard.pages") }}
+          </SidebarItem>
+          <SidebarItem to="/dashboard/groups" :icon="icons.faUsers">
+            {{ $t("dashboard.groups") }}
+          </SidebarItem>
+          <SidebarItem
+            v-if="isAdmin"
+            to="/dashboard/contacts"
+            :icon="icons.faAddressCard"
+          >
+            {{ $t("dashboard.contacts") }}
+          </SidebarItem>
+          <SidebarItem
+            v-if="isAdmin"
+            to="/dashboard/sections"
+            :icon="icons.faStairs"
+          >
+            {{ $t("dashboard.sections") }}
+          </SidebarItem>
+          <SidebarItem to="/dashboard/events" :icon="icons.faCalendarDays">
+            {{ $t("dashboard.events") }}
+          </SidebarItem>
+          <SidebarItem
+            v-if="isAdmin"
+            to="/dashboard/camps"
+            :icon="icons.faCampground"
+          >
+            {{ $t("dashboard.camps") }}
+          </SidebarItem>
+          <SidebarItem to="/dashboard/locations" :icon="icons.faLocationDot">
+            {{ $t("dashboard.locations") }}
+          </SidebarItem>
+          <SidebarItem to="/dashboard/faqs" :icon="icons.faCircleQuestion">
+            {{ $t("dashboard.faqs") }}
+          </SidebarItem>
+          <SidebarItem
+            v-if="isAdmin"
+            to="/dashboard/forms"
+            :icon="icons.faRectangleList"
+          >
+            {{ $t("dashboard.forms") }}
+          </SidebarItem>
+          <SidebarItem to="/dashboard/media" :icon="icons.faPhotoVideo">
+            {{ $t("dashboard.media") }}
+          </SidebarItem>
+          <SidebarItem
+            v-if="isAdmin"
+            to="/dashboard/users"
+            :icon="icons.faUser"
+          >
+            {{ $t("dashboard.users") }}
+          </SidebarItem>
+          <SidebarItem
+            v-if="isAdmin"
+            to="/dashboard/settings"
+            :icon="icons.faGear"
+          >
+            {{ $t("dashboard.settings") }}
+          </SidebarItem>
+        </div>
+        <div class="h-fit">
+          <SidebarItem @click="logout" class="" to="" :icon="icons.faDoorOpen">
+            {{ $t("dashboard.logout") }}
+          </SidebarItem>
+        </div>
       </div>
-    </router-link>
-    <SidebarItem v-if="isAdmin" to="/dashboard/menu" :icon="icons.faEllipsis">
-      {{ $t("dashboard.menuAndLinks") }}
-    </SidebarItem>
-    <SidebarItem v-if="isAdmin" to="/dashboard/pages" :icon="icons.faBookOpen">
-      {{ $t("dashboard.pages") }}
-    </SidebarItem>
-    <SidebarItem to="/dashboard/groups" :icon="icons.faUsers">
-      {{ $t("dashboard.groups") }}
-    </SidebarItem>
-    <SidebarItem
-      v-if="isAdmin"
-      to="/dashboard/contacts"
-      :icon="icons.faAddressCard"
-    >
-      {{ $t("dashboard.contacts") }}
-    </SidebarItem>
-    <SidebarItem v-if="isAdmin" to="/dashboard/sections" :icon="icons.faStairs">
-      {{ $t("dashboard.sections") }}
-    </SidebarItem>
-    <SidebarItem to="/dashboard/events" :icon="icons.faCalendarDays">
-      {{ $t("dashboard.events") }}
-    </SidebarItem>
-    <SidebarItem
-      v-if="isAdmin"
-      to="/dashboard/camps"
-      :icon="icons.faCampground"
-    >
-      {{ $t("dashboard.camps") }}
-    </SidebarItem>
-    <SidebarItem to="/dashboard/locations" :icon="icons.faLocationDot">
-      {{ $t("dashboard.locations") }}
-    </SidebarItem>
-    <SidebarItem to="/dashboard/faqs" :icon="icons.faCircleQuestion">
-      {{ $t("dashboard.faqs") }}
-    </SidebarItem>
-    <SidebarItem
-      v-if="isAdmin"
-      to="/dashboard/forms"
-      :icon="icons.faRectangleList"
-    >
-      {{ $t("dashboard.forms") }}
-    </SidebarItem>
-    <SidebarItem to="/dashboard/media" :icon="icons.faPhotoVideo">
-      {{ $t("dashboard.media") }}
-    </SidebarItem>
-    <SidebarItem v-if="isAdmin" to="/dashboard/users" :icon="icons.faUser">
-      {{ $t("dashboard.users") }}
-    </SidebarItem>
-    <SidebarItem v-if="isAdmin" to="/dashboard/settings" :icon="icons.faGear">
-      {{ $t("dashboard.settings") }}
-    </SidebarItem>
-    <div class="h-full flex flex-col justify-end pb-5">
-      <SidebarItem @click="logout" class="" to="" :icon="icons.faDoorOpen">
-        {{ $t("dashboard.logout") }}
-      </SidebarItem>
     </div>
-  </div>
-  <div
-    @click="dMSb = !dMSb"
-    :class="`flex items-center ${
-      !dMSb ? 'hidden' : 'md:hidden'
-    } bg-gray-900 text-white w-3`"
-  >
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      class="h-2 w-2"
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke="currentColor"
-    >
-      <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
-        d="M15 19l-7-7 7-7"
-      />
-    </svg>
+  </Transition>
   </div>
 </template>
 
 <script>
+import { gsap } from "gsap";
 import {
   faStairs,
   faBookOpen,
@@ -138,13 +126,15 @@ import {
   faCampground,
   faDoorOpen,
   faCircleQuestion,
+  faBars,
 } from "@fortawesome/free-solid-svg-icons";
 import SidebarItem from "./SidebarItem.vue";
 export default {
   components: { SidebarItem },
   data() {
     return {
-      dMSb: false,
+      hideMobileMenu: true,
+      isDesktop: window.innerWidth > 768,
       icons: {
         faStairs,
         faBookOpen,
@@ -160,6 +150,7 @@ export default {
         faCampground,
         faDoorOpen,
         faCircleQuestion,
+        faBars,
       },
     };
   },
@@ -168,6 +159,30 @@ export default {
       localStorage.removeItem("token");
       this.$router.push("/");
     },
+    beforeEnter(el) {
+      el.style.width = "0";
+      el.style.overflow = "hidden";
+    },
+    enter(el, done) {
+      gsap.to(el, {
+        width: "auto",
+        overflow: "visible",
+        duration: 0.3,
+        onComplete: done,
+      });
+    },
+    leave(el, done) {
+      gsap.to(el, { width: "0", duration: 0.3, onComplete: done });
+    },
+    handleResize() {
+      this.isDesktop = window.innerWidth > 768;
+    },
+  },
+  mounted() {
+    window.addEventListener("resize", this.handleResize);
+  },
+  beforeUnmount() {
+    window.removeEventListener("resize", this.handleResize);
   },
 };
 </script>