175 lines
4.5 KiB
Vue
175 lines
4.5 KiB
Vue
<script setup lang="ts">
|
|
import { Head, router } from '@inertiajs/vue3';
|
|
import { ref } from 'vue';
|
|
import { useDisplay } from 'vuetify';
|
|
import Masthead from '@/components/Masthead.vue';
|
|
import { usePage } from '@/composables/usePage';
|
|
import CategoryNavBar from '@/components/CategoryNavBar.vue';
|
|
import { route } from 'ziggy-js';
|
|
|
|
defineProps<{
|
|
title?: string;
|
|
}>();
|
|
|
|
const page = usePage().props;
|
|
|
|
const { mobile } = useDisplay();
|
|
const drawer = ref(false);
|
|
|
|
const logout = () => router.post(route('logout'));
|
|
</script>
|
|
|
|
<template>
|
|
<Head :title="title" />
|
|
|
|
<VApp>
|
|
<!-- Header -->
|
|
<VAppBar flat height="56" color="surface" border="b">
|
|
<VAppBarTitle>
|
|
<Masthead dark />
|
|
</VAppBarTitle>
|
|
|
|
<!-- Desktop nav -->
|
|
<template v-if="!mobile">
|
|
<div class="d-flex align-center ga-2 mr-4">
|
|
<VBtn
|
|
v-if="!page.auth.user"
|
|
variant="text"
|
|
:href="route('login')"
|
|
class="nav-btn"
|
|
>
|
|
Login
|
|
</VBtn>
|
|
<VBtn
|
|
v-if="!page.auth.user"
|
|
variant="outlined"
|
|
:href="route('register')"
|
|
class="nav-btn"
|
|
>
|
|
Register
|
|
</VBtn>
|
|
<div style="display: flex; align-items: center">
|
|
<span v-if="page.auth.user"
|
|
>Hello {{ page.auth.user.name }}!</span
|
|
>
|
|
</div>
|
|
<VBtn
|
|
v-if="page.auth.user"
|
|
icon="mdi-cog"
|
|
variant="text"
|
|
:href="route('settings.index')"
|
|
aria-label="Settings"
|
|
/>
|
|
<VBtn
|
|
v-if="page.auth.user"
|
|
variant="outlined"
|
|
class="nav-btn"
|
|
@click="logout"
|
|
>
|
|
Log Out
|
|
</VBtn>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Mobile hamburger -->
|
|
<VAppBarNavIcon v-else @click="drawer = !drawer" />
|
|
</VAppBar>
|
|
|
|
<CategoryNavBar />
|
|
|
|
<VNavigationDrawer v-model="drawer" temporary>
|
|
<VList>
|
|
<VListItem
|
|
v-if="!page.auth.user"
|
|
:href="route('login')"
|
|
title="Login"
|
|
/>
|
|
<VListItem
|
|
v-if="!page.auth.user"
|
|
:href="route('register')"
|
|
title="Register"
|
|
/>
|
|
<VListItem
|
|
v-if="page.auth.user"
|
|
:href="route('settings.index')"
|
|
title="Settings"
|
|
/>
|
|
<VListItem
|
|
v-if="page.auth.user"
|
|
title="Log Out"
|
|
@click="logout"
|
|
/>
|
|
</VList>
|
|
</VNavigationDrawer>
|
|
|
|
<!-- Main content -->
|
|
<VMain class="bg-background">
|
|
<VContainer class="content-well pa-6">
|
|
<slot />
|
|
</VContainer>
|
|
</VMain>
|
|
|
|
<!-- Footer -->
|
|
<VFooter app color="#111111" class="footer">
|
|
<Masthead small light />
|
|
<VSpacer />
|
|
<nav class="d-flex ga-4"></nav>
|
|
<v-spacer />
|
|
<span class="footer-copy"
|
|
>© {{ new Date().getFullYear() }} DredgeNews</span
|
|
>
|
|
</VFooter>
|
|
</VApp>
|
|
</template>
|
|
|
|
<style scoped lang="sass">
|
|
|
|
.nav-btn
|
|
font-family: 'Inter', sans-serif
|
|
font-size: 13px
|
|
font-weight: 500
|
|
letter-spacing: 0
|
|
text-transform: none
|
|
|
|
|
|
.nav-link
|
|
font-family: 'Inter', sans-serif
|
|
font-size: 13px
|
|
font-weight: 500
|
|
color: #444
|
|
text-decoration: none
|
|
padding: 0 14px
|
|
height: 56px
|
|
display: flex
|
|
align-items: center
|
|
border-bottom: 3px solid transparent
|
|
transition: color 0.15s
|
|
|
|
&:hover
|
|
color: #111
|
|
|
|
&.active
|
|
color: #111
|
|
border-bottom-color: #C0392B
|
|
|
|
.content-well
|
|
max-width: 1080px
|
|
|
|
.footer
|
|
padding: 1.25rem 1.5rem
|
|
display: flex
|
|
align-items: center
|
|
|
|
.footer-link
|
|
font-size: 12px
|
|
color: #aaa
|
|
text-decoration: none
|
|
|
|
&:hover
|
|
color: #fff
|
|
|
|
.footer-copy
|
|
font-size: 11px
|
|
color: #666
|
|
</style>
|