Implement top navigation tabs (#6354) #6394
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* test word to delete it latter * Add anchor URLs to tabs and fix second-level right-nav accordion - Added support for anchor URLs in tabs to enable direct linking. - Fixed an issue where second-level items in the right-hand navigation accordion would not close correctly when toggled. * Feature/old tabs to docs fixes dmytro a (#2) * add anchor URLs to tabs and fix second-level right-nav accordion behavior - Added support for anchor URLs in tabs to enable direct linking. - Fixed an issue where second-level items in the right-hand navigation accordion would not close correctly when toggled. * clean up * Add responsive scrollable tabs menu - Add horizontal scrolling for tab navigation - Make tabs sticky on mobile devices - Hide scrollbars for cleaner UI - Add active tab indicator with purple underline on mobile - Ensure tabs are accessible and visible while scrolling * improve mobile navigation tabs - Add box shadow to tabs container for better visual hierarchy - Adjust padding and font size for better mobile readability - Optimize mobile layout with proper spacing - Remove horizontal scrolling on mobile devices * pdate homepage and menu structure to match v5.5 style - Remove unnecessary line above first label - Set "home" as first tab without navigation (v5.5 style) - Move "overview" tab content to API management tab - Implement content for "AI management" and "API governance" tabs * Fix TOC active item detection - Adjusted headerHeight in getHighestHeading() to better compensate for the fixed header and tabs menu. * improve navigation and scrolling behavior - Made the version selector dropdown in the left-side navigation always visible (fixed position), matching the live site behavior. - Fixed issue where switching to the "API Management" tab caused the page to scroll down by 16–32px. - Fixed issue where clicking any item in the right-side navigation menu caused the top header (with Tyk logo and cloud button) to scroll down. - Improved alignment of the first tab ("Home") with the sidebar label. - Removed bottom margin from tabs and merged the active tab's bold purple underline with the header's bottom border for a seamless look. * improve tab menu and sidebar behavior - Fix tab menu to stay active when navigating child pages - Add recursive descendant check to properly detect active tab state - Update menu_recursive.html to show all levels of nested items - Fix sidebar navigation to properly expand when parent tab is active * clean up * Fix active top-level tab highlighting and left navigation rendering - Updated tabs_menu.html to correctly determine the active top-level tab when navigating to nested subpages. - Added deeper menu traversal to ensure the correct tab is highlighted for all child pages. - Fixed an issue where the left navigation would disappear on nested pages. * Cleanup: simplify and fix top tabs highlighting logic. Now only Home is active on the homepage; on other pages, the tab matching the path is active. * Refactor menu structure and fix banner overlap - Moved "Developer Support" section under "API Management" tab in menu.yaml - Removed "Developer Support" from the top-level menu - Changed the category of "Developer Support" from Lab to Label - Fixed the issue with the banner overlapping content * fix: ensure only one active tab in main navigation - Improved tab path matching logic to avoid partial matches (e.g. /api-management no longer matches /ai-management) - Now only the correct tab is marked as active based on the current page path - Fixes issue with multiple tabs being highlighted at once * resolve header and search bar overlap with banner, remove Hubspot styles - Fixed navigation and search bar so they are no longer overlapped by the banner - Prevented the search bar and tabs from shifting under the banner while scrolling - Removed all Hubspot banner-related styles and code --------- Co-authored-by: dmitry <dmitry@antonyuk.org> Co-authored-by: Master <sharadregoti15@gmail.com>
|
|
✅ PS. Pls add /docs/nightly to the end of url
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
/prob "could you please review this pr" |
PR Reviewer Guide 🔍Here are some key observations to aid the review process:
|
PR Code Suggestions ✨Explore these optional code suggestions:
|
|
@letzya @borntojesus |
|
/probe |
Code Review: Top Navigation Tabs ImplementationOverviewThis PR implements top navigation tabs for the Tyk documentation site, providing a more organized and user-friendly navigation experience. The implementation includes several key features:
Implementation DetailsTab Structure and RenderingThe tabs are implemented in
CSS ImplementationThe styling is defined in
JavaScript FunctionalityThe implementation includes JavaScript enhancements:
Menu StructureThe
Code Quality AssessmentStrengths
Areas for Improvement
Recommendations
Overall, this is a well-implemented feature that significantly improves the navigation experience for Tyk documentation users. The code is generally well-structured and follows best practices, with a few areas that could be refined for better maintainability. Tip: Mention me again using |
|
/probe |
Code Review: Top Navigation Tabs ImplementationOverviewThis PR implements a new top navigation tab system for the Tyk documentation site, providing a more organized and user-friendly navigation experience. The implementation includes anchor URLs for tabs, responsive design for mobile devices, and improved tab highlighting logic. Key Features Implemented
Code Quality AssessmentStrengths
Areas for Improvement
Recommendations
Implementation Example for Mobile Tab CenteringTo address the mobile tab visibility issue, a simple addition to document.addEventListener('DOMContentLoaded', function() {
// Existing code for sidebar navigation
const activeItem = document.querySelector('.st-treed li.active');
if (activeItem) {
activeItem.scrollIntoView({
behavior: 'instant',
block: 'center',
});
}
// New code for top tabs navigation
const activeTab = document.querySelector('.tab-item .tab-link.active');
if (activeTab) {
activeTab.scrollIntoView({
behavior: 'instant',
block: 'center',
inline: 'center' // This ensures horizontal centering
});
}
});Overall, this is a well-implemented feature that significantly improves the navigation experience for Tyk documentation users. The code is generally well-structured and follows best practices, with a few areas that could be refined for better maintainability and user experience. Tip: Mention me again using |
|
@borntojesus For me the active tab on mobile is still not centered (visible). |
|
@borntojesus This is the sample video of the issue https://www.loom.com/share/40e96ae9bb5d4c16bc12a674f231bb35?sid=9467cd3e-640d-4c8b-9ac5-799f89e57469 |
* test word to delete it latter
|
/probe |
Code Review: Top Navigation Tabs ImplementationOverviewThis PR implements a new top navigation tab system for the Tyk documentation site, providing a more organized and user-friendly navigation experience. The implementation includes anchor URLs for tabs, responsive design for mobile devices, and improved tab highlighting logic. Key Features
Mobile Tab Visibility IssueThe most significant issue reported is that on mobile devices, the active tab is not always visible in the viewport. Looking at the current implementation of document.addEventListener("DOMContentLoaded", function() {
var activeTab = document.querySelector('.tab-link.active');
var container = document.getElementById('tabs-container');
if (activeTab && container) {
if (window.innerWidth <= 768) {
activeTab.scrollIntoView({
behavior: 'smooth',
block: 'nearest',
inline: 'center'
});
}
}
}); The script attempts to center the active tab on mobile devices using Root Causes of the IssueAfter analyzing the implementation, I've identified several potential reasons why the active tab centering isn't working properly on mobile:
Recommended Solutions1. Improved Tab Centering ScriptReplace the current document.addEventListener("DOMContentLoaded", function() {
// Function to center the active tab
function centerActiveTab() {
const activeTab = document.querySelector('.tab-link.active');
const tabsContainer = document.getElementById('tabs-container');
if (activeTab && tabsContainer && window.innerWidth <= 768) {
// Add a small delay to ensure elements are fully rendered
setTimeout(() => {
// Method 1: Use scrollIntoView with inline center
activeTab.scrollIntoView({
behavior: 'smooth',
block: 'nearest',
inline: 'center'
});
// Method 2 (fallback): Calculate and set scroll position manually
// This provides a backup in case scrollIntoView doesn't work as expected
setTimeout(() => {
const containerWidth = tabsContainer.offsetWidth;
const tabWidth = activeTab.offsetWidth;
const tabLeft = activeTab.offsetLeft;
const scrollPosition = tabLeft - (containerWidth / 2) + (tabWidth / 2);
tabsContainer.scrollTo({
left: scrollPosition,
behavior: 'smooth'
});
}, 50);
}, 100);
}
}
// Center active tab on page load
centerActiveTab();
// Center active tab on window resize
window.addEventListener('resize', centerActiveTab);
// Re-center when orientation changes (important for mobile)
window.addEventListener('orientationchange', centerActiveTab);
// Ensure centering works after page is fully loaded (including images)
window.addEventListener('load', centerActiveTab);
});Key improvements in this solution:
2. CSS AdjustmentsEnsure the tabs container is properly set up for scrolling: .tabs-container {
display: flex;
overflow-x: auto;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE and Edge */
-webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
scroll-behavior: smooth;
&::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
}
}
/* Mobile styles */
@media (max-width: 768px) {
.tabs-container {
scroll-snap-type: x mandatory; /* Improves scroll positioning */
.tab-item {
scroll-snap-align: center; /* Helps with centering when scrolling */
}
}
}3. HTML Structure OptimizationEnsure the HTML structure doesn't have nested scrollable containers that might interfere with the scrolling behavior: <div class="tabs-wrapper">
<div class="tabs-container" id="tabs-container">
<!-- Tab items -->
</div>
</div>4. Additional Improvements
As noted in the PR comments, remove link.click(function (e) {
e.preventDefault();
// e.stopPropagation(); - Remove this line
var $parentContent = $(this).parent('.accordion-content');
$parentContent.toggleClass("accordion-up");
// Toggle visibility of H4 elements under this H3
$parentContent.children('.sub-accordion-content').toggle();
});
Enhance the tab navigation with proper ARIA attributes: <div class="tabs-wrapper" role="navigation" aria-label="Main Navigation">
<div class="tabs-container" id="tabs-container">
<!-- For each tab -->
<div class="tab-item">
<a href="..." class="tab-link" role="tab" aria-selected="true">Tab Title</a>
</div>
</div>
</div>ConclusionThe top navigation tabs implementation is a significant improvement to the Tyk documentation site's user experience. The most critical issue to address is the mobile tab visibility problem, where the active tab is not always visible on mobile devices. The recommended solution provides multiple approaches to ensure the active tab is centered properly on mobile devices, with fallbacks and event handlers to handle various scenarios. By implementing these changes, the navigation experience on mobile devices should be significantly improved, ensuring that users can always see the active tab regardless of which section they're viewing. Tip: Mention me again using |
yurisasuke
approved these changes
May 13, 2025
|
/release to release-5.8 |
|
Working on it! Note that it can take a few minutes. |
|
@sharadregoti Created merge PRs |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Preview
https://deploy-preview-6394--tyk-docs.netlify.app/docs/nightly
Feature/old tabs to docs fixes dmytro a (Docker cloud deployment #2)
add anchor URLs to tabs and fix second-level right-nav accordion behavior
clean up
Fix active top-level tab highlighting and left navigation rendering
Now only Home is active on the homepage; on other pages, the tab matching the path is active.
Preview Link
Checklist
New Contributors
master.