Crud fixed

src/layout/AppTopbar.vue

@@ -1,11 +1,13 @@
 <script setup>
 import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
 import { useLayoutService } from '@/layout/composables/layoutService';
+import { useRouter } from 'vue-router';
 
 const { layoutConfig, onMenuToggle } = useLayoutService();
 
 const outsideClickListener = ref(null);
 const topbarMenuActive = ref(false);
+const router = useRouter();
 
 onMounted(() => {
     bindOutsideClickListener();
@@ -21,7 +23,10 @@ const logoUrl = () => {
 const onTopBarMenuButton = () => {
     topbarMenuActive.value = !topbarMenuActive.value;
 };
-
+const onSettingsClick = () => {
+    topbarMenuActive.value = false;
+    router.push('/documentation');
+};
 const topbarMenuClasses = computed(() => {
     return {
         'layout-topbar-menu-mobile-active': topbarMenuActive.value
@@ -70,18 +75,18 @@ const isOutsideClicked = (event) => {
         </button>
 
         <div class="layout-topbar-menu" :class="topbarMenuClasses">
-            <button class="p-link layout-topbar-button">
+            <button @click="onTopBarMenuButton()" class="p-link layout-topbar-button">
                 <i class="pi pi-calendar"></i>
                 <span>Calendar</span>
             </button>
-            <button class="p-link layout-topbar-button">
+            <button @click="onTopBarMenuButton()" class="p-link layout-topbar-button">
                 <i class="pi pi-user"></i>
                 <span>Profile</span>
             </button>
-            <router-link to="/documentation" class="p-link layout-topbar-button">
+            <button @click="onSettingsClick()" class="p-link layout-topbar-button">
                 <i class="pi pi-cog"></i>
                 <span>Settings</span>
-            </router-link>
+            </button>
         </div>
     </div>
 </template>