103 lines
3.9 KiB
Vue
103 lines
3.9 KiB
Vue
<script setup lang="ts">
|
|
import { Link, usePage } from '@inertiajs/vue3';
|
|
import AppLogo from '@/components/AppLogo.vue';
|
|
import LocaleDropdown from '@/components/LocaleDropdown.vue';
|
|
import PluginSlot from '@/components/PluginSlot.vue';
|
|
import Menu from '@/components/ui/Menu.vue';
|
|
import MenuItem from '@/components/ui/MenuItem.vue';
|
|
import MenuSeparator from '@/components/ui/MenuSeparator.vue';
|
|
import { useTranslations } from '@/composables/useVanguard';
|
|
import type { SharedProps } from '@/types';
|
|
|
|
defineProps<{ heading?: string }>();
|
|
defineEmits<{ toggleSidebar: [] }>();
|
|
|
|
const page = usePage<SharedProps>();
|
|
const { __ } = useTranslations();
|
|
</script>
|
|
|
|
<template>
|
|
<nav class="border-primary-600 fixed top-0 right-0 left-0 z-20 flex h-(--spacing-navbar) items-stretch border-t-2 bg-white shadow-sm">
|
|
<!--
|
|
The block is only as wide as the sidebar it sits above, and the
|
|
sidebar is off canvas below md. Holding 250px there would leave a
|
|
390px viewport almost nothing for the heading and the controls.
|
|
-->
|
|
<div class="flex shrink-0 items-center justify-center border-r border-slate-100 px-4 md:w-(--spacing-sidebar) md:px-0">
|
|
<Link :href="route('dashboard')">
|
|
<AppLogo :height="35" variant="no-text" class="md:hidden" />
|
|
<AppLogo :height="35" class="hidden md:block" />
|
|
</Link>
|
|
</div>
|
|
|
|
<div class="flex flex-1 items-center gap-4 px-4">
|
|
<button
|
|
type="button"
|
|
class="cursor-pointer text-slate-400 hover:text-slate-600 md:hidden"
|
|
:aria-label="__('Toggle navigation')"
|
|
@click="$emit('toggleSidebar')"
|
|
>
|
|
<i class="fas fa-bars" />
|
|
</button>
|
|
|
|
<h4
|
|
v-if="heading"
|
|
class="truncate text-lg font-normal text-slate-700 md:mr-4 md:border-r md:border-slate-200 md:pr-5"
|
|
>
|
|
{{ heading }}
|
|
</h4>
|
|
|
|
<slot name="breadcrumbs" />
|
|
|
|
<div class="ml-auto flex items-center gap-2">
|
|
<a
|
|
v-if="page.props.auth.impersonating"
|
|
:href="route('impersonate.leave')"
|
|
class="flex items-center gap-2 px-3 text-red-600 hover:text-red-700"
|
|
>
|
|
<i class="fas fa-user-secret" />
|
|
<span class="hidden lg:inline">{{ __('Stop Impersonating') }}</span>
|
|
</a>
|
|
|
|
<PluginSlot name="navbar:items" />
|
|
|
|
<LocaleDropdown />
|
|
|
|
<Menu v-if="page.props.auth.user">
|
|
<template #trigger>
|
|
<button type="button" class="cursor-pointer">
|
|
<img
|
|
:src="page.props.auth.user.avatar"
|
|
width="44"
|
|
height="44"
|
|
:alt="page.props.auth.user.nameOrEmail"
|
|
class="rounded-full border border-slate-200 object-cover"
|
|
/>
|
|
</button>
|
|
</template>
|
|
|
|
<MenuItem :href="route('profile')" icon="fas fa-user">
|
|
{{ __('My Profile') }}
|
|
</MenuItem>
|
|
|
|
<MenuItem
|
|
v-if="page.props.config.databaseSessions"
|
|
:href="route('profile.sessions')"
|
|
icon="fas fa-list"
|
|
>
|
|
{{ __('Active Sessions') }}
|
|
</MenuItem>
|
|
|
|
<MenuSeparator />
|
|
|
|
<MenuItem :href="route('auth.logout')" icon="fas fa-sign-out-alt">
|
|
{{ __('Logout') }}
|
|
</MenuItem>
|
|
|
|
<PluginSlot name="navbar:dropdown" />
|
|
</Menu>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</template>
|