layout finished

frontend/app.vue

@@ -1,5 +1,6 @@
 <template>
     <div class="bg-neutral-100 dark:bg-neutral-900 text-primary h-screen flex flex-col">
+        <LayoutTopbar class="mb-3" />
         <NuxtPage class="overflow-y-scroll mb-auto" />
         <LayoutNavbar />
     </div>

frontend/assets/css/tailwind.css

@@ -1,3 +1,21 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+@layer components {
+    .item-hover {
+        @apply p-3 cursor-pointer hover:bg-neutral-300 dark:hover:bg-neutral-700 transition-all;
+    }
+
+    .item {
+        @apply p-3;
+    }
+
+    .container {
+        @apply bg-neutral-200 dark:bg-neutral-800 dark:text-gray-300 text-gray-900 shadow rounded;
+    }
+
+    .divider {
+        @apply w-full h-1 bg-neutral-250 dark:bg-neutral-850;
+    }
+  }

frontend/components/layout/Topbar.vue

@@ -0,0 +1,13 @@
+<template>
+    <div class="w-full h-10 bg-neutral-200 dark:bg-neutral-800 flex justify-center items-center shadow px-5 gap-2">
+        <div class="flex justify-evenly items-center gap-3 w-full max-w-xl dark:text-gray-300 text-gray-900">
+            <Icon v-if="route.meta.key === 'back'" size="1.75em" @click="router.back()" class="hover:cursor-pointer" name="ion:arrow-back"/>
+            <h1 class="capitalize font-bold text-xl mr-auto">{{ route.meta.title }}</h1>
+        </div>
+    </div>
+</template>
+
+<script setup>
+const route = useRoute()
+const router = useRouter()
+</script>

frontend/pages/calendar.vue

@@ -2,4 +2,10 @@
     <div>
         Calendar
     </div>
-</template>
+</template>
+
+<script setup>
+definePageMeta({
+    title: 'Calendar'
+})
+</script>

frontend/pages/index.vue

@@ -3,3 +3,9 @@
         Home
     </div>
 </template>
+
+<script setup>
+definePageMeta({
+    title: 'Home'
+})
+</script>

frontend/pages/news.vue

@@ -2,4 +2,10 @@
     <div>
         News
     </div>
-</template>
+</template>
+
+<script setup>
+definePageMeta({
+    title: 'Nieuws'
+})
+</script>

frontend/pages/settings.vue

@@ -1,5 +0,0 @@
-<template>
-    <div>
-        Settings
-    </div>
-</template>

frontend/pages/settings/admin/ledenlijst.vue

@@ -0,0 +1,12 @@
+<template>
+    <div>
+        Ledenlijst
+    </div>
+</template>
+
+<script setup>
+definePageMeta({
+    title: 'Ledenlijst',
+    key: 'back'
+})
+</script>

frontend/pages/settings/admin/users.vue

@@ -0,0 +1,13 @@
+<template>
+    <div>
+        Users
+    </div>
+</template>
+
+<script setup>
+
+definePageMeta({
+    title: 'Manage users',
+    key: 'back'
+})
+</script>

frontend/pages/settings/index.vue

@@ -0,0 +1,38 @@
+<template>
+    <div class="flex flex-col gap-5 mx-auto p-2 w-full max-w-sm">
+        <div>
+            <h1 class="text-xl ml-2 font-bold">Info</h1>
+            <div class="container">
+                <div class="item">
+                    Username
+                </div>
+            </div>
+        </div>
+        <div>
+            <h1 class="text-xl ml-2 font-bold">Account</h1>
+            <div class="bg-neutral-200 dark:bg-neutral-800 dark:text-gray-300 text-gray-900 shadow p-5 rounded">
+                Change Password
+            </div>
+        </div>
+        <div>
+            <h1 class="text-xl ml-2 font-bold">Admin</h1>
+            <div class="container">
+                <NuxtLink to="/settings/admin/users" class="rounded-t item-hover py-2 flex items-center">
+                    <span>Manage users</span>
+                    <Icon class="ml-auto" size="2em" name="ion:arrow-forward"/>
+                </NuxtLink>
+                <div class="divider" />
+                <NuxtLink to="/settings/admin/ledenlijst" class="rounded-b item-hover py-2 flex items-center">
+                    <span>Ledenlijst</span>
+                    <Icon class="ml-auto" size="2em" name="ion:arrow-forward"/>
+                </NuxtLink>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+definePageMeta({
+    title: 'Settings'
+})
+</script>

frontend/tailwind.config.js

@@ -4,7 +4,11 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        primary: '#eb6330'
+        primary: '#eb6330',
+        neutral: {
+          850: '#1F1F1F',
+          250: '#DDDDDD'
+        }
       }
     },
   },