App: Added a sidebar store with BannerAction to adjust the z-depth. CreatorLayout: Resized the content with the sidebar and added the option for a closed or open menu. Also added a value in SidebarStore to track the menu state for correct positioning.

src/App.vue

@@ -1,35 +1,33 @@
 <template>
   <v-app>
     <div class="flex flex-row">
-
-      <div class="fixed h-full w-60 border-r-2 z-30 ">
+      <div class="border-r-2 z-30">
         <side-bar></side-bar>
       </div>
-
-      <div class="pl-60 w-full">
-
+      
+      <div :class="['w-full', sideBarStore.sidebarWidth]">
         <div v-if="!brandingStore.loading"
              class="min-h-screen justify-center items-center py-10"
-             :style="{backgroundColor: brandingStore.colors.background}">
+             :style="{ backgroundColor: brandingStore.colors.background }">
           <router-view></router-view>
         </div>
-
       </div>
-
     </div>
   </v-app>
 
   <size-indicator></size-indicator>
-
 </template>
 
 <script async setup>
 import SideBar from "@/views/main/SideBar.vue";
 import SizeIndicator from "@/views/tools/SizeIndicator.vue";
-import {useBrandingStore} from "@/stores/brandingStore.js";
+import { useBrandingStore } from "@/stores/brandingStore.js";
+import { useSideBarStore } from "@/stores/sideBarStore.js";
 
-const brandingStore = useBrandingStore()
+const brandingStore = useBrandingStore();
+const sideBarStore = useSideBarStore(); 
 </script>
 
 <style scoped>
 </style>
+s