Theme changes. topbar menu fixes

.gitignore

@@ -26,3 +26,11 @@ coverage
 *.njsproj
 *.sln
 *.sw?
+
+# Themes
+public/themes/soho-light/
+public/themes/soho-dark/
+public/themes/viva-light/
+public/themes/viva-dark/
+public/themes/mira/
+public/themes/nano/

src/assets/layout/styles/layout/_main.scss

@@ -20,9 +20,9 @@ body {
 
 a {
     text-decoration: none;
-    color: var(--primary-color);
+    /*     color: var(--primary-color); */
 }
 
 .layout-wrapper {
     min-height: 100vh;
-}
+}

src/layout/AppTopbar.vue

@@ -9,11 +9,11 @@
             <i class="pi pi-bars"></i>
         </button>
 
-        <button class="p-link layout-topbar-menu-button layout-topbar-button">
+        <button class="p-link layout-topbar-menu-button layout-topbar-button" @click="onTopBarMenuButton()">
             <i class="pi pi-ellipsis-v"></i>
         </button>
 
-        <div class="layout-topbar-menu">
+        <div class="layout-topbar-menu" :class="topbarMenuClasses">
             <button class="p-link layout-topbar-button">
                 <i class="pi pi-calendar"></i>
                 <span>Calendar</span>
@@ -31,13 +31,25 @@
 </template>
 
 <script setup>
+import { ref, computed } from 'vue';
 import { useLayoutService } from '@/layout/composables/layoutService';
 
 const { layoutConfig, onMenuToggle } = useLayoutService();
 
+const topbarMenuActive = ref(false);
 const logoUrl = () => {
     return new URL(`/src/assets/layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`, import.meta.url).href;
 };
+
+const onTopBarMenuButton = () => {
+    topbarMenuActive.value = !topbarMenuActive.value;
+};
+
+const topbarMenuClasses = computed(() => {
+    return {
+        'layout-topbar-menu-mobile-active': topbarMenuActive.value
+    };
+});
 </script>
 
 <style lang="scss" scoped></style>

src/router/index.js

@@ -75,19 +75,19 @@ const router = createRouter({
                     children: [
                         {
                             path: '/uikit/menu',
-                            component: () => import('@/components/menu/PersonalDemo.vue')
+                            component: () => import('@/views/uikit/menu/PersonalDemo.vue')
                         },
                         {
                             path: '/uikit/menu/seat',
-                            component: () => import('@/components/menu/SeatDemo.vue')
+                            component: () => import('@/views/uikit/menu/SeatDemo.vue')
                         },
                         {
                             path: '/uikit/menu/payment',
-                            component: () => import('@/components/menu/PaymentDemo.vue')
+                            component: () => import('@/views/uikit/menu/PaymentDemo.vue')
                         },
                         {
                             path: '/uikit/menu/confirmation',
-                            component: () => import('@/components/menu/ConfirmationDemo.vue')
+                            component: () => import('@/views/uikit/menu/ConfirmationDemo.vue')
                         }
                     ]
                 },