feat: add functionality for Hamburger menu

src/assets/scss/app.scss

@@ -25,3 +25,4 @@ html, body, #app {
 @import "components/tooltip";
 @import "components/calendar-view";
 @import "components/date-picker";
+@import "components/sideMenu";

src/assets/scss/components/_sideMenu.scss

@@ -0,0 +1,4 @@
+.list-group-minimize {
+  width: 58px;
+  overflow: hidden !important;
+}

src/components/layout/VHeader.vue

@@ -3,6 +3,7 @@
         <button
             type="submit"
             class="btn btn-sm text-white"
+            @click="toggleSideMenu"
         >
             <i class="bi-list h4"></i>
         </button>
@@ -44,17 +45,26 @@
         components: {
             AppSettings
         },
-
-        setup() {
+        props: {
+            wide: {
+                type: Boolean
+            },
+        },
+        emits: ['update:wide'],
+        setup(props, { emit }) {
             const router = useRouter();
 
             function logout() {
                 AuthenticationService.logout();
                 router.push({ name: 'Login' });
             }
 
+            function toggleSideMenu() {
+                emit('update:wide', !props.wide);
+            }
             return {
-                logout
+                logout,
+                toggleSideMenu
             };
         }
     }

src/components/layout/VLayout.vue

@@ -1,11 +1,11 @@
 <template>
     <slot name="header">
-        <VHeader/>
+        <VHeader  v-model:wide="wide"/>
     </slot>
 
     <main class="row g-0 flex-fill">
         <slot name="side-bar">
-            <VSideMenu />
+            <VSideMenu :wide="wide" />
         </slot>
 
         <div class="col bg-body-tertiary p-4">
@@ -24,11 +24,19 @@
     import VFooter from '@/components/layout/VFooter.vue';
     import VSideMenu from '@/components/layout/side-menu/VSideMenu.vue';
 
+    import { ref } from "vue";
+
     export default {
         components: {
             VHeader,
             VSideMenu,
             VFooter
+        },
+        setup() {
+            const wide = ref(true);
+            return {
+                wide
+            };
         }
     }
 </script>

src/components/layout/side-menu/VSideMenu.vue

@@ -1,5 +1,5 @@
 <template>
-    <aside class="col-2 border-end">
+    <aside v-if="wide" class="col-2 border-end">
         <nav class="list-group list-group-flush py-2">
             <VSideMenuItem :to="{ name: 'Dashboard' }">
                 <template #icon>
@@ -26,6 +26,31 @@
             </VSideMenuItem>
         </nav>
     </aside>
+
+    <aside v-else class="list-group-minimize border-end">
+        <nav class="list-group list-group-flush py-2">
+            <VSideMenuItem :to="{ name: 'Dashboard' }">
+                <template #icon>
+                    <i class="bi-border-all"></i>
+                </template>
+
+            </VSideMenuItem>
+
+            <VSideMenuItem :to="{ name: 'Users' }">
+                <template #icon>
+                    <i class="bi-people"></i>
+                </template>
+
+            </VSideMenuItem>
+
+            <VSideMenuItem :to="{ name: 'Todos' }">
+                <template #icon>
+                    <i class="bi-list-task"></i>
+                </template>
+
+            </VSideMenuItem>
+        </nav>
+    </aside>
 </template>
 
 <script>
@@ -34,7 +59,11 @@
 
     export default {
         name: 'VSideBar',
-
+        props: {
+            wide: {
+                type: Boolean
+            },
+        },
         components: {
             VSideMenuItem
         }