Nav bar updates

frontend/src/App.vue

@@ -22,4 +22,5 @@ export default {
     </q-layout>
 </template>
 
+
 <style scoped></style>

frontend/src/components/AFooter.vue

@@ -14,7 +14,7 @@ export default {
                 <a href="https://github.com/Ryzon3/DegreeDoctor">
                     <q-icon id="icon" name="fa-brands fa-github" size="35px" />
                 </a>
-                <p id="copy">&copy; 2022 Degree Doctor</p>
+                <p id="copy">&copy; 2023 Degree Doctor</p>
             </q-toolbar-title>
         </q-toolbar>
     </q-footer>

frontend/src/components/AHeader.vue

@@ -1,4 +1,6 @@
 <script>
+import { useImage } from "@vueuse/core";
+import { useStore } from "../stores/store";
 import DarkModeToggle from "./DarkModeToggle.vue";
 import PlansList from "./PlansList.vue";
 
@@ -15,35 +17,259 @@ export default {
 };
 </script>
 
-<template>
-    <q-header elevated class="bg-secondary text-white header" height-hint="98">
-        <q-toolbar>
-            <q-toolbar-title>
-                <q-avatar @click="sendQuiz()">
-                    <img src="../assets/Degree_Doctor_logo.png" />
-                </q-avatar>
-                <a @click="sendQuiz()"> Degree Doctor</a>
-            </q-toolbar-title>
-
-            <PlansList />
-            <DarkModeToggle />
-        </q-toolbar>
-    </q-header>
+ <template>
+    <nav> 
+        <div class="navbar">
+            <div class="left">
+                <div class="image-container">
+                    <router-link to="/quiz" id="logo"><img src="../assets/Degree_Doctor_logo.png"/></router-link>
+                </div>
+                <div class="DD">
+                    <RouterLink to="/" id="title">Degree Doctor</RouterLink>
+                    <div class="fading-effect"></div>
+                </div>
+            </div>
+            <div class="other">
+                <DarkModeToggle/>
+            </div>
+        </div>
+    </nav>  
 </template>
 
+
 <style scoped>
-.card-contain {
+.navbar{
     display: flex;
-    flex-direction: row;
+    background:#835eba;
+    justify-content:space-between;
     align-items: center;
-    justify-content: space-between;
-    padding-right: 1em;
+    height: 5rem;
 }
-.header {
+.left{
     display: flex;
-    justify-content: center;
+    flex-direction: row;
     align-items: center;
-    max-height: 54px;
-    height: 100%;
+    padding-left: 17em;
+}
+img{
+    width: 4em;
+    margin-left: -4em;
+    margin-top: 0em;
+
+
+}
+#title{
+    display:flex;
+    color:WHITE;
+    font-weight: 500;
+    text-decoration: none;
+    font-size: 1.2rem;
+    padding-bottom: 3px;
+    justify-content: space-around;
+    margin-left: 3em;
+    opacity: 1;
+}
+.other{
+    padding-right: 17em;
+}
+/* .image-container {
+  position: absolute;
+  top: 3.5%;
+  right: 20%;
+  transform: translate(-50%,-50%);
+} */
+/* .image-container img {
+  -webkit-filter: drop-shadow(-4px 5px 5px rgba(0,0,0,0.6));
+  filter: drop-shadow(-4px 5px 5px rgba(0,0,0,0.6));
+  animation: image-slide 4s cubic-bezier(.5,.5,0,1);
+  animation-fill-mode: forwards;
+}
+
+@media screen and (min-width: 2560px){
+    @keyframes image-slide {
+        0% { transform: translateX(-730px) scale(0); }
+        60% { transform: translateX(-730px) scale(1); }
+        90% { transform: translateX(-1550px) scale(1); }
+        100% { transform: translateX(-1550px) scale(1); }  
+    }
+    @keyframes fade-in{
+        from {
+            opacity: 0; 
+        }
+        to {
+            opacity: 1; 
+        }
+    }
+    .navbar{
+        height: 8em;
+    }
+    img{
+        width:5em;
+        margin-top: 3em;
+    }
+    #title{
+        font-size:2em;
+        margin-left: 10em;
+        animation-name: fade-in;
+        animation-duration: 1s;
+        animation-fill-mode: forwards;
+        animation-delay: 3000ms;
+    }
+    .other{
+        padding-right: 29em;
+
+    }
+    DarkModeToggle{
+        width: 2em;
+    }
+
+
+}
+
+@media screen and (max-width: 1440px){
+    @keyframes image-slide {
+        0% { transform: translateX(-400px) scale(0); }
+        60% { transform: translateX(-400px) scale(1); }
+        90% { transform: translateX(-875px) scale(1); }
+        100% { transform: translateX(-875px) scale(1); }  
+    }
+    @keyframes fade-in{
+        from {
+            opacity: 0; 
+        }
+        to {
+            opacity: 1; 
+        }
+    }
+    #title{
+        animation-name: fade-in;
+        animation-duration: 1s;
+        animation-fill-mode: forwards;
+        animation-delay: 2750ms;
+    }
+    img{
+        margin-top:2em;
+    }
+
+
+}
+@media screen and (min-width: 1440px){
+    @keyframes image-slide {
+        0% { transform: translateX(-400px) scale(0); }
+        60% { transform: translateX(-400px) scale(1); }
+        90% { transform: translateX(-900px) scale(1); }
+        100% { transform: translateX(-900px) scale(1); }  
+    }
+    @keyframes fade-in{
+        from {
+            opacity: 0; 
+        }
+        to {
+            opacity: 1; 
+        }
+    }
+    #title{
+
+        animation-name: fade-in;
+        animation-duration: 1s;
+        animation-fill-mode: forwards;
+        animation-delay: 3000ms;
+    }
+    img{
+        margin-top:1em;
+    }
+
+
+
+
+}
+@media screen and (max-width: 1024px){
+    @keyframes image-slide {
+        0% { transform: translateX(-275px) scale(0); }
+        60% { transform: translateX(-275px) scale(1); }
+        90% { transform: translateX(-600px) scale(1); }
+        100% { transform: translateX(-600px) scale(1); }  
+    }
+    @keyframes fade-in{
+        from {
+            opacity: 0; 
+        }
+        to {
+            opacity: 1; 
+        }
+    }
+    #title{
+        margin-left: 0em;
+        animation-name: fade-in;
+        animation-duration: 1s;
+        animation-fill-mode: forwards;
+        animation-delay: 3000ms;
+    }
+    .other{
+        padding-right: 11em;
+    }
+
+
+
+}
+@media screen and (max-width: 768px){
+    @keyframes image-slide {
+        0% { transform: translateX(-200px) scale(0); }
+        60% { transform: translateX(-200px) scale(1); }
+        90% { transform: translateX(-425px) scale(1); }
+        100% { transform: translateX(-425px) scale(1); }  
+    }
+    @keyframes fade-in{
+        from {
+            opacity: 0; 
+        }
+        to {
+            opacity: 1;
+        }
+    }
+    #title{
+        margin-left: -2em;
+        animation-name: fade-in;
+        animation-duration: 1s;
+        animation-fill-mode: forwards;
+        animation-delay: 3000ms;
+    }
+    .other{
+        padding-right: 9em;
+    }
+    img{
+        margin-top: 3em;
+        width:3.5em;
+    }
 }
-</style>
+@media screen and (max-width: 768px){
+    @keyframes image-slide {
+        0% { transform: translateX(-200px) scale(0); }
+        60% { transform: translateX(-200px) scale(1); }
+        90% { transform: translateX(-425px) scale(1); }
+        100% { transform: translateX(-425px) scale(1); }  
+    }
+    @keyframes fade-in{
+        from {
+            opacity: 0; 
+        }
+        to {
+            opacity: 1;
+        }
+    }
+    #title{
+        margin-left: -2em;
+        animation-name: fade-in;
+        animation-duration: 1s;
+        animation-fill-mode: forwards;
+        animation-delay: 3000ms;
+    }
+    .other{
+        padding-right: 9em;
+    }
+    img{
+        margin-top: 1em;
+        width:3.5em;
+    }
+} */
+</style>

frontend/src/components/Header.vue

@@ -0,0 +1,45 @@
+<script>
+import { useImage } from "@vueuse/core";
+import { useStore } from "../stores/store";
+import DarkModeToggle from "./DarkModeToggle.vue";
+import PlansList from "./PlansList.vue";
+
+export default {
+    components: {
+        DarkModeToggle,
+        PlansList,
+    },
+    methods: {
+        sendQuiz() {
+            this.$router.push("/quiz");
+        },
+    },
+};
+</script>
+
+ <template>
+ <div class="navbar">
+    <div class="left">
+        <div class="image-container">
+            <router-link to="/quiz" id="logo"><img src="../assets/Degree_Doctor_logo.png"/></router-link>
+        </div>
+    </div>
+ </div>
+</template>
+
+<style scoped>
+.image-container {
+  position: absolute;
+  top: 3.5%;
+  right: 20%;
+  transform: translate(-50%,-50%);
+  z-index: 2; /* Makes sure this is on top */
+}
+.image-container img {
+  -webkit-filter: drop-shadow(-4px 5px 5px rgba(0,0,0,0.6));
+  filter: drop-shadow(-4px 5px 5px rgba(0,0,0,0.6));
+  height: 200px;
+  animation: image-slide 4s cubic-bezier(.5,.5,0,1);
+  animation-fill-mode: forwards;
+}
+</style>