Reworking the layouts to allow for the new design

src/App.vue

@@ -1,30 +1,27 @@
 <template>
   <v-app>
-    <div class="m-0 flex flex-column h-screen">
-<!--      <Header class="fixed w-full z-50 top-0 p-2"></Header>-->
-      <div class="flex flex-row relative">
-        <div
-            class="fixed h-full w-2 z-20"
-            style="background: transparent;"
-        ></div>
 
-        <transition name="slide-fade">
-          <div v-show="sideBarStore.visible"
-               class=" fixed h-full min-w-60 border-r-2 bg-white  z-30 transition-transform duration-700">
-            <SideBar></SideBar>
-          </div>
-        </transition>
+    <Header class="fixed w-full z-50 p-2 h-16"></Header>
 
-        <div class="flex flex-col  w-full" style="background-color: #f4f4f4">
-          <RouterView></RouterView>
-          <Footer></Footer>
+    <div class="flex flex-row mt-16">
+
+      <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 bg-amber">
+        <RouterView></RouterView>
       </div>
+
     </div>
+
   </v-app>
-  
+
   <size-indicator></size-indicator>
-  
+
 </template>
 
 <script async setup>