Add mobile styling

resources/assets/sass/components/_menu.scss

@@ -2,9 +2,11 @@
 @use "../abstracts/mixin" as *;
 
 .menu_container {
-  height: 75px;
-  margin-bottom: 20px;
-  background-image: linear-gradient(to right, #0102b0, #4090e3);
+  @media (min-width: 767px) {
+    height: 75px;
+    margin-bottom: 20px;
+    background-image: linear-gradient(to right, #0102b0, #4090e3);
+  }
 
   nav {
     display: flex;
@@ -97,11 +99,11 @@
     }
   }
 }
-.top_menu_container {
+.top_menu_container, .menu_mobile_container {
   height: 50px;
   @include container;
 
-  ul {
+  ul.right_menu {
     float: right;
     @include reset-list;
 
@@ -145,7 +147,7 @@
 
         .search_input {
           border: 1px solid #efefef;
-          border-radius: 5px;
+          border-radius: 3px;
           background-color: #fff;
           height: 29px;
           font-family: Montserrat, serif;
@@ -164,8 +166,60 @@
     }
   }
 }
+.menu_mobile_container {
+  height: 30px;
+  padding: 12px 0;
+  .mobile_menu_button a {
+    display: block;
+    width: 20px;
+    height: 21px;
+    padding: 4px 10px 4px 11px;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+    background-color: #10229c;
+    margin-right: 12px;
+    i {
+      color: white;
+      font-size: 19px;
+    }
+  }
+  .logo_mobile {
+    height: 100%;
+    img {
+      height: 100%;
+    }
+  }
+  .right_menu_container {
+    background-color: #10229c;
+    margin-left: 12px;
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+    flex-grow: 1;
+    ul.right_menu {
+      li {
+        padding: 5px 19px;
+        margin: 0;
 
-.menu-submenu {
+        .search_form {
+          height: 25px;
+          .search_input {
+            height: 18px;
+            width: 80px;
+          }
+          .search_submit {
+            margin: 0 6px;
+          }
+        }
+
+        .search_button {
+          margin: 0;
+        }
+      }
+    }
+  }
+}
+
+.menu-submenu, .mobile_menu_container {
   position: absolute;
 
   > a {
@@ -222,6 +276,7 @@
         top: 15px;
         -webkit-transform: rotate(270deg);
         transform: rotate(270deg);
+        transition: 0.6s ease;
       }
       &.opened:after {
         -webkit-transform: rotate(0deg);
@@ -230,3 +285,100 @@
     }
   }
 }
+
+.mobile_menu_container {
+  display: none;
+  position: fixed;
+  z-index: 15;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.8);
+  nav {
+    background: white;
+    width: fit-content;
+    height: 100vh;
+    padding: 20px;
+    min-width: 70vw;
+    max-width: 100vw;
+    overflow: hidden;
+
+    ul, li, li a {
+      width: 100%;
+    }
+    ul > li > ul > li {
+      padding-left: 20px;
+      width: CALC(100% - 20px);
+    }
+
+    .submenu {
+      display: none;
+    }
+
+    li.has_submenu {
+      position: relative;
+      &:after {
+        -webkit-font-smoothing: antialiased;
+        display: var(--fa-display, inline-block);
+        font-style: normal;
+        font-variant: normal;
+        line-height: 1;
+        text-rendering: auto;
+        font-family: "Font Awesome 6 Free";
+        font-weight: 900;
+        content: "\f0d7";
+        position: absolute;
+        right: 0;
+        top: 15px;
+        -webkit-transform: rotate(270deg);
+        transform: rotate(270deg);
+      }
+      &.opened:after {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+      }
+    }
+  }
+}
+.logo_close_button {
+  display: flex;
+  height: 42px;
+  margin-bottom: 37px;
+  .logo {
+    flex-grow: 1;
+    height: 42px;
+    a {
+      height: 100%;
+      padding: 0;
+      border-bottom: none;
+      img {
+        height: 100%;
+      }
+    }
+  }
+  .mobile_close_menu_button {
+    height: 30px;
+    width: 22.5px;
+    padding: 4px;
+    a {
+      font-size: 30px;
+      color: #1d2bb2;
+      padding: 0;
+      border-bottom: none;
+    }
+  }
+}
+.mobile_menu_container nav li.has_submenu {
+  &:after {
+    content: "\f054";
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+    transition: 0.6s ease;
+  }
+
+  &.opened:after {
+    -webkit-transform: rotate(90deg);
+    transform: rotate(90deg);
+  }
+}