Base module

app/app/src/main/java/de/haushalt/app/MainScreen.kt

@@ -1,7 +1,58 @@
 package de.haushalt.app
 
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.CenterAlignedTopAppBar
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import androidx.navigation.compose.NavHost
+import androidx.navigation.compose.composable
+import androidx.navigation.compose.rememberNavController
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun MainScreen() {
+    val navController = rememberNavController()
+    Scaffold(
+        topBar = {
+            Column {
+                Navigation()
+                Subnavigation()
+            }
+        }
+    ) { innerPadding ->
+        NavHost(
+            navController = navController,
+            startDestination = "start",
+            modifier = Modifier.padding(innerPadding)
+        ) {
+            composable("start") { StartScreen() }
+        }
+    }
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+private fun Navigation() {
+    CenterAlignedTopAppBar(
+        title = { Text("Haushalt") }
+    )
+}
+
+@Composable
+private fun Subnavigation() {
+    Surface(
+        modifier = Modifier
+            .fillMaxWidth()
+            .height(32.dp),
+        color = MaterialTheme.colorScheme.surfaceVariant
+    ) {}
 }

app/app/src/main/java/de/haushalt/app/StartScreen.kt

@@ -0,0 +1,7 @@
+package de.haushalt.app
+
+import androidx.compose.runtime.Composable
+
+@Composable
+fun StartScreen() {
+}

frontend/src/App.vue

@@ -3,5 +3,49 @@ import { RouterView } from 'vue-router'
 </script>
 
 <template>
+  <header class="navigation">
+    <div class="container">
+      <span class="brand">Haushalt</span>
+    </div>
+  </header>
+  <nav class="subnavigation">
+    <div class="container"></div>
+  </nav>
+  <main class="main-area">
+    <div class="container">
       <RouterView />
+    </div>
+  </main>
 </template>
+
+<style scoped>
+.navigation {
+  background: var(--nav-bg);
+  border-bottom: 1px solid var(--border);
+}
+
+.navigation .container {
+  display: flex;
+  align-items: center;
+  height: 3rem;
+}
+
+.brand {
+  font-size: 1.125rem;
+  font-weight: 600;
+}
+
+.subnavigation {
+  background: var(--subnav-bg);
+  border-bottom: 1px solid var(--border);
+}
+
+.subnavigation .container {
+  height: 2rem;
+}
+
+.main-area .container {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+</style>

frontend/src/router/index.js

@@ -2,7 +2,13 @@ import { createRouter, createWebHistory } from 'vue-router'
 
 const router = createRouter({
   history: createWebHistory(),
-  routes: [],
+  routes: [
+    {
+      path: '/',
+      name: 'start',
+      component: () => import('../views/Startpage.vue'),
+    },
+  ],
 })
 
 export default router

frontend/src/style.css

@@ -0,0 +1,26 @@
+:root {
+  --bg: #ffffff;
+  --text: #1a1a1a;
+  --border: #e5e5e5;
+  --nav-bg: #f7f7f8;
+  --subnav-bg: #f0f0f2;
+  color-scheme: light dark;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  color: var(--text);
+  background: var(--bg);
+}
+
+.container {
+  width: 100%;
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 0 1rem;
+}

frontend/src/views/Startpage.vue

@@ -0,0 +1,3 @@
+<template>
+  <div class="start-page"></div>
+</template>