From 3f956b6c2c2ed9403a4778e15d794c540a9cf92e Mon Sep 17 00:00:00 2001
From: minie4 <minie4@gmx.de>
Date: Fri, 29 Apr 2022 22:54:48 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Add=20Titlebar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                         | 10 ++++++++
 src/assets/base.css                 | 15 +++++++++++
 src/components/icons/menu-icon.vue  | 20 +++++++++++++++
 src/components/titlebar-element.vue | 39 +++++++++++++++++++++++++++++
 4 files changed, 84 insertions(+)
 create mode 100644 src/components/icons/menu-icon.vue
 create mode 100644 src/components/titlebar-element.vue

diff --git a/src/App.vue b/src/App.vue
index 7c2aa3f..3bea22f 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/assets/base.css b/src/assets/base.css
index e69de29..63b2947 100644
--- a/src/assets/base.css
+++ b/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);
+}
diff --git a/src/components/icons/menu-icon.vue b/src/components/icons/menu-icon.vue
new file mode 100644
index 0000000..67524ed
--- /dev/null
+++ b/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>
diff --git a/src/components/titlebar-element.vue b/src/components/titlebar-element.vue
new file mode 100644
index 0000000..d8d1d3a
--- /dev/null
+++ b/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>