Initial

2026-07-04 18:24:44 +10:00
parent 3f6d532cf0
commit 0485b85a59
209 changed files with 1429 additions and 7372 deletions
@@ -0,0 +1,201 @@
+<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>