From 782d410dbbcd254cacb549d75fcc32eaea1364c9 Mon Sep 17 00:00:00 2001
From: Limon Monte <6059356+limonte@users.noreply.github.com>
Date: Wed, 5 Aug 2026 15:05:27 +0300
Subject: [PATCH] fix: scope the sidebar styles so they stop breaking
 breadcrumbs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The breadcrumb trail added in #272 rendered broken: styles.scss had a
bare `nav { ... }` rule for the sidebar, so it applied to the breadcrumb
<nav> too.

Three rules matched it:
  nav           position: fixed; top: 0; flex-direction: column; ...
  nav a         display: flex; padding; border-bottom; border-left; ...
  nav a::before content: '›'

So the trail was pinned to the top-left of the viewport, its two links
stacked vertically, each with a '›' prefix and sidebar borders.

The selector encoded an assumption that the sidebar is the only <nav> on
the page. Fixed at the root rather than by piling on overrides:

- `nav` -> `.sidebar-nav`, and `.sidebar nav` -> `.sidebar .sidebar-nav`
  for the Swal popup variant
- Sidebar() renders <nav className="sidebar-nav mobile-hidden">

Declarations are untouched: the diff renames selectors only, so the
sidebar's styling is byte-identical in both render paths.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 src/components/Nav.tsx | 2 +-
 styles/styles.scss     | 6 ++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
index f225304b..f9ca259d 100644
--- a/src/components/Nav.tsx
+++ b/src/components/Nav.tsx
@@ -45,7 +45,7 @@ export function Nav({
 
 export function Sidebar() {
   return (
-    <nav className="mobile-hidden">
+    <nav className="sidebar-nav mobile-hidden">
       <a href="/#examples" onClick={() => Swal.close()}>
         <span>Examples</span>
       </a>
diff --git a/styles/styles.scss b/styles/styles.scss
index 9da23a66..ffdfe039 100644
--- a/styles/styles.scss
+++ b/styles/styles.scss
@@ -57,7 +57,9 @@ button {
     sans-serif;
 }
 
-nav {
+// Scoped to the sidebar explicitly. As a bare `nav` selector this styled
+// every <nav> on the page, including the breadcrumb trail.
+.sidebar-nav {
   display: flex;
   position: fixed;
   z-index: 1;
@@ -149,7 +151,7 @@ nav {
     margin: 0 2em 0 0;
   }
 
-  nav {
+  .sidebar-nav {
     display: block !important;
     position: initial;
     font-size: 16px;