finished home page

app.vue

@@ -1,5 +1,5 @@
 <template>
-  <NuxtLayout :name="layout">
+  <!--<NuxtLayout :name="layout">--><NuxtLayout>
     <NuxtPage />
   </NuxtLayout>
 </template>
@@ -8,7 +8,7 @@
 
 <script setup>
 
-  const layout = "empty";
+  //const layout = "empty";
 
 </script>
 

components/Dashboard.vue

@@ -0,0 +1,78 @@
+<template>
+  <section class="dashboard">
+    <h2 class="heading">My tasks</h2>
+    <div class="shortcuts">
+      <input type="button" id="maintenance-visits" value="My Maintenance Visits">
+      <input type="button" id="production-orders" value="My Production Orders">
+      <input type="button" id="solutions" value="My Solutions">
+      <input type="button" id="issue-slips" value="My Issue Slips">
+    </div>
+  </section>
+</template>
+
+
+
+<script>
+
+export default {
+  name: "Dashboard",
+  
+}
+
+</script>
+
+  
+  
+  
+<style scoped>
+  
+  .dashboard {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    align-self: stretch;
+    width: 100%;
+    padding: 30px 50px 50px;
+    gap: 20px;
+    border-radius: 10px;
+    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    background-color: #2c2c2c;
+  }
+  
+  .heading {
+    color: #fff;
+    letter-spacing: 0.8px;
+    text-decoration-line: underline;
+    font: 400 16px/32px Overpass, sans-serif;
+  }
+  
+  .shortcuts {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-content: center;
+    padding: 10px 40px;
+    gap: 40px;
+  }
+  
+  input {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    width: 240px;
+    height: 64px;
+    border-radius: 10px;
+    padding: 15px 20px;
+    border: none;
+    color: #fff;
+    text-align: center;
+    letter-spacing: 0.7px;
+    font: 400 14px/32px Overpass, sans-serif;
+    background-color: #343434;
+  }
+  
+  
+  
+</style>

components/QuickAccess.vue

@@ -0,0 +1,84 @@
+<template>
+  <section class="quick-access">
+    <h2 class="heading">Quick Access</h2>
+    <div class="shortcuts">
+      <input type="button" id="pins" value="Pins">
+      <!--<input type="button" id="maintenance-visits" value="My Maintenance Visits">
+      <input type="button" id="production-orders" value="My Production Orders">
+      <input type="button" id="solutions" value="My Solutions">
+      <input type="button" id="issue-slips" value="My Issue Slips">-->
+    </div>
+  </section>
+</template>
+
+
+<script>
+
+export default {
+  name: "QuickAccess",
+  
+}
+
+</script>
+
+
+
+
+<style scoped>
+  
+  .quick-access {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    align-self: stretch;
+    width: 100%;
+    padding: 30px 50px 50px;
+    gap: 20px;
+    border-radius: 10px;
+    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    background-color: #2c2c2c;
+  }
+  
+  .heading {
+    color: #fff;
+    letter-spacing: 0.8px;
+    text-decoration-line: underline;
+    font: 400 16px/32px Overpass, sans-serif;
+  }
+  
+  .shortcuts {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-content: center;
+    padding: 10px 40px;
+    gap: 40px;
+  }
+  
+  input {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    width: 240px;
+    height: 64px;
+    border-radius: 10px;
+    padding: 15px 20px;
+    border: none;
+    color: #fff;
+    text-align: center;
+    letter-spacing: 0.7px;
+    font: 400 14px/32px Overpass, sans-serif;
+    background-color: #343434;
+  }
+  input#pins {
+    border: 1px dashed #454545;
+    color: #8e8e8e;
+    font: 400 14px/32px Overpass, sans-serif;
+    background-color: #34343400;
+  }
+  
+  
+  
+</style>

layouts/Navigationbar.vue

@@ -69,7 +69,7 @@ export default {
   name: "Navigationbar",
   data() {
     return {
-      darkMode: false,
+      darkMode: true,
       isExpanded: true,
       darkStylesImg: {
         filter: 'invert(100%)',
@@ -111,19 +111,22 @@ aside {
 
 aside.is-expanded {
   width: 238px;
+  transition: 0.5s ease-out;
 }
 
 .is-expanded .label {
   opacity: 1;
-  transition: 0.3s ease-out;
+  transition: 0.5s ease-out;
 }
 
 .is-not-expanded .darkStylesIcon {
   transform: rotate(180deg);
+  transition: 0.5s ease-out;
 }
 
 .is-not-expanded .lightStylesIcon {
   transform: rotate(180deg);
+  transition: 0.5s ease-out;
 }
 
 

pages/home.vue

@@ -2,10 +2,11 @@
   <Navigationbar />
   <section id="content">
     <div id="content-header">
-      <pre id="page-name">Pagename</pre>
+      <pre id="page-name">Home</pre>
     </div>
     <div id="content-body">
-      <!--<slot />-->
+      <Dashboard />
+      <QuickAccess />
     </div>
   </section>
 </template>
@@ -18,12 +19,16 @@
 </script>
 
   <script>
-  import Navigationbar from "./Navigationbar.vue";
+  import Navigationbar from "../layouts/Navigationbar.vue";
+  import Dashboard from "../components/Dashboard.vue";
+  import QuickAccess from "../components/QuickAccess.vue";
   
   export default {
       name: "Page",
       components: {
         Navigationbar,
+        Dashboard,
+        QuickAccess,
       }
   }
   
@@ -58,7 +63,7 @@
     #page-name {
       color: #fff;
       letter-spacing: 1.2px;
-      font: italic 400 24px/125% Overpass, -apple-system, Roboto, Helvetica,
+      font: 400 24px/125% Overpass, -apple-system, Roboto, Helvetica,
         sans-serif;
     }
   
@@ -69,16 +74,7 @@
       gap: 20px;
       margin-bottom: 10px;
       border-radius: 10px;
-      box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
-      background-color: #2c2c2c;
     }
   
-    slot {
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-      gap: 20px;
-      padding: 20px 30px;
-    }
     
   </style>

pages/login.vue

@@ -40,8 +40,8 @@ export default {
   #content {
     display: flex;
     flex-direction: column;
-    align-items: stretch;
+    align-items: center;
-    justify-content: stretch;
+    justify-content: center;
     width: 100%;
     height: 100%;
     gap: 10px;
@@ -68,8 +68,8 @@ export default {
     flex-direction: column;
     align-items: center;
     justify-content: flex-start;
-    width: 100%;
+    width: fit-content;
-    height: 100%;
+    height: fit-content;
     gap: 20px;
     margin-bottom: 10px;
     border-radius: 10px;