- add AvatarController.ts

- adapted menu.ts, NavBar.vue, NavBarItem.vue for highlighting active nav item
- NavBarItemLabel.vue for app menu highlighting
- adapted routes.ts
- adapted app.edge for new favicon
- adapted LayoutAuthenticated.vue (:showAsideMenu="false") for showing AsideMenu optional
- new material icons: BriefcaseCheck.vue, SwapHorizontal.vue, AccountGroup.vue, Lock.vue
- started with FirstRunWizard

resources/js/Components/NavBarItemLabel.vue

@@ -1,7 +1,9 @@
-<script setup>
+<script lang="ts" setup>
 import BaseIcon from '@/Components/BaseIcon.vue';
+import { computed } from 'vue';
+import { stardust } from '@eidellev/adonis-stardust/client';
 
-defineProps({
+const props = defineProps({
     icon: {
         type: String,
         default: null,
@@ -10,12 +12,90 @@ defineProps({
         type: String,
         required: true,
     },
+    size: {
+        type: [String, Number],
+        default: 16,
+    },
     isDesktopIconOnly: Boolean,
+    isHoverLabelOnly: Boolean,
+    routeName: {
+        type: String,
+        default: null,
+    },
+});
+
+const active = computed(() => {
+    if (props.routeName && stardust.isCurrent(props.routeName)) {
+        return true;
+    }
+    else {
+        return false;
+    }
+});
+
+const componentClass = computed(() => {
+    const base = [
+        // props.type,
+        'flex',
+    ];    
+    if (props.isHoverLabelOnly ) {
+        base.push(' flex-col items-center');
+    }   
+
+    return base;
+});
+
+const labelClass = computed(() => {
+    const base = [
+        // props.type,
+        'transition',
+    ];
+
+    if (props.isDesktopIconOnly && props.icon) {
+        base.push('lg:hidden');
+    }
+
+    if (props.isHoverLabelOnly && active.value == false) {
+        base.push('hidden');
+    } else if(props.isHoverLabelOnly && active.value == true) {
+        base.push('display-block');
+    }
+
+   
+
+    return base;
 });
 </script>
 
 <template>
-    <slot />
-    <BaseIcon v-if="icon" :path="icon" class="transition-colors" />
-    <span class="px-2 transition-colors" :class="{ 'lg:hidden': isDesktopIconOnly && icon }">{{ label }}</span>
+    <div :class="componentClass">
+        <slot />
+        <BaseIcon v-if="icon" :path="props.icon" class="transition-colors" :size="props.size" />
+        <!-- <span class="px-2 transition-colors" :class="{ 'lg:hidden': isDesktopIconOnly && props.icon }">{{ props.label }}</span> -->
+        <span class="px-2 transition-colors" :class="labelClass">{{ props.label }}</span>
+    </div>
 </template>
+
+<!-- <style lang="css" scoped>
+.app-menu-entry__active {
+    opacity: 1;
+}
+
+.app-menu-entry__active::before {
+    /* content: "___"; */
+    position: absolute;
+    pointer-events: none;
+    /* border-bottom-color: var(--color-main-background); */
+    /* transform: translateX(-50%); */
+    width: 100%;
+    /* height: 5px; */
+    border-radius: 3px;
+    border-bottom: 2px;
+    /* background-color: var(--color-primary-element-text); */
+    /* left: 50%; */
+    bottom: 6px;
+    display: block;
+    transition: all 0.1s ease-in-out;
+    opacity: 1;
+}
+</style> -->