feat: change menu style

src/assets/stylesheets/dropdown.scss

@@ -8,6 +8,18 @@
   src: url(../font/LeagueSpartan-Medium.ttf);
 }
 
+.mobile {
+  position: fixed!important;
+  padding: 20px!important;
+  padding: 20px!important;
+  background-color: rgb(35, 35, 35)!important;
+  z-index: 999!important;
+  width: 100%!important;
+  box-sizing: border-box;
+  height: 100vh!important;
+  justify-content: start!important;
+}
+
 @media screen and (max-width: 650px) {
   .c {
     position: fixed;
@@ -22,22 +34,28 @@
     // animation: slide .6s ease;
     // animation-iteration-count: 1;
   }
+  .home__content__info {
+    .c {
+      padding: 0;
+      width: 100%;
+    }
+  }
 
   .dd {
     display: flex;
     flex-direction: column;
-    width: 95%;
-    margin-top: 10%;
+    width: 100%;
+    margin-top: 45px;
   }
 
   li {
-    margin-bottom: 10%;
-    margin-left: 8px;
+    margin-bottom: 20px;
+    // margin-left: 8px;
   }
 
   .dd__link {
     color: white;
-    font-size: 40px;
+    font-size: 24px;
     padding: 0;
     width: 100%;
     display: flex;
@@ -47,12 +65,16 @@
     position: relative;
     width: 90%;
     cursor: pointer;
+    line-height: 33px;
+    height: 33px;
   }
 
   .dd__link_arrow {
     text-align: center;
     color: white;
-    padding-top: 7px;
+    // padding-top: 7px;
+    height: 33px;
+    line-height: 33px;
     width: 10%;
     font-size: 30px;
     cursor: pointer;
@@ -103,7 +125,7 @@
 
 @keyframes slideIn {
   0% {
-    margin-top: 100vh;
+    margin-top: -100vh;
     opacity: 0%;
   }
   100% {
@@ -118,7 +140,7 @@
     opacity: 100%;
   }
   100% {
-    margin-top: 100vh;
+    margin-top: -100vh;
     opacity: 0%;
   }
 }

src/assets/stylesheets/home.scss

@@ -77,6 +77,12 @@
   z-index: 0;
 }
 
+.dropdown {
+  position: fixed;
+  z-index: 999;
+  background-color: #232323;
+}
+
 @media screen and (max-width: 650px) {
   // Phones
   .home__content__panel__title {

src/assets/stylesheets/navbar.scss

@@ -170,6 +170,10 @@ li a:hover {
   display: none;
 }
 
+.hamburger-react {
+  display: none;
+}
+
 @media screen and (max-width: 912px) {
   // Tablets
 }
@@ -185,6 +189,10 @@ li a:hover {
     display: none;
   }
 
+  .hamburger-react {
+    color: #fff;
+    display: block;
+  }
   .navbar__hamburger {
     display: flex;
     flex-direction: column;