Added the link and icon for Discord and adjusted the style of the top bar

Author: vamera

source/_themes/wazuh_doc_theme_v3/src/scss/components/_brand.scss

@@ -8,6 +8,7 @@
   position: relative;
   display: flex;
   align-content: flex-end;
+  padding-bottom: 2px;
 
   img {
     width: auto;

source/_themes/wazuh_doc_theme_v3/src/scss/components/_navbar-menu.scss

@@ -10,9 +10,48 @@ header {
 
   .navbar-nav .nav-item {
     .nav-link {
+      display: inline;
       padding: 24px 10px;
       font-weight: 500;
     }
+    &.install,
+    &.login {
+      flex-grow: 0;
+      .nav-link {
+        display: flex;
+        align-items: center;
+      }
+    }
+    &.login {
+      svg {
+        width: 13px;
+        height: 19px;
+      }
+      .nav-link {
+        @include media-only(xl,wzh-xl) {
+          width: 111.5px;
+        }
+        @include media-only(wzh-xl,xxl) {
+          width: 106.5px;
+        }
+        @include media-min(xxl) {
+          width: 112.1px;
+        }
+      }
+    }
+    &.install {
+      .nav-link {
+        @include media-only(xl,wzh-xl) {
+          width: 141.8px;
+        }
+        @include media-only(wzh-xl,xxl) {
+          width: 136.8px;
+        }
+        @include media-min(xxl) {
+          width: 146px;
+        }
+      }
+    }
   }
 }
 
@@ -66,7 +105,7 @@ header {
     border: 1px solid;
     border-radius: 10px;
     position: absolute;
-    top: -5px!important;
+    top: 20px!important;
     &::before {
       position: absolute;
       top: -9px;
@@ -95,7 +134,7 @@ header {
   .navbar-nav {
     background-color: $light-color-base-space;
     .nav-link {
-      color: $light-color-main-text;
+      color: $light-color-main-text-extra;
       &.active,
       &:hover,
       &:focus,
@@ -111,7 +150,7 @@ header {
           }
         }
         svg {
-          fill: $light-color-main-text;
+          fill: $light-color-main-text-extra;
         }
       }
     }
@@ -123,7 +162,7 @@ header {
         border-color: $light-color-primary-lighter;
       }
       .dropdown-item {
-        color: $light-color-main-text;
+        color: $light-color-main-text-extra;
         &:hover {
           color: $light-color-primary;
           background-color: $light-color-base-space;

source/_themes/wazuh_doc_theme_v3/src/scss/components/_version-selector.scss

@@ -39,6 +39,15 @@ header {
       padding: 0 5px;
       border: none;
     }
+    @include media-only(xl, wzh-xl) {
+      width: 263px;
+    }
+    @include media-only(wzh-xl, xxl) {
+      width: 253px;
+    }
+    @include media-min(xxl) {
+      width: 268px;
+    }
     &:focus  {
       box-shadow: none;
     }

source/_themes/wazuh_doc_theme_v3/src/scss/pages/index.scss

@@ -24,18 +24,34 @@
 header {
 
   .mobile-secondary-header {
+    .navbar-nav {
+      @include media-only(xl,wzh-xl) {
+        max-width: 900px;
+      }
+      @include media-only(wzh-xl,xxl) {
+        max-width: 930px;
+      }
+      @include media-min(xxl) {
+        max-width: 1000px;
+      }
+    }
     .nav-item {
       &.install,
       &.login { 
         a {
           @include media-min(xl) {
             border-radius: 8px;
             border-width: 1.5px;
-            font-size: 15px;
             height: 40px;
             padding: 0 20px;
             margin-left: 10px;
           }
+          @include media-only(xl,xxl) {
+            font-size: 15px;
+          }
+          @include media-min(xxl) {
+            font-size: 16px;
+          }
         }
       }
       &.install {

source/_themes/wazuh_doc_theme_v3/src/scss/parts/_header.scss

@@ -36,17 +36,17 @@ header {
     }
     svg {
       height: 33px;
-      width: 144px;
+      width: 173px;
+      @include media-max (xl) {
+        width: 127px;
+        height: 26px;
+      }
       @include media-max(sm){
         max-width: 180px;
       }
       @include media-only(xl,wzh-xl){
-        height: 27px;
-        width: 127px;
-      }
-      @include media-min(wzh-xl){
-        height: 34px;
-        width: 170px;
+        height: 33px;
+        width: 144px;
       }
     }
   }
@@ -71,6 +71,15 @@ header {
       flex-shrink: 0;
       flex-wrap: nowrap;
     }
+    @include media-only(xl,wzh-xl) {
+      width: 956px;
+    }
+    @include media-only(wzh-xl,xxl) {
+      width: 996px;
+    }
+    @include media-min(xxl) {
+      width: 1146px;
+    }
     .container {
       @include media-min(xl){
         display: flex;
@@ -86,6 +95,16 @@ header {
         flex-direction: row;
         align-items: center;
         margin-left: auto;
+        width: calc(100% - 30px);
+      }
+      @include media-only(xl,wzh-xl) {
+        max-width: calc(900px - 273px);
+      }
+      @include media-only(wzh-xl,xxl) {
+        max-width: calc(930px - 263px);
+      }
+      @include media-min(xxl) {
+        max-width: calc(1000px - 278px);
       }
     }
     .nav-item {
@@ -101,7 +120,13 @@ header {
           padding-left: 8px;
           padding-right: 8px;
         }
+        @include media-only(wzh-xl,xxl){
+          font-size: 16px;
+          padding-left: 9px;
+          padding-right: 9px;
+        }
         &.dropdown-toggle {
+          padding: 0 10px;
           @include media-only(xl,wzh-xl){
             padding-left: 8px;
             padding-right: 2px;
@@ -296,7 +321,7 @@ header {
           width: 202px;
         }
         @include media-only (xl,wzh-xl) {
-          width: 263px;
+          width: 262px;
         }
         @include media-only (wzh-xl,xxl) {
           width: 253px;