New Navigation bar is updated

assets/scss/_navbar_project.scss

@@ -1,29 +1,47 @@
 .navbar-brand {
   width: 280.06px;
-  height: 30px;
-
+  height: auto;
 }
 
-.main-nav-items {
-  margin-top: 0.75rem;
-}
+.nav-item {
+  margin-right: 0.75rem;
 
-.nav-link-external {
-  border: 1px solid $primary;
-  border-radius: 0.25rem;
-  color: $secondary;
-  background: transparent;
-  transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0s;
-}
+  #navbarDropdown {
+    color: $primary;
+    &:hover {
+      color: $secondary;
+    }
+  }
 
-.nav-link-external:hover {
-  border: 1px solid $secondary;
-  color: $primary;
-  box-shadow: $light 0 0 5px;
-  background-color: transparent;
+  .dropdown-menu {
+    padding: 0;
+    transform: translate(-15%, 2.5rem) !important;
+    border-radius: 0;
+    .dropdown-item {
+      height: 5rem;
+      width: 20rem;
+      display: flex;
+      align-items: center;
+      .logo-container {
+        height: 2rem;
+        width: 2rem;
+        margin: 1rem 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        img {
+          width: 100%;
+        }
+      }
+      span {
+        margin-left: 1rem;
+      }
+      &:hover {
+        color: $black;
+        img {
+          filter: brightness(0) invert(1);
+        }
+      }
+    }
+  }
 }
-
-.nav-link-external:active {
-  box-shadow: $primary 0 0 5px;
-  border: 1px solid $secondary;
-}

assets/scss/_search.scss

@@ -1,160 +1,112 @@
 // Search
 
 .td-search {
-    background: transparent;
-    position: relative;
-    width: 100%;
-
-    // Search icon
-    &__icon {
-      // Vertically center the content.
-      display: flex;
-      align-items: center;
-      height: 100%;
-
-      // Position this on the left of the input.
-      position: absolute;
-      left: 0.75em;
-
-      // Click-through to the underlying input.
-      pointer-events: none;
-
-      &:before {
-        @extend .fa;
-        content: fa-content($fa-var-search);
-      }
-
-      // Styling adjustments for the navbar
-      @at-root {
-        .td-navbar & {
-          color: $navbar-dark-color;
-        }
-      }
+  width: auto;
+  padding: 0;
+  border-radius: 8px;
+  border: 1px solid $white;
+  background: linear-gradient(
+    96deg,
+    rgba(217, 224, 226, 0.7) 3.53%,
+    rgba(217, 224, 226, 0) 398.97%
+  );
+  display: flex;
+  align-content: center;
+  // background-color: #EBC017;
+  position: relative;
+
+  // Search icon
+  .td-search__icon {
+    // Vertically center the content.
+    color: #fff;
+    display: flex;
+    align-items: center;
+    height: 100%;
+
+    // Position this on the left of the input.
+    position: absolute;
+    left: 0.75em;
+
+    // Click-through to the underlying input.
+    pointer-events: none;
+
+    &:not(:focus) {
+      color: #000;
     }
-
-    // Search input element
-    &__input {
-      width: 100%;
-      text-indent: 1.25em;
-
-      &:not(:focus) {
-        background: transparent;
-      }
-
-      &.form-control:focus {
-        border-color: tint-color($primary, 95%);
-        box-shadow: 0 0 0 2px tint-color($primary, 40%);
-        color: inherit;
-      }
-
-      // Styling adjustments for the navbar
-      @at-root {
-        .td-navbar & {
-          border: none;
-          color: $navbar-dark-color;
-
-          @include placeholder {
-            color: $navbar-dark-color;
-          }
-        }
-      }
+    &:before {
+      @extend .fa;
+      content: fa-content($fa-var-search);
     }
-
-    // Hide icon on focus
-    &:focus-within {
-      .td-search__icon {
-        display: none;
-      }
-
-      .td-search-input {
-        text-indent: 0px;
+  }
+
+  // Search input element
+  &__input {
+    width: 100%;
+    text-indent: 1.25em;
+    line-height: 2rem;
+    border-radius: 8px;
+
+    &:not(:focus) {
+      background: transparent;
+      &::placeholder {
+        color: #000;
       }
     }
-  
-    &:not(:focus-within) {
-      color: $input-placeholder-color;
+
+    &.form-control:focus {
+      box-shadow: 0 0 0 2px tint-color($primary, 40%);
     }
-  }
-
-  .td-sidebar .td-search--algolia {
-    display: block;
-    padding: 0 0.5rem;
-    > button {
-      margin: 0;
-      width: 100%;
+    &.form-control:not(:focus) {
+      color: #000;
     }
   }
-
-  // Offline search
-
-  .td-search--offline {
-    &:focus-within {
-      // Don't hide the search icon on focus: this gives better UX when user
-      // explores content of search-results popup and focus is lost.
-
-      .td-search__icon {
-        display: flex;
-        color: $input-placeholder-color;
-      }
-    }
+}
+
+.td-sidebar .td-search--algolia {
+  display: block;
+  padding: 0 0.5rem;
+  > button {
+    margin: 0;
+    width: 100%;
   }
-
-  .td-offline-search-results {
-    max-width: 90%;
-
-    .card {
-      margin-bottom: $spacer * 0.5;
-
-      .card-header {
-        font-weight: bold;
-      }
-    }
-
-    &__close-button {
-      // cursor: pointer;
-      float: right;
-
-      &:after {
-        @extend .fas;
-        content: fa-content($fa-var-times);
-      }
+}
+
+// Offline search
+
+.td-search--offline {
+  &:focus-within {
+    // Don't hide the search icon on focus: this gives better UX when user
+    // explores content of search-results popup and focus is lost.
+
+    .td-search__icon {
+      display: flex;
+      color: $input-placeholder-color;
     }
   }
+}
+
+.td-offline-search-results {
+  max-width: 90%;
 
-  .popover-body {
-    background-color:#2e2e31;
+  .card {
+    margin-bottom: $spacer * 0.5;
+
+    .card-header {
+      font-weight: bold;
+    }
   }
 
-  // Global Navigation Bar
-  .td-navbar{
-    min-height:6rem;
-    background-color: $body-bg !important;
-    .navbar-brand  {
-      margin: 1.25rem;
+  &__close-button {
+    // cursor: pointer;
+    float: right;
+
+    &:after {
+      @extend .fas;
+      content: fa-content($fa-var-times);
     }
-    .td-search {
-      display:flex;
-      justify-content: center;
-      align-content: center;
-      // background-color: #EBC017;
-      background-color:#2e2e31;
-      border-radius: 1rem; 
-
-
-        .td-search__input {
-          width: 100%;
-          text-indent: 1.25em;
-          border-radius: 1rem; 
-        }
-          .td-search__input:not(:focus) {
-            background: transparent;
-            border-radius: 1rem;  }
-          .td-search__input.form-control:focus {
-            color: inherit; }
-      }
-      .td-search__input.form-control:focus {
-
-        // background-color: #EBC017;
-      }    
-
-  }
+  }
+}
+
+.popover-body {
+  background-color: #2e2e31;
+}