- 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/Icons/AccountGroup.vue

@@ -0,0 +1,31 @@
+<template>
+    <span v-bind="$attrs" :aria-hidden="!title" :aria-label="title" class="material-design-icon account-group-icon"
+        role="img" @click="$emit('click', $event)">
+        <svg :fill="fillColor" class="material-design-icon__svg" :width="size" :height="size" viewBox="0 0 24 24">
+            <path
+                d="M12,5.5A3.5,3.5 0 0,1 15.5,9A3.5,3.5 0 0,1 12,12.5A3.5,3.5 0 0,1 8.5,9A3.5,3.5 0 0,1 12,5.5M5,8C5.56,8 6.08,8.15 6.53,8.42C6.38,9.85 6.8,11.27 7.66,12.38C7.16,13.34 6.16,14 5,14A3,3 0 0,1 2,11A3,3 0 0,1 5,8M19,8A3,3 0 0,1 22,11A3,3 0 0,1 19,14C17.84,14 16.84,13.34 16.34,12.38C17.2,11.27 17.62,9.85 17.47,8.42C17.92,8.15 18.44,8 19,8M5.5,18.25C5.5,16.18 8.41,14.5 12,14.5C15.59,14.5 18.5,16.18 18.5,18.25V20H5.5V18.25M0,20V18.5C0,17.11 1.89,15.94 4.45,15.6C3.86,16.28 3.5,17.22 3.5,18.25V20H0M24,20H20.5V18.25C20.5,17.22 20.14,16.28 19.55,15.6C22.11,15.94 24,17.11 24,18.5V20Z">
+                <title v-if="title">{{ title }}</title>
+            </path>
+        </svg>
+    </span>
+</template>
+  
+<script>
+export default {
+    name: "AccountGroupIcon",
+    emits: ['click'],
+    props: {
+        title: {
+            type: String,
+        },
+        fillColor: {
+            type: String,
+            default: "currentColor"
+        },
+        size: {
+            type: Number,
+            default: 24
+        }
+    }
+}
+</script>

resources/js/Components/Icons/BriefcaseCheck.vue

@@ -0,0 +1,31 @@
+<template>
+    <span v-bind="$attrs" :aria-hidden="!title" :aria-label="title" class="material-design-icon briefcase-check-icon"
+        role="img" @click="$emit('click', $event)">
+        <svg :fill="fillColor" class="material-design-icon__svg" :width="size" :height="size" viewBox="0 0 24 24">
+            <path
+                d="M10,2H14A2,2 0 0,1 16,4V6H20A2,2 0 0,1 22,8V19A2,2 0 0,1 20,21H4A2,2 0 0,1 2,19V8A2,2 0 0,1 4,6H8V4A2,2 0 0,1 10,2M14,6V4H10V6H14M10.5,17.5L17.09,10.91L15.68,9.5L10.5,14.67L8.41,12.59L7,14L10.5,17.5Z">
+                <title v-if="title">{{ title }}</title>
+            </path>
+        </svg>
+    </span>
+</template>
+  
+<script>
+export default {
+    name: "BriefcaseCheckIcon",
+    emits: ['click'],
+    props: {
+        title: {
+            type: String,
+        },
+        fillColor: {
+            type: String,
+            default: "currentColor"
+        },
+        size: {
+            type: Number,
+            default: 24
+        }
+    }
+}
+</script>

resources/js/Components/Icons/Lock.vue

@@ -0,0 +1,31 @@
+<template>
+    <span v-bind="$attrs" :aria-hidden="!title" :aria-label="title" class="material-design-icon lock-icon" role="img"
+        @click="$emit('click', $event)">
+        <svg :fill="fillColor" class="material-design-icon__svg" :width="size" :height="size" viewBox="0 0 24 24">
+            <path
+                d="M12,17A2,2 0 0,0 14,15C14,13.89 13.1,13 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10C4,8.89 4.9,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z">
+                <title v-if="title">{{ title }}</title>
+            </path>
+        </svg>
+    </span>
+</template>
+  
+<script>
+export default {
+    name: "LockIcon",
+    emits: ['click'],
+    props: {
+        title: {
+            type: String,
+        },
+        fillColor: {
+            type: String,
+            default: "currentColor"
+        },
+        size: {
+            type: Number,
+            default: 24
+        }
+    }
+}
+</script>

resources/js/Components/Icons/SwapHorizontal.vue

@@ -0,0 +1,30 @@
+<template>
+    <span v-bind="$attrs" :aria-hidden="!title" :aria-label="title" class="material-design-icon swap-horizontal-icon"
+        role="img" @click="$emit('click', $event)">
+        <svg :fill="fillColor" class="material-design-icon__svg" :width="size" :height="size" viewBox="0 0 24 24">
+            <path d="M21,9L17,5V8H10V10H17V13M7,11L3,15L7,19V16H14V14H7V11Z">
+                <title v-if="title">{{ title }}</title>
+            </path>
+        </svg>
+    </span>
+</template>
+  
+<script>
+export default {
+    name: "SwapHorizontalIcon",
+    emits: ['click'],
+    props: {
+        title: {
+            type: String,
+        },
+        fillColor: {
+            type: String,
+            default: "currentColor"
+        },
+        size: {
+            type: Number,
+            default: 24
+        }
+    }
+}
+</script>