202 lines
4.5 KiB
Vue
202 lines
4.5 KiB
Vue
<script setup lang="ts">
|
|
import { Head } from '@inertiajs/vue3';
|
|
import { ref } from 'vue';
|
|
import { useDisplay } from 'vuetify';
|
|
import Masthead from '@/components/Masthead.vue';
|
|
|
|
defineProps<{
|
|
title?: string;
|
|
}>();
|
|
|
|
const { mobile } = useDisplay();
|
|
const drawer = ref(false);
|
|
|
|
const navItems = [
|
|
{ label: 'Top Stories', href: '/' },
|
|
{ label: 'World', href: '/world' },
|
|
{ label: 'Technology', href: '/technology' },
|
|
{ label: 'Business', href: '/business' },
|
|
{ label: 'Science', href: '/science' },
|
|
];
|
|
|
|
const subItems = [
|
|
'Headlines',
|
|
'Australia',
|
|
'UK',
|
|
'USA',
|
|
'Politics',
|
|
'Climate',
|
|
'Health',
|
|
'Sport',
|
|
'Arts',
|
|
];
|
|
</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 ga-2 mr-4">
|
|
<VBtn variant="text" href="/login" class="nav-btn">
|
|
Login
|
|
</VBtn>
|
|
<VBtn variant="outlined" href="/register" class="nav-btn">
|
|
Register
|
|
</VBtn>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Mobile hamburger -->
|
|
<VAppBarNavIcon v-else @click="drawer = !drawer" />
|
|
</VAppBar>
|
|
|
|
<VAppBar flat :height="37" color="surface" style="top: 56px">
|
|
<div class="red-rule" />
|
|
<div class="subbar">
|
|
<a
|
|
v-for="item in subItems"
|
|
:key="item"
|
|
href="#"
|
|
class="subbar-link"
|
|
>
|
|
{{ item }}
|
|
</a>
|
|
</div>
|
|
</VAppBar>
|
|
|
|
<VNavigationDrawer v-model="drawer" temporary>
|
|
<VList>
|
|
<VListItem href="/login" title="Login" />
|
|
<VListItem href="/register" title="Register" />
|
|
</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">
|
|
<a
|
|
v-for="link in ['About', 'Donate']"
|
|
:key="link"
|
|
:href="`/${link.toLowerCase()}`"
|
|
class="footer-link"
|
|
>
|
|
{{ link }}
|
|
</a>
|
|
</nav>
|
|
<v-spacer />
|
|
<span class="footer-copy"
|
|
>© {{ new Date().getFullYear() }} DredgeNews</span
|
|
>
|
|
</VFooter>
|
|
</VApp>
|
|
</template>
|
|
|
|
<style scoped lang="sass">
|
|
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Inter:wght@400;500&display=swap')
|
|
|
|
.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
|
|
|
|
.red-rule
|
|
height: 3px
|
|
background: #C0392B
|
|
width: 100%
|
|
position: absolute
|
|
top: 0
|
|
left: 0
|
|
z-index: 1
|
|
|
|
.subbar
|
|
width: 100%
|
|
background: #fff
|
|
border-bottom: 1px solid #E8E8E8
|
|
display: flex
|
|
overflow-x: auto
|
|
padding: 0 1.5rem
|
|
position: absolute
|
|
top: 3px
|
|
left: 0
|
|
|
|
&::-webkit-scrollbar
|
|
display: none
|
|
|
|
.subbar-link
|
|
font-family: 'Inter', sans-serif
|
|
font-size: 12px
|
|
color: #666
|
|
text-decoration: none
|
|
padding: 8px 12px
|
|
white-space: nowrap
|
|
border-bottom: 2px solid transparent
|
|
flex-shrink: 0
|
|
|
|
&:hover
|
|
color: #111
|
|
|
|
&.active
|
|
color: #111
|
|
border-bottom-color: #111
|
|
|
|
.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>
|