From d25c07d812af7cb2a1322b97b8376cb1ae5ca2f1 Mon Sep 17 00:00:00 2001
From: Andrew Tavis McAllister <andrew.t.mcallister@gmail.com>
Date: Wed, 1 May 2024 21:17:05 +0200
Subject: [PATCH] #862 hide sidebar elements in their instances rather than
 templates

---
 frontend/components/menu/MenuLinkWrapper.vue                 | 1 -
 frontend/components/menu/mobile/MenuMobileNavBar.vue         | 2 +-
 .../components/menu/mobile/MenuMobileNavigationDropdown.vue  | 2 +-
 frontend/components/modal/image/ModalImageBtn.vue            | 2 +-
 frontend/components/sidebar/left/SidebarLeft.vue             | 3 ++-
 frontend/layouts/sidebar.vue                                 | 5 +++--
 frontend/pages/docs/get-active.vue                           | 1 +
 frontend/pages/docs/get-organized.vue                        | 1 +
 frontend/pages/docs/grow-organization.vue                    | 1 +
 frontend/pages/organizations/[id]/index.vue                  | 1 -
 10 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/frontend/components/menu/MenuLinkWrapper.vue b/frontend/components/menu/MenuLinkWrapper.vue
index 8fdc2ba52..ce870ce64 100644
--- a/frontend/components/menu/MenuLinkWrapper.vue
+++ b/frontend/components/menu/MenuLinkWrapper.vue
@@ -7,7 +7,6 @@
       'p-2': isAddStyles,
     }"
     :to="localePath(`${to}`)"
-    event="click"
   >
     <slot></slot>
   </NuxtLink>
diff --git a/frontend/components/menu/mobile/MenuMobileNavBar.vue b/frontend/components/menu/mobile/MenuMobileNavBar.vue
index b49fbde58..90b1496be 100644
--- a/frontend/components/menu/mobile/MenuMobileNavBar.vue
+++ b/frontend/components/menu/mobile/MenuMobileNavBar.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="fixed bottom-0 z-20 w-full border-t border-light-section-div bg-light-layer-2 dark:border-dark-section-div dark:bg-dark-layer-2 md:hidden"
+    class="fixed bottom-0 z-20 w-full border-t border-light-section-div bg-light-layer-2 dark:border-dark-section-div dark:bg-dark-layer-2"
   >
     <nav>
       <ul class="flex">
diff --git a/frontend/components/menu/mobile/MenuMobileNavigationDropdown.vue b/frontend/components/menu/mobile/MenuMobileNavigationDropdown.vue
index eefb65935..cf20b8e06 100644
--- a/frontend/components/menu/mobile/MenuMobileNavigationDropdown.vue
+++ b/frontend/components/menu/mobile/MenuMobileNavigationDropdown.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="selectedMenuItem"
-    class="fixed z-20 h-10 w-full bg-light-menu-selection dark:bg-dark-menu-selection md:hidden"
+    class="fixed z-20 h-10 w-full bg-light-menu-selection dark:bg-dark-menu-selection"
   >
     <Listbox v-model="selectedMenuItem">
       <ListboxButton
diff --git a/frontend/components/modal/image/ModalImageBtn.vue b/frontend/components/modal/image/ModalImageBtn.vue
index ce60591c1..ca1cb25ca 100644
--- a/frontend/components/modal/image/ModalImageBtn.vue
+++ b/frontend/components/modal/image/ModalImageBtn.vue
@@ -1,6 +1,6 @@
 <template>
   <button
-    class="focus-brand hidden h-min cursor-pointer p-4 md:float-right md:block md:w-1/3 2xl:col-span-1 2xl:w-full"
+    class="focus-brand h-min cursor-pointer p-4 md:float-right md:w-1/3 2xl:col-span-1 2xl:w-full"
     :aria-label="$t('components.modal-image.open-modal-aria-label')"
   >
     <img
diff --git a/frontend/components/sidebar/left/SidebarLeft.vue b/frontend/components/sidebar/left/SidebarLeft.vue
index 0a277406b..17455f1ff 100644
--- a/frontend/components/sidebar/left/SidebarLeft.vue
+++ b/frontend/components/sidebar/left/SidebarLeft.vue
@@ -10,7 +10,7 @@
     ref="sidebarWrapper"
     role="menu"
     tabindex="0"
-    class="elem-shadow-sm focus-brand absolute z-10 hidden h-full flex-col border-r border-light-section-div bg-light-layer-1 transition-all duration-500 dark:border-dark-section-div dark:bg-dark-layer-1 md:flex"
+    class="elem-shadow-sm focus-brand absolute z-10 flex h-full flex-col border-r border-light-section-div bg-light-layer-1 transition-all duration-500 dark:border-dark-section-div dark:bg-dark-layer-1"
     :class="{
       'w-56': !sidebar.collapsed || sidebar.collapsedSwitch == false,
       'w-16': sidebar.collapsed && sidebar.collapsedSwitch == true,
@@ -71,6 +71,7 @@ defineProps<{
 }>();
 
 const sidebar = useSidebar();
+
 const route = useRoute();
 const { currentRoute } = useRouter();
 const routeName = currentRoute.value.name;
diff --git a/frontend/layouts/sidebar.vue b/frontend/layouts/sidebar.vue
index c8e1b896e..67a1264fb 100644
--- a/frontend/layouts/sidebar.vue
+++ b/frontend/layouts/sidebar.vue
@@ -1,11 +1,12 @@
 <template>
   <HeaderMobile />
-  <MenuMobileNavigationDropdown />
+  <MenuMobileNavigationDropdown class="md:hidden" />
   <SidebarLeft
     @mouseover="sidebarHover = true"
     @focus="sidebarHover = true"
     @mouseleave="sidebarHover = false"
     @blur="sidebarHover = false"
+    class="hidden md:block"
   />
   <div class="flex flex-col md:h-screen md:overflow-y-scroll">
     <div
@@ -44,7 +45,7 @@
       }"
     />
   </div>
-  <MenuMobileNavBar />
+  <MenuMobileNavBar class="md:hidden" />
 </template>
 
 <script setup lang="ts">
diff --git a/frontend/pages/docs/get-active.vue b/frontend/pages/docs/get-active.vue
index a59634582..fe6e39f4a 100644
--- a/frontend/pages/docs/get-active.vue
+++ b/frontend/pages/docs/get-active.vue
@@ -28,6 +28,7 @@
         <ModalImageBtn
           @click="openModal()"
           @keydown.enter="openModal()"
+          class="hidden md:block"
           imageURL="/images/content_pages/mockups/get_active"
           imageAltText="pages.docs.get-active.modal-image-alt-text"
         />
diff --git a/frontend/pages/docs/get-organized.vue b/frontend/pages/docs/get-organized.vue
index 32b54ec0d..24813e0ca 100644
--- a/frontend/pages/docs/get-organized.vue
+++ b/frontend/pages/docs/get-organized.vue
@@ -28,6 +28,7 @@
         <ModalImageBtn
           @click="openModal()"
           @keydown.enter="openModal()"
+          class="hidden md:block"
           imageURL="/images/content_pages/mockups/get_organized"
           imageAltText="pages.docs.get-organized.modal-image-alt-text"
         />
diff --git a/frontend/pages/docs/grow-organization.vue b/frontend/pages/docs/grow-organization.vue
index d982a875e..58d2b6729 100644
--- a/frontend/pages/docs/grow-organization.vue
+++ b/frontend/pages/docs/grow-organization.vue
@@ -28,6 +28,7 @@
         <ModalImageBtn
           @click="openModal()"
           @keydown.enter="openModal()"
+          class="hidden md:block"
           imageURL="/images/content_pages/mockups/grow_organization"
           imageAltText="pages.docs.grow-organization.modal-image-alt-text"
         />
diff --git a/frontend/pages/organizations/[id]/index.vue b/frontend/pages/organizations/[id]/index.vue
index dad6d8af3..082cf92f4 100644
--- a/frontend/pages/organizations/[id]/index.vue
+++ b/frontend/pages/organizations/[id]/index.vue
@@ -174,7 +174,6 @@ const handleResize = () => {
 
 onMounted(() => {
   handleResize();
-
   window.addEventListener("resize", handleResize);
 });