Two layers of navigation, one layer of trust. A persistent global bar (dark, profile, search) sits above a contextual tab bar that shapeshifts per section — Code, Issues, Pull Requests. The genius isn't either bar alone, it's the separation: the top bar answers 'who am I and where am I,' the bottom bar answers 'what can I do here.' This dual-layer pattern scales to millions of repositories without ever needing a redesign.
Build a GitHub-style dual-layer contextual navigation bar. Design philosophy — predictable scalability: 1. Global bar (top): bg #010409, height 48px. Contains: logo (left), search bar (center, 45% width), profile/notifications (right). 2. Search bar: bg #0d1117, border #30363d, rounded-md, placeholder text "Type / to search" in #7d8590. 14px input text. 3. Context tab bar (below): bg #0d1117, height 48px, border-bottom #21262d. Contains horizontal tabs that change per section. 4. Tab styling: 14px, font-weight 400, color #7d8590, padding-bottom 12px. Active tab: color #f0f6fc with a 2px bottom border in #f78166 (orange) or #58a6ff (blue). 5. Tab icons: 16px icons before each tab label. Counters (issue count, PR count) as rounded-full badges in bg #21262d. 6. Logo: GitHub mark (Octocat silhouette) in #f0f6fc, 32px. Positioned left with a breadcrumb after it (org / repo). 7. Profile section: Avatar circle (20px) + dropdown chevron. The dual-layer eliminates the need for complex mega-menus — hierarchy is spatial, not nested.