- 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/NavBarItem.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script lang="ts" setup>
 import { StyleService } from '@/Stores/style';
 // import { Link } from '@inertiajs/vue3'
 import { Link } from '@inertiajs/vue3';
@@ -28,6 +28,10 @@ const props = defineProps({
     isDesktopIconOnly: Boolean,
     dropdown: Boolean,
     active: Boolean,
+    underline: {
+        type: Boolean,
+        default: false,
+    },
 });
 
 const is = computed(() => {
@@ -44,20 +48,50 @@ const is = computed(() => {
 
 const styleStore = StyleService();
 
-const activeColor = props.activeColor ?? `${styleStore.navBarItemLabelActiveColorStyle} dark:text-slate-400`;
+// const activeColor = props.activeColor ?? `${styleStore.navBarItemLabelActiveColorStyle} dark:text-slate-400`;
 
-const activeClass = computed(
-    //  () => props.routeName && route().current(props.routeName) == true ? props.activeColor : null
-    () => (props.routeName && stardust.isCurrent(props.routeName) ? props.activeColor : null),
-);
+
+// const active = computed(() => {
+//     if (props.routeName && stardust.isCurrent(props.routeName)) {
+//         return true;
+//     }
+//     else {
+//         return false;
+//     }
+// });
+
+const activeClass = computed(() => {
+    if (props.routeName && stardust.isCurrent(props.routeName)) {
+        // console.log(props.item.route);
+        const activeCls = [
+        styleStore.navBarItemLabelActiveColorStyle,
+        'dark:text-slate-400'
+        ];
+        
+    if (props.underline) {
+        activeCls.push('app-menu-entry__active');
+    }
+
+        // return `${styleStore.navBarItemLabelActiveColorStyle} dark:text-slate-400 app-menu-entry__active`;
+        return activeCls;
+    } else {
+        return null;
+    }
+});
+
+// const activeClass = computed(
+//     //  () => props.routeName && route().current(props.routeName) == true ? props.activeColor : null
+//     () => (props.routeName && stardust.isCurrent(props.routeName) ? props.activeColor : null),
+// );
 // const itemRoute = computed(() => (props.routeName ? stardust.route(props.routeName): ''));
 
 const componentClass = computed(() => {
     const base = [
         props.type,
-        props.active
-            ? activeColor
-            : `${styleStore.navBarItemLabelStyle} dark:text-white dark:hover:text-slate-400 ${styleStore.navBarItemLabelHoverStyle}`,
+        `${styleStore.navBarItemLabelStyle} dark:text-white dark:hover:text-slate-400 ${styleStore.navBarItemLabelHoverStyle}`,
+        // props.active
+        //     ? activeColor
+        //     : `${styleStore.navBarItemLabelStyle} dark:text-white dark:hover:text-slate-400 ${styleStore.navBarItemLabelHoverStyle}`,
     ];
 
     if (props.type === 'block') {
@@ -79,12 +113,31 @@ const componentClass = computed(() => {
 </script>
 
 <template>
-    <component
-        :is="is"
-        class="items-center grow-0 shrink-0 relative cursor-pointer"
-        :class="[componentClass, activeClass]"
-        :href="routeName ? stardust.route(props.routeName, [props.param]) : href"
-    >
+    <component :is="is" class="items-center grow-0 shrink-0 relative cursor-pointer" :class="[componentClass, activeClass]"
+        :href="routeName ? stardust.route(props.routeName, [props.param]) : href">
         <slot />
     </component>
 </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;
+    background-color: var(--color-primary-element-text);
+    /* left: 50%; */
+    bottom: 6px;
+    display: block;
+    transition: all 0.1s ease-in-out;
+    opacity: 1;
+}
+</style>