activist-org#862 hide sidebar elements in their instances rather than…

… templates

frontend/components/menu/MenuLinkWrapper.vue

@@ -7,7 +7,6 @@
       'p-2': isAddStyles,
     }"
     :to="localePath(`${to}`)"
-    event="click"
   >
     <slot></slot>
   </NuxtLink>

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">

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

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

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;

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">

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"
         />

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"
         />

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"
         />

frontend/pages/organizations/[id]/index.vue

@@ -174,7 +174,6 @@ const handleResize = () => {
 
 onMounted(() => {
   handleResize();
-
   window.addEventListener("resize", handleResize);
 });