diff --git a/package-lock.json b/package-lock.json index b0262c6..b0858b5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3852,9 +3852,6 @@ "cpu": [ "arm" ], - "libc": [ - "glibc" - ], "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -3871,9 +3868,6 @@ "cpu": [ "arm64" ], - "libc": [ - "glibc" - ], "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -3890,9 +3884,6 @@ "cpu": [ "ppc64" ], - "libc": [ - "glibc" - ], "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -3909,9 +3900,6 @@ "cpu": [ "riscv64" ], - "libc": [ - "glibc" - ], "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -3928,9 +3916,6 @@ "cpu": [ "s390x" ], - "libc": [ - "glibc" - ], "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -3947,9 +3932,6 @@ "cpu": [ "x64" ], - "libc": [ - "glibc" - ], "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -3966,9 +3948,6 @@ "cpu": [ "arm64" ], - "libc": [ - "musl" - ], "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -3985,9 +3964,6 @@ "cpu": [ "x64" ], - "libc": [ - "musl" - ], "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -4004,9 +3980,6 @@ "cpu": [ "arm" ], - "libc": [ - "glibc" - ], "license": "Apache-2.0", "optional": true, "os": [ @@ -4029,9 +4002,6 @@ "cpu": [ "arm64" ], - "libc": [ - "glibc" - ], "license": "Apache-2.0", "optional": true, "os": [ @@ -4054,9 +4024,6 @@ "cpu": [ "ppc64" ], - "libc": [ - "glibc" - ], "license": "Apache-2.0", "optional": true, "os": [ @@ -4079,9 +4046,6 @@ "cpu": [ "riscv64" ], - "libc": [ - "glibc" - ], "license": "Apache-2.0", "optional": true, "os": [ @@ -4104,9 +4068,6 @@ "cpu": [ "s390x" ], - "libc": [ - "glibc" - ], "license": "Apache-2.0", "optional": true, "os": [ @@ -4129,9 +4090,6 @@ "cpu": [ "x64" ], - "libc": [ - "glibc" - ], "license": "Apache-2.0", "optional": true, "os": [ @@ -4154,9 +4112,6 @@ "cpu": [ "arm64" ], - "libc": [ - "musl" - ], "license": "Apache-2.0", "optional": true, "os": [ @@ -4179,9 +4134,6 @@ "cpu": [ "x64" ], - "libc": [ - "musl" - ], "license": "Apache-2.0", "optional": true, "os": [ @@ -5782,9 +5734,6 @@ "cpu": [ "arm64" ], - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -5801,9 +5750,6 @@ "cpu": [ "arm64" ], - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -5820,9 +5766,6 @@ "cpu": [ "x64" ], - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -5839,9 +5782,6 @@ "cpu": [ "x64" ], - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -7794,9 +7734,6 @@ "arm64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -7811,9 +7748,6 @@ "arm64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -7828,9 +7762,6 @@ "ppc64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -7845,9 +7776,6 @@ "riscv64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -7862,9 +7790,6 @@ "riscv64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -7879,9 +7804,6 @@ "s390x" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -7896,9 +7818,6 @@ "x64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -7913,9 +7832,6 @@ "x64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ diff --git a/src/components/layout/Navbar.module.css b/src/components/layout/Navbar.module.css index 4b32b60..c4a35c5 100644 --- a/src/components/layout/Navbar.module.css +++ b/src/components/layout/Navbar.module.css @@ -1,538 +1,629 @@ +/* =========================== + NAVBAR CONTAINER +=========================== */ + .navbarContainer { position: fixed; - top: 70px; + top: 18px; left: 0; right: 0; + z-index: 1000; display: flex; justify-content: center; - z-index: 1000; pointer-events: none; padding: 0 24px; } +/* =========================== + NAVBAR +=========================== */ + .navbar { pointer-events: auto; - width: 100%; - max-width: 1800px; - - height: 64px; - + position: relative; + width: min(1400px, 95vw); + height: 72px; display: flex; align-items: center; justify-content: space-between; + padding: 0 28px; + border-radius: 24px; + background: rgba(6, 11, 25, 0.72); + backdrop-filter: blur(30px); + -webkit-backdrop-filter: blur(30px); + border: 1px solid rgba(255, 255, 255, 0.08); + overflow: hidden; + box-shadow: + 0 20px 80px rgba(0, 0, 0, 0.45), + 0 0 0 1px rgba(255, 255, 255, 0.02) inset; + transition: all 0.35s ease; +} + +/* Animated Border */ +.navbar::before { + content: ""; + position: absolute; + inset: 0; + border-radius: inherit; + padding: 1px; + background: linear-gradient(135deg, + rgba(0, 255, 255, .4), + rgba(59, 130, 246, .4), + rgba(168, 85, 247, .4)); + mask: + linear-gradient(#fff 0 0) content-box, + linear-gradient(#fff 0 0); + mask-composite: xor; + -webkit-mask-composite: xor; + pointer-events: none; + z-index: 1; +} - background: rgba(10, 10, 10, 0.6); +/* Glow Line */ +.navbar::after { + content: ""; + position: absolute; + top: 0; + left: 20%; + width: 60%; + height: 1px; + background: linear-gradient(90deg, + transparent, + rgba(0, 255, 255, .8), + transparent); +} + +/* =========================== + PROGRESS BAR + Lives on the navbar itself so it + shows on BOTH desktop and mobile. + scaleX is driven by Framer Motion. +=========================== */ + +/* Scroll Progress Border */ +.progressBar { + position: absolute; - backdrop-filter: blur(16px); - -webkit-backdrop-filter: blur(16px); + left: 0; + right: 0; + bottom: 0; - border: 1px solid rgba(255, 255, 255, 0.08); - border-radius: 9999px; + height: 3px; + width: calc(100% + 2px); - padding: 0 24px; + transform-origin: left center; + + background: linear-gradient(90deg, + #00f5ff, + #3b82f6, + #8b5cf6, + #ff00ff); + + box-shadow: + 0 0 8px #00f5ff, + 0 0 16px #3b82f6, + 0 0 24px #8b5cf6; - box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2); + border-radius: 0 0 999px 999px; + + z-index: 10; } -/* ========================== - Logo -========================== */ +/* =========================== + LOGO +=========================== */ .logo { display: flex; align-items: center; gap: 10px; - - font-weight: 700; - font-size: 20px; - - color: var(--text-primary); - text-decoration: none; - letter-spacing: -0.5px; - - border-radius: 8px; - + color: white; + font-size: 24px; + font-weight: 800; flex-shrink: 0; + transition: 0.3s; } -.logo:focus-visible { - outline: 2px solid #38bdf8; - outline-offset: 4px; +.logo:hover { + transform: translateY(-1px); } .logoIcon { - width: 28px; - height: 28px; - + width: 38px; + height: 38px; + border-radius: 12px; + background: linear-gradient(135deg, #00e5ff, #3b82f6, #8b5cf6); display: flex; align-items: center; justify-content: center; + flex-shrink: 0; + box-shadow: 0 0 30px rgba(59, 130, 246, .4); } .logoText { - white-space: nowrap; + color: white; } -/* ========================== - Center Navigation -========================== */ +/* =========================== + NAV PILL (desktop center) +=========================== */ .navPill { - position: absolute; - left: 50%; - transform: translateX(-50%); - + position: relative; display: flex; align-items: center; + flex: 1; justify-content: center; - - height: 48px; - padding: 4px 8px; - - border-radius: 9999px; - - background: rgba(255, 255, 255, 0.03); - - border: 1px solid rgba(255, 255, 255, 0.06); - - backdrop-filter: blur(8px); + min-width: 0; + overflow: visible; } +/* =========================== + NAV LINKS +=========================== */ + .navLinks { display: flex; align-items: center; - gap: 6px; + gap: 2px; + flex-wrap: nowrap; } .navLink { - display: flex; - align-items: center; - justify-content: center; - - height: 40px; - padding: 0 14px; - - border-radius: 9999px; - - color: rgba(255, 255, 255, 0.72); - + position: relative; + padding: 10px 12px; + border-radius: 12px; + color: rgba(255, 255, 255, .7); font-size: 14px; - font-weight: 500; - + font-weight: 600; + text-decoration: none; white-space: nowrap; - - transition: - background-color 0.2s ease, - color 0.2s ease, - transform 0.2s ease; + transition: all .25s ease; } .navLink:hover { - color: #fff; - background: rgba(255, 255, 255, 0.08); + color: white; + background: rgba(255, 255, 255, .05); + transform: translateY(-1px); } -.navLink:focus-visible { - outline: 2px solid #38bdf8; - outline-offset: 2px; +.navLink.active, +.navLink[aria-current="page"] { + color: white; } -.navLink[aria-current='page'] { - color: #fff; - font-weight: 600; - - background: linear-gradient( - 135deg, - rgba(59, 130, 246, 0.95), - rgba(37, 99, 235, 0.95) - ); - - box-shadow: - 0 4px 12px rgba(59, 130, 246, 0.25), - inset 0 1px 0 rgba(255, 255, 255, 0.15); +.navLink.active::after, +.navLink[aria-current="page"]::after { + content: ""; + position: absolute; + left: 18%; + right: 18%; + bottom: -6px; + height: 3px; + border-radius: 999px; + background: linear-gradient(90deg, #00e5ff, #3b82f6); + box-shadow: 0 0 15px #00e5ff; } -/* ========================== - Actions -========================== */ +/* =========================== + ACTIONS +=========================== */ .actions { display: flex; align-items: center; - gap: 10px; - + gap: 8px; flex-shrink: 0; } -.iconButton { - width: 40px; - height: 40px; - - min-width: 40px; +/* =========================== + ICON BUTTONS +=========================== */ +.iconButton { + width: 38px; + height: 38px; + border-radius: 12px; + border: 1px solid rgba(255, 255, 255, .08); + background: rgba(255, 255, 255, .03); + color: rgba(255, 255, 255, .8); display: flex; align-items: center; justify-content: center; - - border-radius: 9999px; - - color: rgba(255, 255, 255, 0.8); - - background: rgba(255, 255, 255, 0.03); - - border: 1px solid rgba(255, 255, 255, 0.08); - cursor: pointer; - - transition: - background-color 0.2s ease, - color 0.2s ease, - transform 0.2s ease; -} - -.iconButton svg { - width: 18px; - height: 18px; + backdrop-filter: blur(12px); + text-decoration: none; + flex-shrink: 0; + transition: all .3s ease; } .iconButton:hover { - background: rgba(255, 255, 255, 0.08); - color: #fff; - transform: translateY(-1px); -} - -.iconButton:focus-visible { - outline: 2px solid #38bdf8; - outline-offset: 2px; + transform: translateY(-2px); + color: white; + border-color: rgba(59, 130, 246, .4); + box-shadow: 0 0 20px rgba(59, 130, 246, .25); } -/* ========================== - Login Button -========================== */ +/* =========================== + THEME TOGGLE + Visually distinct pill so users + immediately see the current mode +=========================== */ -.profileButton { +.themeToggle { display: flex; align-items: center; - justify-content: center; - - gap: 8px; - - height: 40px; - padding: 0 18px; - - border-radius: 9999px; - - background: linear-gradient(135deg, #3b82f6, #2563eb); - - color: white; + gap: 6px; + padding: 0 12px; + height: 38px; + border-radius: 999px; + cursor: pointer; + font-size: 13px; + font-weight: 700; + flex-shrink: 0; + transition: all .3s ease; - font-size: 14px; - font-weight: 600; + /* ── DARK mode state (default – navbar is dark) ── */ + background: rgba(255, 255, 255, .06); + border: 1px solid rgba(255, 255, 255, .14); + color: rgba(255, 255, 255, .90); + box-shadow: none; +} - transition: all 0.2s ease; +.themeToggle:hover { + transform: translateY(-1px); + background: rgba(255, 255, 255, .10); + border-color: rgba(255, 255, 255, .22); +} - box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25); +/* Moon icon tint in dark mode */ +.themeToggle .themeIcon { + color: #a78bfa; + /* soft violet — night feel */ + transition: color .3s ease; } -.profileButton:hover { - transform: translateY(-1px); +/* ── LIGHT mode state ── */ +:global(.light) .themeToggle, +:global([data-theme="light"]) .themeToggle { + background: rgba(250, 200, 20, .12); + border: 1px solid rgba(250, 200, 20, .35); + color: #92600a; + box-shadow: 0 0 12px rgba(250, 180, 0, .18); +} - background: linear-gradient(135deg, #2563eb, #1d4ed8); +:global(.light) .themeToggle:hover, +:global([data-theme="light"]) .themeToggle:hover { + background: rgba(250, 200, 20, .20); + box-shadow: 0 0 20px rgba(250, 180, 0, .28); } -.profileButton:focus-visible { - outline: 2px solid #38bdf8; - outline-offset: 2px; +/* Sun icon tint in light mode */ +:global(.light) .themeToggle .themeIcon, +:global([data-theme="light"]) .themeToggle .themeIcon { + color: #f59e0b; } -/* ========================== - Avatar -========================== */ +/* =========================== + PROFILE AVATAR +=========================== */ .profileAvatar { - display: flex; - align-items: center; - justify-content: center; - width: 40px; height: 40px; - - border-radius: 9999px; - + border-radius: 14px; overflow: hidden; - - background: #3b82f6; - - box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25); - - transition: all 0.2s ease; + cursor: pointer; + display: block; + flex-shrink: 0; + border: 2px solid rgba(59, 130, 246, .35); + box-shadow: 0 0 20px rgba(59, 130, 246, .25); + text-decoration: none; + transition: all .3s ease; } .profileAvatar:hover { - transform: translateY(-1px); + transform: scale(1.08) translateY(-2px); + box-shadow: 0 0 30px rgba(59, 130, 246, .5); } -.profileAvatar:focus-visible { - outline: 2px solid #38bdf8; - outline-offset: 2px; +/* =========================== + PROFILE BUTTON (logged-out) +=========================== */ + +.profileButton { + display: flex; + align-items: center; + gap: 8px; + padding: 9px 16px; + border-radius: 12px; + border: 1px solid rgba(255, 255, 255, .10); + background: rgba(255, 255, 255, .04); + color: rgba(255, 255, 255, .80); + font-size: 14px; + font-weight: 600; + text-decoration: none; + cursor: pointer; + flex-shrink: 0; + transition: all .3s ease; } -/* ========================== - Hamburger -========================== */ +.profileButton:hover { + transform: translateY(-2px); + color: white; + border-color: rgba(59, 130, 246, .4); + background: rgba(59, 130, 246, .10); + box-shadow: 0 0 20px rgba(59, 130, 246, .25); +} + +/* =========================== + HAMBURGER (mobile only) +=========================== */ .hamburger { display: none; - width: 40px; height: 40px; - - border-radius: 9999px; - + border-radius: 12px; + background: rgba(255, 255, 255, .04); + border: 1px solid rgba(255, 255, 255, .08); + color: white; + cursor: pointer; align-items: center; justify-content: center; - - color: var(--text-primary); - - background: rgba(255, 255, 255, 0.03); - - border: 1px solid rgba(255, 255, 255, 0.08); - - cursor: pointer; - - transition: all 0.2s ease; + flex-shrink: 0; + transition: .3s; } .hamburger:hover { - background: rgba(255, 255, 255, 0.08); + background: rgba(255, 255, 255, .10); } -.hamburger:focus-visible { - outline: 2px solid #38bdf8; - outline-offset: 2px; -} +/* =========================== + MOBILE BACKDROP +=========================== */ -.navLink[aria-current='page'] { - color: var(--primary); - font-weight: 600; - background: rgb(128, 171, 240); -} - -/* Mobile Menu Backdrop */ .mobileBackdrop { - display: none; - position: fixed; inset: 0; - - background: rgba(0, 0, 0, 0.6); - - backdrop-filter: blur(4px); - + background: rgba(0, 0, 0, .65); + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); z-index: 1001; } -/* ========================== - Mobile Drawer -========================== */ +/* =========================== + MOBILE MENU DRAWER +=========================== */ .mobileMenu { - display: none; - position: fixed; - top: 20px; - right: 20px; - - width: 300px; - max-width: calc(100vw - 40px); - - background: rgba(15, 23, 42, 0.95); + /* Offset from top so the navbar peeks above */ + top: 0; + right: 0; + bottom: 0; - border: 1px solid rgba(255, 255, 255, 0.1); + width: 280px; + max-width: 80vw; - border-radius: 24px; + /* Comfortable inner spacing */ + padding: 80px 20px 36px; - z-index: 1002; + background: rgba(6, 11, 25, 0.97); + backdrop-filter: blur(30px); + -webkit-backdrop-filter: blur(30px); - padding: 20px; + border-left: 1px solid rgba(255, 255, 255, .08); + border-radius: 24px 0 0 24px; + display: flex; flex-direction: column; - gap: 20px; + gap: 6px; - box-shadow: - 0 20px 25px -5px rgba(0, 0, 0, 0.1), - 0 10px 10px -5px rgba(0, 0, 0, 0.04); + z-index: 1002; + + box-shadow: -20px 0 80px rgba(0, 0, 0, .6); + overflow-y: auto; } +/* ── Drawer header row ── */ .mobileHeader { + position: absolute; + top: 0; + left: 0; + right: 0; + height: 72px; display: flex; align-items: center; justify-content: space-between; - - padding-bottom: 16px; - - border-bottom: 1px solid rgba(255, 255, 255, 0.1); + padding: 0 20px; + border-bottom: 1px solid rgba(255, 255, 255, .06); } .mobileTitle { - font-size: 18px; - font-weight: 600; - color: var(--text-primary); + font-size: 17px; + font-weight: 700; + color: white; + letter-spacing: 0.01em; } .mobileClose { - width: 36px; - height: 36px; - - border-radius: 9999px; - + width: 38px; + height: 38px; + border-radius: 12px; + background: rgba(255, 255, 255, .05); + border: 1px solid rgba(255, 255, 255, .10); + color: white; + cursor: pointer; display: flex; align-items: center; justify-content: center; + flex-shrink: 0; + transition: background .25s ease; +} - color: var(--text-secondary); - - background: transparent; - - border: 1px solid rgba(255, 255, 255, 0.1); - - cursor: pointer; +.mobileClose:hover { + background: rgba(255, 255, 255, .12); } +/* =========================== + MOBILE NAV LINKS +=========================== */ + .mobileNav { display: flex; flex-direction: column; - gap: 4px; + gap: 2px; } .mobileLink { - display: block; - - padding: 12px 16px; - - border-radius: 12px; - - color: var(--text-secondary); - - transition: all 0.2s ease; + display: flex; + align-items: center; + padding: 13px 16px; + border-radius: 14px; + color: rgba(255, 255, 255, .70); + text-decoration: none; + font-size: 15px; + font-weight: 600; + transition: background .2s ease, color .2s ease; } .mobileLink:hover { - background: rgba(255, 255, 255, 0.05); - color: var(--text-primary); + background: rgba(255, 255, 255, .06); + color: white; } -.mobileLink[aria-current='page'] { - background: rgba(59, 130, 246, 0.15); - color: #60a5fa; +.mobileLink[aria-current="page"] { + color: #00e5ff; + background: rgba(0, 229, 255, .08); + border: 1px solid rgba(0, 229, 255, .15); } +/* =========================== + MOBILE ACTIONS +=========================== */ + .mobileActions { + margin-top: auto; + border-top: 1px solid rgba(255, 255, 255, .08); + padding-top: 16px; display: flex; flex-direction: column; - gap: 12px; - - padding-top: 16px; - - border-top: 1px solid rgba(255, 255, 255, 0.1); + gap: 8px; } -.mobileActionRow { +.mobileProfileButton { display: flex; align-items: center; gap: 12px; + width: 100%; + padding: 13px 16px; + border-radius: 14px; + border: 1px solid rgba(255, 255, 255, .08); + background: rgba(255, 255, 255, .03); + color: rgba(255, 255, 255, .80); + font-size: 15px; + font-weight: 600; + text-decoration: none; + cursor: pointer; + text-align: left; + transition: background .25s ease, color .25s ease, border-color .25s ease; +} - color: var(--text-secondary); +.mobileProfileButton:hover { + background: rgba(59, 130, 246, .10); + color: white; + border-color: rgba(59, 130, 246, .30); } -.mobileProfileButton { +/* Theme row inside mobile drawer */ +.mobileActionRow { display: flex; align-items: center; gap: 12px; - - width: 100%; - - padding: 12px 16px; - - border-radius: 12px; - - background: rgba(255, 255, 255, 0.05); - - border: 1px solid rgba(255, 255, 255, 0.1); - - color: var(--text-primary); - - transition: all 0.2s ease; + padding: 10px 16px; + border-radius: 14px; + border: 1px solid rgba(255, 255, 255, .08); + background: rgba(255, 255, 255, .03); + color: rgba(255, 255, 255, .70); + font-size: 15px; + font-weight: 600; + cursor: pointer; + transition: background .25s ease; } -.mobileProfileButton:hover { - background: rgba(255, 255, 255, 0.1); +.mobileActionRow:hover { + background: rgba(255, 255, 255, .07); } -/* ========================== - Responsive -========================== */ +/* =========================== + RESPONSIVE +=========================== */ -@media (max-width: 1024px) { - .navPill { - display: none; - } - - .navbar { - padding: 0 16px; - height: 60px; - background: rgba(10, 10, 10, 0.6); - backdrop-filter: blur(16px); - border: 1px solid rgba(255, 255, 255, 0.08); - border-radius: 20px; +/* Tight desktop: shrink links before hamburger */ +@media (max-width: 1280px) and (min-width: 1025px) { + .navLink { + padding: 9px 9px; + font-size: 13px; } - .logo, .actions { - background: transparent; - border: none; - padding: 0; + gap: 6px; } - .logoText { - display: block; + .iconButton { + width: 34px; + height: 34px; } - .hamburger { - display: flex; + .themeToggle { + height: 34px; + padding: 0 10px; + font-size: 12px; } +} - .mobileBackdrop { - display: block; +/* Tablet / mobile */ +@media (max-width: 1024px) { + .navPill { + display: none; } - .mobileMenu { + .hamburger { display: flex; } + .actions>.iconButton { + display: none; + } + .navbar { - height: 60px; + height: 64px; padding: 0 16px; - - border-radius: 20px; - - background: rgba(15, 23, 42, 0.88); } - .actions > .iconButton, - .actions > .profileButton { - display: none; + .logo { + font-size: 20px; } } -@media (max-width: 400px) { +/* Small phones */ +@media (max-width: 500px) { .logoText { display: none; } .navbar { - padding: 0 12px; + width: 96vw; } -} + + /* Full-width drawer on very small screens */ + .mobileMenu { + width: 100vw; + max-width: 100vw; + border-radius: 0; + border-left: none; + } +} \ No newline at end of file diff --git a/src/components/layout/Navbar.tsx b/src/components/layout/Navbar.tsx index 8ff2573..88d716b 100644 --- a/src/components/layout/Navbar.tsx +++ b/src/components/layout/Navbar.tsx @@ -134,7 +134,11 @@ export default function Navbar() { ); })} + + {/* Scroll Progress Line attached to Pill */} + + {/* Actions */}