Combines Header and SideBar into the SideBar

src/App.vue

@@ -1,23 +1,16 @@
 <template>
   <v-app>
+    <div class="flex flex-row">
 
-    <Header class=" w-full z-50 p-2 h-16"></Header>
+      <div class="fixed h-full w-60 border-r-2 z-30 ">
+        <side-bar></side-bar>
+      </div>
 
-    <div class="flex flex-row ">
-
-      <transition name="slide-fade">
-        <div v-show="sideBarStore.visible"
-             class="fixed h-full min-w-60 border-r-2 z-30 ">
-          <side-bar></side-bar>
-        </div>
-      </transition>
-
-      <div class="flex flex-col w-full min-h-screen ">
+      <div class="flex flex-col pl-60 w-full min-h-screen ">
         <RouterView></RouterView>
       </div>
 
     </div>
-
   </v-app>
 
   <size-indicator></size-indicator>
@@ -25,69 +18,9 @@
 </template>
 
 <script async setup>
-import Header from "@/views/main/Header.vue";
-import Footer from "@/views/main/Footer.vue";
 import SideBar from "@/views/main/SideBar.vue";
-import {ref, onMounted, onUnmounted} from 'vue';
-import {useSideBarStore} from "@/stores/sideBarStore.js";
 import SizeIndicator from "@/views/tools/SizeIndicator.vue";
-
-const showPopup = ref(false);
-const popup = ref(null);
-const popupButton = ref(null);
-let closeSidebarTimer = null;
-
-const sideBarStore = useSideBarStore()
-
-const openSidebar = () => {
-  clearCloseSidebarTimer();
-  sideBarStore.show()
-};
-
-const startCloseSidebarTimer = () => {
-  closeSidebarTimer = setTimeout(() => {
-    sideBarStore.hide()
-  }, 500);
-};
-
-const clearCloseSidebarTimer = () => {
-  clearTimeout(closeSidebarTimer);
-};
-
-const handleClickOutside = (event) => {
-  if (
-      popup.value &&
-      !popup.value.contains(event.target) &&
-      !popupButton.value.contains(event.target) &&
-      !event.target.closest('.bg-purple')
-  ) {
-    showPopup.value = false;
-  }
-  if (
-      !event.target.closest('.w-48') &&
-      !event.target.closest('.v-app-bar-nav-icon')
-  ) {
-    sideBarStore.hide()
-  }
-};
-
-onMounted(() => {
-  document.addEventListener('click', handleClickOutside);
-});
-
-onUnmounted(() => {
-  document.removeEventListener('click', handleClickOutside);
-});
 </script>
 
 <style scoped>
-/* Do not remove. Used for animation */
-.slide-fade-enter-active, .slide-fade-leave-active {
-  transition: transform 0.7s ease, opacity 0.7s ease;
-}
-
-.slide-fade-enter, .slide-fade-leave-to {
-  transform: translateX(-100%);
-  opacity: 0;
-}
 </style>