60 lines
2.4 KiB
Vue
60 lines
2.4 KiB
Vue
<script setup>
|
|
import { ref } from 'vue';
|
|
import ApplicationLogo from '@/Components/ApplicationLogo.vue';
|
|
import Dropdown from '@/Components/Dropdown.vue';
|
|
import DropdownLink from '@/Components/DropdownLink.vue';
|
|
import NavLink from '@/Components/NavLink.vue';
|
|
import ResponsiveNavLink from '@/Components/ResponsiveNavLink.vue';
|
|
import { Link } from '@inertiajs/vue3';
|
|
|
|
const showingNavigationDropdown = ref(false);
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div class="min-vh-100 bg-light">
|
|
<nav class="navbar navbar-expand-lg navbar-light bg-white border-bottom shadow-sm">
|
|
<div class="container">
|
|
<Link :href="route('dashboard')" class="navbar-brand d-flex align-items-center me-3">
|
|
<ApplicationLogo style="height: 36px; width: auto;" />
|
|
</Link>
|
|
|
|
<div class="d-none d-lg-flex align-items-center gap-2">
|
|
<NavLink :href="route('dashboard')" :active="route().current('dashboard')">
|
|
Dashboard
|
|
</NavLink>
|
|
<NavLink :href="route('projects.index')" :active="route().current('projects.index')">
|
|
Projects
|
|
</NavLink>
|
|
</div>
|
|
|
|
<div class="ms-auto d-flex align-items-center gap-2">
|
|
<Dropdown align="right" width="48">
|
|
<template #trigger>
|
|
<button type="button" class="btn btn-outline-secondary btn-sm">
|
|
{{ $page.props.auth.user.name }}
|
|
</button>
|
|
</template>
|
|
|
|
<template #content>
|
|
<DropdownLink :href="route('profile.edit')">Profile</DropdownLink>
|
|
<DropdownLink :href="route('logout')" method="post" as="button">Log Out</DropdownLink>
|
|
</template>
|
|
</Dropdown>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<header class="bg-white border-bottom" v-if="$slots.header">
|
|
<div class="container py-3">
|
|
<slot name="header" />
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<slot />
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</template>
|