some frontend

resources/js/components/BottomFleur.vue

@@ -9,7 +9,7 @@
 <style scoped>
 img {
     z-index: 100;
-    padding: 0;
+    padding: 15px;
     max-width: 553px;
     margin-left: auto;
     margin-right: auto;

resources/js/components/Header.vue

@@ -1,9 +1,18 @@
-<template>
-   <div class="header-main">
-        <a href="/">Home</a>
-   </div> 
+<script setup>
+import NavItem from './NavItem.vue';
 
-    <img :src="'/skonk/divider.png'" style="width: 90%; margin: auto;">
+
+</script>
+
+<template>
+    <div class="header-main">
+        <NavItem text_on_hover icon_before href="/" icon="/skonk/navigation/wish_icon.png">Wishes</NavItem>
+        <NavItem text_on_hover icon_before href="/auth/login" icon="/skonk/navigation/wish_icon.png" class="flex-end">asdfasdflik apsdjfp aspdoijf</NavItem>
+        <NavItem text_on_hover icon_before href="/auth/login" icon="/skonk/navigation/wish_icon.png" class="flex-end">Wishes</NavItem>
+        <NavItem text_on_hover icon_before href="/auth/login" icon="/skonk/navigation/wish_icon.png" class="flex-end">Wishes</NavItem>
+        <NavItem text_on_hover icon_before href="/auth/login" icon="/skonk/navigation/wish_icon.png" class="flex-end">Wishes</NavItem>
+    </div> 
+    <img :src="'/skonk/divider.png'" style="width: 90%; height: 3px; margin: auto;">
 </template>
 
 <style scoped>
@@ -12,10 +21,11 @@
     width: 100%;
     background-color: var(--background-color);
     padding: 10px;
+    margin-left: 15px;
     text-align: left;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
 }
-a {
-    font-size: 2vh;
-    margin: 10px;
-}
+
 </style>

resources/js/components/NavItem.vue

@@ -0,0 +1,49 @@
+<script setup>
+import {ref} from 'vue';
+
+const props = defineProps({
+    href: {
+        type: String,
+        default: '/',
+    },
+    icon: String,
+    icon_before: {
+        type: Boolean,
+        default: false,
+    },
+    text_on_hover: {
+        type: Boolean,
+        default: false,
+    }
+});
+const hover = ref(0);
+</script>
+
+<template>
+    <div class="flex-container" @mouseover="hover = true" @mouseleave="hover = false">
+        <img :src="icon" v-if="icon_before && icon != null">
+        <a :href="href">
+            <div :hidden="text_on_hover && !hover">
+                <slot></slot>
+            </div>
+        </a>
+        <img :src="icon" v-if="!icon_before && icon != null">
+    </div>
+</template>
+
+<style scoped>
+.flex-container {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+}
+a {
+    font-size: 2.5vh;
+    margin: 10px;
+}
+img {
+    display: inline-block;
+    height: 1.8em;
+    position: relative;
+}
+</style>

resources/js/components/Wish.vue

@@ -55,7 +55,7 @@ function openWish() {
                         <div class="large-text-title z-index-normal" :style="'color: hsl(' + wish.color + ', 20%, 50%);'">
                             Lorem Ipsum
                         </div>
-                        <div class="z-index-normal" style="text-align: left;">
+                        <div class="z-index-normal large-text-normal">
                             {{ wish.title }}
                         </div>
                     </div>
@@ -75,6 +75,10 @@ function openWish() {
     width: 100%;
     filter: opacity(20%);
 }
+.large-text-normal {
+    text-align: left;
+    line-height: normal;
+}
 .z-index-normal {
     z-index: 10;
 }
@@ -111,16 +115,16 @@ img.cursor{
     text-transform: uppercase;
     text-align: left;
     font-size: 2.3vh;
-    margin-top: 15px;
+    margin-top: 5px;
 }
 .large-icon {
     text-align: center;
     display: block;
-    max-width: 100%;
-    max-height: 100%;
-    width: auto;
+    width: 100%;
+    height: 100%;
+    margin-top: auto;
+    margin-bottom: auto;
 
-    margin: 10px;
 }
 .large-text {
     display: flex;

resources/js/components/WishPanel.vue

@@ -27,13 +27,12 @@ onMounted(() => {
         <p>
             {{ wish.description }}
         </p>
-        <br>
         <div class="button-container">
             <SButton @click="emit('closeWish')">
                 Promise
             </SButton>
             <SButton @click="emit('closeWish')">
-                Back
+                Close
             </SButton>
         </div>
     </div>

resources/js/pages/HomeView.vue

@@ -95,11 +95,9 @@ onMounted(() => {
 .v-enter-active {
   transition: opacity 0.5s ease;
 }
-
 .v-enter-from {
   opacity: 0;
 }
-
 .desktop-container {
   display: grid;
   grid-template-columns: repeat(3, 1fr);