From 258a30c35a4fc94af853803dc1bbb2942d8be867 Mon Sep 17 00:00:00 2001
From: Benny Samir Hierl <bennysamir@posteo.de>
Date: Mon, 7 Feb 2022 20:32:18 +0100
Subject: [PATCH] small ui/ux improvments

---
 index.html                        |  5 +----
 src/App.vue                       |  6 ++++--
 src/components/Header.vue         | 11 ++++++++---
 src/components/icons/IconMenu.vue |  8 ++++++++
 src/components/icons/index.ts     |  1 +
 5 files changed, 22 insertions(+), 9 deletions(-)
 create mode 100644 src/components/icons/IconMenu.vue
diff --git a/index.html b/index.html
index d7a8b6c..f05e3fb 100644
--- a/index.html
+++ b/index.html
@@ -7,10 +7,7 @@
     <title>Wunschlisten</title>
   </head>
   <body>
-    <div
-      id="app"
-      class="bg-white dark:bg-stone-900 text-black dark:text-white/75"
-    ></div>
+    <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/src/App.vue b/src/App.vue
index bfce685..47ef5f9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,9 @@
 <template>
-  <div class="h-screen max-w-[900px] mx-auto">
+  <div
+    class="h-screen bg-white dark:bg-stone-900 text-black dark:text-white/75 p-4"
+  >
     <Header />
-    <main class="h-full">
+    <main class="h-full max-w-[900px] mx-auto">
       <router-view v-slot="{ Component }">
         <template v-if="Component">
           <div
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 3cfc107..9577fb8 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,12 +1,17 @@
 <template>
-  <header class="py-4 flex flex-row-reverse opacity-60">
-    <div @click="toggleMode"><IconLightDark class="h-6 w-6" /></div>
+  <header
+    class="flex flex-row justify-end items-center opacity-60 mb-2 space-x-2"
+  >
+    <div @click="toggleMode">
+      <IconLightDark class="h-6 w-6 cursor-pointer" />
+    </div>
+    <!-- <div><IconMenu class="h-8 w-8 cursor-pointer"></IconMenu></div> -->
   </header>
 </template>
 
 <script setup lang="ts">
 import { useColorMode } from '@vueuse/core'
-import { IconLightDark } from '@/components/icons'
+import { IconLightDark, IconMenu } from '@/components/icons'
 const mode = useColorMode()
 
 const toggleMode = () => {
diff --git a/src/components/icons/IconMenu.vue b/src/components/icons/IconMenu.vue
new file mode 100644
index 0000000..1852c4c
--- /dev/null
+++ b/src/components/icons/IconMenu.vue
@@ -0,0 +1,8 @@
+<template>
+  <svg viewBox="0 0 24 24">
+    <path
+      d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2z"
+      fill="currentColor"
+    ></path>
+  </svg>
+</template>
diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts
index d0d4bf5..f01f74f 100644
--- a/src/components/icons/index.ts
+++ b/src/components/icons/index.ts
@@ -5,3 +5,4 @@ export { default as IconLink } from './IconLink.vue'
 export { default as IconSpinner } from './IconSpinner.vue'
 export { default as IconNoGift } from './IconNoGift.vue'
 export { default as IconLightDark } from './IconLightDark.vue'
+export { default as IconMenu } from './IconMenu.vue'
