Skip to content

feat: enhance navbar styling and ensure consistency across pages#66

Open
Siddh2024 wants to merge 1 commit into
SufalBasak:mainfrom
Siddh2024:feat/navbar-enhancements
Open

feat: enhance navbar styling and ensure consistency across pages#66
Siddh2024 wants to merge 1 commit into
SufalBasak:mainfrom
Siddh2024:feat/navbar-enhancements

Conversation

@Siddh2024

Copy link
Copy Markdown
Contributor

Summary
Standardizes the navbar appearance across all pages and enhances its visual styling while respecting the existing theme system.
Changes
src/components/Navbar.tsx

  • Replaced tags with React Router's NavLink for route-aware active state highlighting
  • Active links now display with text-primary bg-primary/10 (teal highlight)
  • Inactive links show subtle hover:bg-muted/50 background
  • Added shadow-[0_4px_30px_rgba(0,0,0,0.3)] when navbar is opaque for better depth
  • Improved theme toggle button with rounded-xl and hover:border-primary/30
  • Enhanced avatar button with theme-aware focus ring (focus:ring-offset-background)
  • Added mobile menu backdrop overlay (bg-black/40 backdrop-blur-sm) that closes menu on tap
  • Added inline theme toggle inside the mobile menu
  • Smoother transitions (500ms container, 200ms interactive elements)
    src/pages/Dashboard.tsx and src/pages/Practice.tsx
  • Added forceOpaque={true} so navbar is always opaque on these pages

- Add active link highlighting with NavLink (text-primary + bg-primary/10)
- Replace <a> tags with React Router NavLink for route-aware styling
- Add forceOpaque={true} to Dashboard and Practice for uniform look
- Add scroll shadow, smoother transitions, better hover states
- Improve theme toggle button styling (border-border, hover:border-primary/30)
- Enhance mobile menu with backdrop overlay and inline theme toggle
- Refine avatar button with theme-aware focus ring
- Remove unused imports (Keyboard, Mic)

Only Index (landing page) retains transparent navbar; all 11 other pages use forceOpaque.
@vercel

vercel Bot commented May 26, 2026

Copy link
Copy Markdown

@Siddh2024 is attempting to deploy a commit to the Sufal Basak's projects Team on Vercel.

A member of the Team first needs to authorize it.

@vercel

vercel Bot commented May 27, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
type-speak-pro Ready Ready Preview, Comment Jun 13, 2026 4:04pm

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant