Navbar fixes (#218)

docusaurus.config.js

@@ -80,11 +80,6 @@ const config = {
               },
             ],
           },
-          {
-            label: 'Fusion',
-            position: 'left',
-            href: '/docs/fusion-swap/introduction/',
-          },
           {
             label: 'Governance',
             position: 'left',
@@ -114,26 +109,28 @@ const config = {
             ],
           },
           {
-            label: 'Grants Program',
-            position: 'right',
-            href: 'https://1inch.io/foundation-grant-program/',
-          },
-          {
-            label: 'Bug bounty',
-            position: 'right',
-            href: 'https://airtable.com/shrddQOOkm3hOLuzd',
-          },
-          {
-            href: 'https://www.npmjs.com/search?q=%401inch',
-            label: 'NPM',
-            position: 'right',
-          },
-          {
-            href: 'https://github.com/1inch',
-            label: 'GitHub',
-            position: 'right',
-          },
-        ],
+            "label": "Developer links",
+            "position": "right",
+            "items": [
+              {
+                label: 'Grants Program',
+                href: 'https://1inch.io/foundation-grant-program/',
+              },
+              {
+                label: 'Bug bounty',
+                href: 'https://airtable.com/shrddQOOkm3hOLuzd',
+              },
+              {
+                href: 'https://www.npmjs.com/search?q=%401inch',
+                label: 'NPM'
+              },
+              {
+                href: 'https://github.com/1inch',
+                label: 'GitHub'
+              }
+            ]
+          }
+        ]
       },
       typesense: {
         typesenseCollectionName: '1inch-docs',

src/css/custom.css

@@ -154,17 +154,19 @@ html {
 }
 
 .navbar__brand {
-    margin-right: 48px;
+    margin-right: 32px;
 }
 
 .navbar-sidebar__brand {
     box-shadow: none;
     border-bottom: 1px solid var(--1inch-border);
+    display: grid !important;
+    grid-template-columns: 235px auto 20px;
 }
 
 .navbar__item {
     padding: 0;
-    margin-right: 32px;
+    margin-right: 24px;
     align-self: stretch;
     display: flex;
     align-items: center;
@@ -187,7 +189,6 @@ html {
 
 .navbar__item.navbar__link {
     position: relative;
-    padding-right: 14px;
 }
 
 .navbar__item.navbar__link::after,
@@ -352,6 +353,10 @@ button {
     fill: var(--1inch-bg-3);
 }
 
+button {
+    margin: 0 !important;
+}
+
 .models-control:hover {
     text-decoration: none;
 }
@@ -500,82 +505,45 @@ html[data-theme='dark'] .swagger-ui .model-toggle:after {
 }
 
 /* Adaptive START */
-@media (max-width: 1440px) {
-    .navbar__link {
-        font-size: 14px;
-        display: flex;
-        align-items: center;
-    }
-
-    .navbar__item {
-        margin-right: 16px;
-    }
-}
-
-@media (max-width: 1350px) {
-    .navbar__link {
-        font-size: 13px;
-    }
-
-    .navbar__item {
-        margin-right: 14px;
-    }
-
-    .navbar__brand {
-        margin-right: 8px;
-    }
-
-    .navbar__item.navbar__link {
-        padding-right: 8px;
-    }
-}
-
 @media (max-width: 1200px) {
     .page-container {
         margin: 0 20px;
     }
-
-    .navbar__item {
-        margin-right: 30px;
-    }
-
-    .navbar__brand {
-        margin-right: 30px;
-    }
 }
 
-@media (max-width: 1140px) {
-    .navbar__item {
-        margin-right: 20px;
+@media (max-width: 1366px) {
+    .navbar__title {
+        font-size: 18px;
     }
 
-    .navbar__brand {
-        margin-right: 20px;
+    .navbar__link {
+        font-size: 14px;
+        display: flex;
+        align-items: center;
     }
-}
 
-@media (max-width: 1080px) {
     .navbar__brand {
-        margin-right: 10px;
-    }
-
-    .navbar__link {
-        font-size: 14px !important;
+        margin-right: 24px;
     }
 }
 
-@media (max-width: 1047px) {
-    .navbar__title {
-        font-size: 18px;
-    }
-
+@media (max-width: 996px) {
     .navbar__item {
         display: none;
     }
 
+    .navbar__items {
+        gap: 16px;
+    }
+
     .navbar__toggle {
         display: block !important;
     }
+
+    .searchBox_node_modules-\@docusaurus-theme-classic-lib-theme-Navbar-Search-styles-module {
+        position: relative !important;
+        right: 0 !important;
+    }
 }
 
 @media (max-width: 600px) {
@@ -599,4 +567,10 @@ html[data-theme='dark'] .swagger-ui .model-toggle:after {
     }
 }
 
+@media (max-width: 400px) {
+    .navbar-sidebar__brand {
+        display: flex !important;
+    }
+}
+
 /* Adaptive END */