💄 Add Titlebar

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>