39 create a navbar

[xeniag]

Pull Request: Implement responsive, accessible Navbar with unit tests (#39)

Summary

This PR implements a fully responsive, accessible, and theme-aware <Navbar> component alongside an automated unit test suite using Vitest and React Testing Library.

Changes Introduced

Component Implementation

• Responsive Layout: Implemented <Navbar> with clean desktop navigation and an accessible mobile overlay menu.
• Protected Routes: Added conditional rendering for links based on authentication state (e.g., hiding/showing the Gymnasts link via isLoggedIn).
• Theme Switching: Integrated a theme toggle switch supporting light and dark themes with correct aria-checked attributes.
• Skip Link: Integrated a hidden "Skip to main content" link (<SkipLink>) that becomes visible on keyboard focus (Tab) for WCAG 2.4.1 compliance.

Testing & Quality Assurance

• Vitest & RTL Setup: Configured vite.config.ts with a jsdom test environment and set up src/tests/setupTests.ts to extend matchers via @testing-library/jest-dom.
• Unit Tests (src/tests/Navbar.test.tsx):
  • Verifies rendering of the logo, public links, and conditional navigation items.
  • Asserts aria-checked state changes on theme switch interaction.
  • Verifies execution of the setIsLoggedIn callback when triggering the login button.

Accessibility (A11y)

• Uses semantic HTML structure (<header>, <nav>, <main>) and explicit ARIA roles (link, button, switch).
• Full keyboard navigation support verified.
• Complies with WCAG contrast and focus indicator standards.

How to Test

1. Checkout the branch: git checkout 39-create-a-navbar
2. Install dependencies: npm install
3. Run test suite: npm run test:run
4. Start local development server: npm run dev
5. Verify keyboard navigation using Tab and Shift+Tab.