Done

resources/js/layouts/MainLayout.vue

@@ -1,35 +1,22 @@
 <script setup lang="ts">
-import { Head } from '@inertiajs/vue3';
+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 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',
-];
+const logout = () => router.post(route('logout'));
 </script>
 
 <template>
@@ -44,13 +31,43 @@ const subItems = [
 
             <!-- Desktop nav -->
             <template v-if="!mobile">
-                <div class="d-flex ga-2 mr-4">
-                    <VBtn variant="text" href="/login" class="nav-btn">
+                <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 variant="outlined" href="/register" class="nav-btn">
+                    <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>
 
@@ -58,24 +75,30 @@ const subItems = [
             <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>
+        <CategoryNavBar />
 
         <VNavigationDrawer v-model="drawer" temporary>
             <VList>
-                <VListItem href="/login" title="Login" />
-                <VListItem href="/register" title="Register" />
+                <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>
 
@@ -90,16 +113,7 @@ const subItems = [
         <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>
+            <nav class="d-flex ga-4"></nav>
             <v-spacer />
             <span class="footer-copy"
                 >© {{ new Date().getFullYear() }} DredgeNews</span
@@ -109,7 +123,6 @@ const subItems = [
 </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
@@ -139,46 +152,6 @@ const subItems = [
         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