From 930af55e90388f8ce9b1228d60cc0ec9a3dce969 Mon Sep 17 00:00:00 2001
From: Suha Siddiqui <suhasid@my.yorku.ca>
Date: Thu, 16 Jun 2022 11:31:24 -0400
Subject: [PATCH] integrated drop down menu but not working

---
 src/App.vue                 | 33 +++++++++++++++++++-
 src/components/Dropdown.vue | 53 ++++++++++++++++++++++++++++++++
 src/components/Navbar.vue   | 60 +++++++++++++++++++++++++++++++++++++
 3 files changed, 145 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Dropdown.vue
 create mode 100644 src/components/Navbar.vue

diff --git a/src/App.vue b/src/App.vue
index 1cbf62f..8701b8e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,6 +8,9 @@
     <router-link class="rlink" to="/">tf</router-link>
     |
     <router-link class="rlink" to="/about">About</router-link>
+    <div id="application">
+      <Navbar />
+    </div>
   </p>
 
   <!-- route outlet -->
@@ -15,11 +18,19 @@
   <router-view></router-view>
 </template>
 
-<script setup lang="ts">
+<script>
+import Navbar from './components/Navbar.vue';
+export default {
+  name: 'application',
+  components: {
+    Navbar
+  },
+};
 // This starter template is using Vue 3 <script setup> SFCs
 // Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
 </script>
 
+
 <style lang="sass">
 @import "css/colors"
 @import "css/global"
@@ -38,3 +49,23 @@
   max-width: 800px
   margin: auto
 </style>
+
+<style>
+*{
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body{
+  font-family: 'montserrat', sans-serif;
+}
+
+header{
+  width: 100vw;
+  background-color: #222;
+  padding: 15px;
+
+}
+</style>
+
diff --git a/src/components/Dropdown.vue b/src/components/Dropdown.vue
new file mode 100644
index 0000000..59f6365
--- /dev/null
+++ b/src/components/Dropdown.vue
@@ -0,0 +1,53 @@
+<template>
+  <div class="menu-item" @click="isOpen = !isOpen">
+    <a href="#">
+      {{ title }}
+    </a>
+    <svg viewBox="0 0 1030 638" width="10">
+      <path d="M1017 68L541 626q-11 12-26 12t-26-12L13 68Q-3 49 6 24.5T39 0h952q24 0 33 24.5t-7 43.5z" fill="#FFF"></path>
+    </svg>
+    <transition name="fade" appear>
+      <div class="sub-menu" v-if="isOpen">
+        <div v-for="(item, i) in items" :key="i" class="menu-item">
+          <a :href="item.link">{{ item.title }}</a>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Dropdown',
+  props: ['title', 'items'],
+  data () {
+    return {
+      isOpen: false
+    }
+  }
+}
+</script>
+
+<style>
+nav .menu-item svg {
+  width: 10px;
+  margin-left: 10px;
+}
+nav .menu-item .sub-menu {
+  position: absolute;
+  background-color: #222;
+  top: calc(100% + 18px);
+  left: 50%;
+  transform: translateX(-50%);
+  width: max-content;
+  border-radius: 0px 0px 16px 16px;
+}
+.fade-enter-active,
+.fade-leave-active {
+  transition: all .5s ease-out;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
new file mode 100644
index 0000000..755bbc7
--- /dev/null
+++ b/src/components/Navbar.vue
@@ -0,0 +1,60 @@
+<template>
+  <nav>
+    <Dropdown title="Level" :items="levels" />
+  </nav>
+</template>
+
+<script>
+import Dropdown from './src/components/Dropdown.vue';
+export default {
+  name: 'Navbar',
+  components: {
+    Dropdown
+  },
+  data () {
+    return {
+      levels: [
+        {
+          title: 'Beginner',
+          link: '#'
+        },
+        {
+          title: 'Expert',
+          link:'#'
+        },
+        {
+          title: 'Original',
+          link: '#'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style>
+nav {
+  display: flex;
+  align-items: center;
+  justify-content: left;
+}
+nav .menu-item {
+  color: #71bfed;
+  background-color: rgb(79, 76, 76);
+  padding: 10px 20px;
+  position: relative;
+  text-align: center;
+  border-bottom: 3px solid transparent;
+  display: flex;
+  transition: 0.4s;
+}
+nav .menu-item.active,
+nav .menu-item:hover {
+  background-color: rgb(39, 38, 38);
+  border-bottom-color: #71bfed;
+}
+nav .menu-item a {
+  color: inherit;
+  text-decoration: none;
+}
+</style>
\ No newline at end of file