Implement top navigation tabs (#6354) (#6394)

* Implement top navigation tabs (#6354)

(cherry picked from commit 2d8363a)

Author: letzya

docker-compose.yml

@@ -13,4 +13,4 @@ services:
     entrypoint: ["make", "run"]
 
     volumes:
-    - .:/src
+    - .:/src

tyk-docs/assets/scss/_bespoke.scss

@@ -6091,7 +6091,7 @@ body {
     width: 100%;
     padding-left: 0;
     float: none;
-    padding-top: 110px;
+    padding-top: 80px;
   }
 
   .page-aside img {

tyk-docs/assets/scss/_navigation-tabs.scss

@@ -0,0 +1,114 @@
+$tab-spacing: 20px;
+$border-color: #e3ceff;
+$hover-bg: #f3f4f6;
+$active-color: #8438fa;
+$text-color: #374151;
+
+.tabs-menu {
+  z-index: 100;
+  background: #fff;
+  transition: top 0.3s ease;
+  position: fixed;
+  left: 0;
+  width: 100%;
+  z-index: 999;
+  border-bottom: 1px solid #e3ceff;
+}
+
+body.has-hubspot-banner .tabs-menu {
+  top: calc(64px + 68px); 
+}
+
+.sidebar-tab-title {
+  display: none !important;
+}
+
+.tabs-wrapper {
+  width: 100%;
+  overflow: hidden;
+  background: #fff;
+  margin: 20px 15px 0 15px;
+}
+
+.tabs-container {
+  display: flex;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  gap: $tab-spacing;
+  background: #fff;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.tab-item {
+  white-space: nowrap;
+  transition: transform 0.2s ease;
+  
+  &:hover {
+    transform: translateY(-1px);
+  }
+}
+
+.tab-link {
+  color: $text-color;
+  text-decoration: none;
+  border-radius: 4px;
+  padding: 6px 8px;
+  transition: all 0.3s ease;
+  font-weight: 500;
+  
+  &:hover {
+    background: $hover-bg;
+    color: darken($text-color, 10%);
+  }
+}
+@media (max-width: 768px) {
+  .tab-item {
+    font-size: 13px;
+  }
+
+  .tab-link {
+    padding: 8px 10px;
+  }
+
+}
+
+@media (max-width: 1024px) {
+  .documentation-table-of-contents-container {
+    order: -1;
+    width: 100%;
+    margin-bottom: 1rem;
+    position: relative;
+    top: 0;
+    left: 0;
+    right: 0;
+    padding: 0 1rem;
+  }
+
+  .tab-link {
+    padding: 0;
+  }
+
+  .documentation-table-of-contents {
+    position: relative;
+    width: 100%;
+    max-height: none;
+    overflow: visible;
+    background: transparent;
+    padding: 0;
+  }
+
+  .page-content__main {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .tabs-wrapper .nav_sub_active {
+    border-bottom: 2px solid $active-color;
+  }
+}

tyk-docs/assets/scss/_side-menu.scss

@@ -136,7 +136,7 @@ Tree View
   flex-grow: 1;
   padding-inline-end: 1rem;
   overflow-y: scroll;
-  padding-top: 1.5rem;
+  padding-top: 2.5rem;
 }
 
 .version-selector {

tyk-docs/assets/scss/_structure.scss

@@ -81,7 +81,6 @@ body {
 
     .hasSidebar &__container {
       padding-right: 20px;
-      padding-top: 10px;
       padding-left: 20px;
     }
   }
@@ -94,7 +93,6 @@ body {
 
     .hasSidebar &__container {
       padding-right: 20px;
-      padding-top: 60px;
       padding-left: 100px;
     }
   }
@@ -147,6 +145,17 @@ body {
   color: #44546f;
 }
 
+.page-content,
+.section-page {
+  padding-top: 40px;
+}
+
+.page-content {
+  h4 {
+    scroll-margin-top: 10px;
+  }
+}
+
 .metadata_heading {
   font-size: 22px;
   font-family: "Inter", sans-serif;

tyk-docs/assets/scss/_table-of-contents.scss

@@ -29,7 +29,7 @@
 }
 
 .documentation-table-of-contents {
-  padding: 60px 1rem 0.5rem 1.5rem;
+  padding: 0 1rem 0.5rem 1.5rem;
 
   .sub_toc__item:hover,
   .sub-sub-toc-item:hover,

tyk-docs/assets/scss/home.scss

@@ -201,6 +201,10 @@ ol, ul {
   color: $brand-black;
 }
 
+.home-mobile-margin {
+  margin-top: 40px;
+}
+
 @media (min-width: 992px) {
   .section-padding {
     padding-inline: 1%;

tyk-docs/assets/scss/main.scss

@@ -14,3 +14,5 @@
 @import 'print';
 @import 'footer';
 @import 'directory-links';
+@import 'navigation-tabs';
+