Merge pull request #6 from Bappy4u/feature/AV-5-design-navbar

Navbar has been designed

Author: mohibur11

src/App.vue

@@ -14,12 +14,15 @@ export default {
 </script>
 
 <style>
+    body {
+        margin: 0;
+    }
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-  margin-top: 60px;
+
 }
 </style>

src/components/menu.vue

@@ -39,21 +39,55 @@
 
 <style>
     .top-menu {
-        background-color: #f0f0f0;
+        background-color: #333;
+
+        display: flex;
+        align-items: center;
+
     }
 
     nav ul {
         list-style-type: none;
+        margin: 0 20px;
         padding: 0;
-        margin: 0;
+        display: flex;
+        height: 100%;
+        max-width: 90vw;
     }
 
     nav ul li {
-        display: inline-block;
-        padding: 10px;
+        margin-right: 10px;
+        opacity: 0;
+        transform: translateY(-20px);
+        animation: slideIn 0.5s forwards;
+        animation-delay: calc(var(--index) * 0.1s);
+        height: 100%;
+    }
+
+    nav ul li a {
+        color: #fff;
+        text-decoration: none;
+        padding: 15px;
+        transition: color 0.3s, background-color 0.3s;
+        height: 100%;
+        display: flex;
+        align-items: center;
+    }
+
+    nav ul li a:hover {
+        color: #ffcc00;
+        background-color: #444;
+    }
+
+    nav ul li.active a {
+        color: #ffcc00;
+        background-color: #444;
     }
 
-    nav ul li.active {
-        background-color: #ccc;
+    @keyframes slideIn {
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
     }
 </style>