WIP

public/src/App.vue

@@ -1,22 +1,72 @@
 <script setup lang="ts">
-import { RouterLink, RouterView } from 'vue-router'
+import {RouterLink, RouterView} from 'vue-router'
 import HelloWorld from './components/HelloWorld.vue'
+import LoginPanel from "@/components/LoginPanel.vue";
+import {ref} from "vue";
+
+const showPopup = ref(false)
+
 </script>
 
 <template>
-  <header>
-      Miniplan
-  </header>
+    <nav>
+        <div class="left">
+            Miniplan
+        </div>
+        <div class="right">
+            <button class="flat" @click="showPopup = true"><i>login</i> Einloggen</button>
+        </div>
+    </nav>
 
-  <RouterView />
+    <RouterView/>
+    <div class="popup-container" :class="{show: showPopup}" @click.self="showPopup = false">
+        <LoginPanel :active="showPopup"/>
+    </div>
 </template>
 
 <style scoped lang="less">
-header{
+nav {
     display: flex;
-    padding: 20px 32px;
+    align-items: center;
+    padding: 10px 32px;
     border-bottom: 1px solid #d7d5d5;
     font-weight: 700;
+
+    .left {
+        width: 100%;
+    }
+
+    .right {
+        flex-shrink: 0;
+    }
+}
+
+.popup-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 100;
+    background: rgba(0, 0, 0, 0.3);
+    transition: 200ms opacity;
+    opacity: 0;
+    pointer-events: none;
+
+    * {
+        pointer-events: none;
+    }
+
+    &.show{
+        pointer-events: auto;
+        * {
+            pointer-events: auto;
+        }
+        opacity: 1;
+    }
 }
 
 </style>