tethys.backend/resources/js/Components/NavBar.vue

<script  lang="ts" setup>
import { usePage, router } from '@inertiajs/vue3'
// import { usePage } from '@inertiajs/inertia-vue3';
// import { Inertia } from '@inertiajs/inertia';
import {ComputedRef} from "vue";

import { computed, ref } from 'vue';
import { containerMaxW } from '@/config.js';
// import { MainService } from '@/Stores/main.js';
import { StyleService } from '@/Stores/style.js';
import { LayoutService } from '@/Stores/layout.js';
import {
	mdiForwardburger,
	mdiBackburger,
	mdiClose,
	mdiDotsVertical,
	mdiMenu,
	// mdiClockOutline,
	mdiCloudDownloadOutline,
	mdiCloud,
	mdiCrop,
	mdiAccount,
	mdiCogOutline,
	mdiEmail,
	mdiLogout,
	mdiGithub,
	mdiThemeLightDark,
} from '@mdi/js';
import NavBarItem from '@/Components/NavBarItem.vue';
import NavBarItemLabel from '@/Components/NavBarItemLabel.vue';
import NavBarMenu from '@/Components/NavBarMenu.vue';
import BaseDivider from '@/Components/BaseDivider.vue';
import UserAvatarCurrentUser from '@/Components/UserAvatarCurrentUser.vue';
import BaseIcon from '@/Components/BaseIcon.vue';
import NavBarSearch from '@/Components/NavBarSearch.vue';
import { stardust } from '@eidellev/adonis-stardust/client';
import IUser from "App/Models/User";

// const mainStore = MainService();
// const userName = computed(() =>mainStore.userName);



const styleService = StyleService();
// const props = defineProps({		
// 	user: {
// 		type: Object,
// 		default: () => ({}),
// 	}
// });
// const userName = computed(() => usePage().props.user.login)

const user: ComputedRef<IUser>= computed(() => {
	return usePage().props.authUser as IUser;
});
// const userName = computed(() => props.user.login)

const toggleLightDark = () => {
	styleService.setDarkMode();
};

const layoutStore = LayoutService();

const isMenuNavBarActive = ref(false);

const menuNavBarToggle = () => {
	isMenuNavBarActive.value = !isMenuNavBarActive.value;
};

const menuOpenLg = () => {
	layoutStore.isAsideLgActive = true;
};

// const logout = () => {
// 	// router.post(route('logout'))
// 	Inertia.get(stardust.route('app.index'));
// };
const logout = async() => {
	// router.post(route('logout'));
  await router.post(stardust.route('logout'));
};
</script>

<template>
	<nav
		class="top-0 left-0 right-0 fixed bg-gray-50 h-14 z-30 w-screen transition-position xl:pl-60 lg:w-auto dark:bg-slate-800"
	>
		<div class="flex lg:items-stretch" :class="containerMaxW">
			<div class="flex-1 items-stretch flex h-14">
				<NavBarItem type="flex lg:hidden" @click.prevent="layoutStore.asideMobileToggle()">
					<BaseIcon
						:path="layoutStore.isAsideMobileExpanded ? mdiBackburger : mdiForwardburger"
						size="24"
					/>
				</NavBarItem>
				<NavBarItem type="hidden lg:flex xl:hidden" @click.prevent="menuOpenLg">
					<BaseIcon :path="mdiMenu" size="24" />
				</NavBarItem>
				<NavBarItem>
					<NavBarSearch />
				</NavBarItem>
			</div>
			<div class="flex-none items-stretch flex h-14 lg:hidden">
				<NavBarItem @click.prevent="menuNavBarToggle">
					<BaseIcon :path="isMenuNavBarActive ? mdiClose : mdiDotsVertical" size="24" />
				</NavBarItem>
			</div>
			<div
				class="absolute w-screen top-14 left-0 bg-gray-50 shadow lg:w-auto lg:items-stretch lg:flex lg:grow lg:static lg:border-b-0 lg:overflow-visible lg:shadow-none dark:bg-slate-800"
				:class="[isMenuNavBarActive ? 'block' : 'hidden']"
			>
				<div
					class="max-h-screen-menu overflow-y-auto lg:overflow-visible lg:flex lg:items-stretch lg:justify-end lg:ml-auto"
				>
					<NavBarMenu>
						<NavBarItemLabel :icon="mdiMenu" label="Help menu" />
						<template #dropdown>
							<!-- <NavBarItem>
								<NavBarItemLabel :icon="mdiClockOutline" label="Item One" />
							</NavBarItem> -->
							<NavBarItem href="/docs/HandbuchTethys.pdf" target="_blank">
								<NavBarItemLabel :icon="mdiCloudDownloadOutline" label="Tethys Manual" />
							</NavBarItem>
							<NavBarItem href="/docs/geopackage_v01.pdf" target="_blank">
								<NavBarItemLabel :icon="mdiCloud" label="GeoPackage Help" />
							</NavBarItem>
							<BaseDivider nav-bar />
							<NavBarItem>
								<NavBarItemLabel :icon="mdiCrop" label="Item Last" />
							</NavBarItem>
						</template>
					</NavBarMenu>

					<NavBarMenu>
						<NavBarItemLabel v-bind:label="user.login">
							<UserAvatarCurrentUser class="w-6 h-6 mr-3 inline-flex" />
						</NavBarItemLabel>

						<template #dropdown>
							<!-- <NavBarItem> -->
								<!-- <NavBarItem route-name="admin.account.info"> -->
							<NavBarItem :route-name="'admin.account.info'" >
								<NavBarItemLabel :icon="mdiAccount" label="My Profile" />
							</NavBarItem>
							<NavBarItem :route-name="'settings'">
								<NavBarItemLabel :icon="mdiCogOutline" label="Settings" />
							</NavBarItem>
							<NavBarItem>
								<NavBarItemLabel :icon="mdiEmail" label="Messages" />
							</NavBarItem>
							<BaseDivider nav-bar />
							<NavBarItem @click="logout">
								<NavBarItemLabel :icon="mdiLogout" label="Log Out" />
							</NavBarItem>
						</template>
					</NavBarMenu>

					<NavBarItem is-desktop-icon-only @click.prevent="toggleLightDark">
						<NavBarItemLabel v-bind:icon="mdiThemeLightDark" label="Light/Dark" is-desktop-icon-only />
					</NavBarItem>
					<NavBarItem href="https://gitea.geologie.ac.at/geolba/tethys" target="_blank" is-desktop-icon-only>
						<NavBarItemLabel v-bind:icon="mdiGithub" label="GitHub" is-desktop-icon-only />
					</NavBarItem>
					<NavBarItem is-desktop-icon-only @click="logout">
						<NavBarItemLabel v-bind:icon="mdiLogout" label="Log out" is-desktop-icon-only />
					</NavBarItem>
				</div>
			</div>
		</div>
	</nav>
</template>