restore composer.json, add mysqli extension

resources/sass/layout/_navigation.scss

@@ -0,0 +1,177 @@
+.topbar {
+  & > div {
+    display: flex;
+    align-items: center;
+  }
+
+  &-top,
+  &-bottom {
+    .container {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+  }
+
+  &-top {
+    border-bottom: 1px solid #00000015;
+    padding: 12px 0;
+    @include mq("tablet-wide", max) {
+      border-bottom-color: transparent;
+      position: absolute;
+      background-color: #fff;
+      top: 0;
+      left: 0;
+      z-index: 555;
+      transition: 0.2s transform ease-out;
+      transform: translateX(0px);
+      left: -100%;
+      width: 84%;
+      padding-top: 18px;
+      padding-bottom: 18px;
+      &-active {
+        transform: translateX(118%);
+      }
+    }
+    .container {
+      @include mq("tablet", max) {
+        flex-direction: column;
+      }
+    }
+
+    &__left {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      @include mq("tablet", max) {
+        width: 100%;
+        padding: 0 15px;
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        top: 0;
+        height: 65px;
+        background-color: #fff;
+      }
+
+      .lang {
+        font-size: 18px;
+
+        &-list {
+          left: -6px;
+          text-align: center;
+        }
+      }
+    }
+
+    &__right {
+      a {
+        font-size: 14px;
+        font-weight: normal;
+        text-align: right;
+        color: rgb(0, 0, 0);
+        &:not(:last-of-type) {
+          margin-right: 15px;
+
+          @include mq("tablet", max) {
+            margin-right: 5px;
+          }
+        }
+        &:hover {
+          color: $my-orange;
+          text-decoration: underline;
+        }
+      }
+    }
+
+    .just-call {
+      i {
+        color: #333 !important;
+        &::after {
+          display: none;
+        }
+      }
+    }
+  }
+
+  &-bottom {
+    padding: 20px 0;
+
+    display: flex;
+    align-items: center;
+
+    .container {
+      @include mq("tablet-wide", max) {
+        justify-content: flex-start;
+        align-items: center;
+        & > * {
+          margin-right: 40px;
+        }
+      }
+      @include mq("tablet", max) {
+        & > * {
+          margin-right: 20px;
+        }
+      }
+      @include mq("phone-small", max) {
+        & > * {
+          margin-right: 3px;
+        }
+      }
+    }
+
+    .sign-in {
+      position: absolute;
+      right: 40px;
+
+      img {
+        width: 27px;
+        height: 27px;
+        object-fit: contain;
+        object-position: center;
+      }
+    }
+
+    &--bottom {
+      justify-content: space-between;
+      align-items: center;
+      order: 11;
+      margin-left: auto !important;
+      margin-right: auto !important;
+      position: absolute;
+      z-index: 222;
+      bottom: 0px;
+      width: 84%;
+      background: white;
+      transition: 0.2s transform ease-out;
+      transform: translateX(0px);
+      left: -108%;
+      &-active {
+        transform: translateX(127%);
+      }
+      padding: 10px 15px;
+    }
+  }
+
+  .navbar-toggler {
+    @include mq("tablet-wide", min) {
+      display: none;
+    }
+    margin: 0 !important;
+    padding: 0 !important;
+    position: absolute;
+    right: 15px;
+    z-index: 122;
+    transition: unset;
+    // &-active {
+    //   top: 15px;
+    //   color: white;
+    //   .hamburger.is-active .hamburger-inner,
+    //   .hamburger.is-active .hamburger-inner::after,
+    //   .hamburger.is-active .hamburger-inner::before {
+    //     background-color: #fff;
+    //   }
+    // }
+  }
+}