Add menu control button

src/assets/css/constants.scss

@@ -2,4 +2,7 @@ $main-color: #00D4FF;
 $background-color: #F5F5F5;
 $font-main-color: #4D4D4D;
 $font-secondary-color: #9E9E9E;
-$focus-color: #DDDDDD
+$focus-color: #DDDDDD;
+$border-color: rgba(204, 204, 204, 0.33);
+$url-color: rgba(102, 102, 102, .8);
+$url-active-color: #ccc

src/assets/css/pages/header.scss

@@ -1,4 +1,5 @@
 @use "@/assets/css/mixins" as mixins;
+@use "@/assets/css/constants" as constants;
 
 .nav {
   display: flex;
@@ -13,7 +14,7 @@
     bottom: {
       width: 1px;
       style: solid;
-      color: rgba(204, 204, 204, .33);
+      color: constants.$border-color;
     }
   }
   animation: .5s ease both;
@@ -58,7 +59,7 @@
 
         a {
           padding: 5px 20px;
-          color: rgba(102, 102, 102, .8);
+          color: constants.$url-color;
         }
       }
 
@@ -67,7 +68,7 @@
           bottom: {
             width: 2px;
             style: solid;
-            color: #CCC;
+            color: constants.$url-active-color;
           };
         };
       }
@@ -76,6 +77,77 @@
         transform: translateY(-5px);
       }
     }
+
+    .dropdown-menu-button {
+      display: none;
+      margin: 0 20px;
+      width: 45px;
+      height: 45px;
+      justify-content: center;
+      align-items: center;
+      border-radius: 6px;
+    }
+
+    .dropdown-menu-button.active {
+      background-color: transparentize(constants.$focus-color, 0.8);
+      border: {
+        width: 1px;
+        color: constants.$focus-color;
+        style: solid;
+      };
+    }
+
+    @media screen and (max-width: 900px) {
+      .menu {
+        display: none;
+      }
+
+      .dropdown-menu-button {
+        display: flex;
+      }
+    }
+  }
+}
+
+.dropdown-menu-content {
+  display: none;
+
+  @media screen and (max-width: 900px) {
+    display: none;
+    position: fixed;
+    width: 100%;
+    top: 70px;
+    border: {
+      width: 1px;
+      color: constants.$border-color;
+      style: solid;
+    };
+    background-color: white;
+    z-index: 1;
+
+    ul {
+      li {
+        font-size: 1.2em;
+        text-align: center;
+
+        a {
+          display: block;
+          width: 100%;
+          height: 100%;
+          padding: 10px;
+        }
+
+        :hover {
+          background-color: constants.$focus-color;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 900px){
+  .dropdown-menu-content.show {
+    display: block;
   }
 }
 

src/assets/svg/menu.svg

@@ -0,0 +1 @@
+<svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="M950.784 768v72.704q0 15.36-10.24 25.6t-26.624 11.264H110.08q-15.36 0-25.6-11.264t-11.264-25.6V768q0-15.36 11.264-25.6t25.6-11.264h803.84q15.36 0 26.624 11.264t10.24 25.6z m0-292.864v73.728q0 14.336-10.24 25.6t-26.624 10.24H110.08q-15.36 0-25.6-10.24t-11.264-25.6v-73.728q0-14.336 11.264-25.6t25.6-10.24h803.84q15.36 0 26.624 10.24t10.24 25.6z m0-291.84V256q0 14.336-10.24 25.6t-26.624 11.264H110.08q-15.36 0-25.6-11.264T73.216 256V183.296q0-15.36 11.264-26.624t25.6-10.24h803.84q15.36 0 26.624 10.24t10.24 26.624z" /></svg>