💄 Add Titlebar

src/App.vue

@@ -1,3 +1,13 @@
+<script setup>
+import TitleBar from "./components/titlebar-element.vue";
+import { RouterView } from "vue-router";
+</script>
+
 <template>
+  <TitleBar />
   <RouterView />
 </template>
+
+<style>
+@import "./assets/base.css";
+</style>

src/assets/base.css

@@ -0,0 +1,15 @@
+:root {
+  --bg-color: #424242;
+  --text-color: #bdbdbd;
+  --font-family: Arial, Helvetica, sans-serif;
+  --titlebar-color: #212121;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  color-scheme: dark;
+  color: var(--text-color);
+  background-color: var(--bg-color);
+  font-family: var(--font-family);
+}

src/components/icons/menu-icon.vue

@@ -0,0 +1,20 @@
+<!-- From https://github.com/feathericons/feather -->
+
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="26"
+    height="26"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="feather feather-menu"
+  >
+    <line x1="3" y1="12" x2="21" y2="12"></line>
+    <line x1="3" y1="6" x2="21" y2="6"></line>
+    <line x1="3" y1="18" x2="21" y2="18"></line>
+  </svg>
+</template>

src/components/titlebar-element.vue

@@ -0,0 +1,39 @@
+<script setup>
+import MenuIcon from "./icons/menu-icon.vue";
+import { computed } from "vue";
+import { useRoute } from "vue-router";
+
+const route = useRoute();
+const routeName = computed(() => route.name);
+</script>
+
+<template>
+  <div class="titlebar">
+    <span class="title">{{ routeName }}</span>
+    <div class="settings">
+      <MenuIcon />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.titlebar {
+  height: 68px;
+  background-color: var(--titlebar-color);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.title {
+  font-size: 25px;
+  padding-left: 13px;
+}
+
+.settings {
+  display: flex;
+  width: 100%;
+  justify-content: right;
+  padding-right: 13px;
+}
+</style>