Task 1 — Responsive Navbar

A fully responsive, accessible navigation bar built with Astro, Tailwind CSS v4, and TypeScript (strict mode).

Features

• Mobile-first responsive layout — collapses into a hamburger menu below Tailwind's md breakpoint (768px), expands into a horizontal nav bar above it.
• Animated hamburger-to-X toggle, driven by Tailwind's group-aria-expanded: variant — no manual class juggling for the icon state.
• Sticky header that stays pinned while scrolling.
• Accessibility built in:
  • aria-expanded / aria-controls on the toggle button
  • Visible focus states
  • Menu closes on Escape and returns focus to the toggle
  • Menu closes when clicking outside it or tapping a link
• Active link state to indicate the current page/section.
• Component-driven markup — the nav links are data (NavLink[]), not hardcoded HTML, so adding/removing a link is a one-line change.
• Semantic HTML (<header>, <nav>, <main>, <footer>) for SEO and screen readers.

Folder Structure

task1-responsive-navbar/
├── src/
│   ├── components/
│   │   └── Navbar.astro       # The navbar component (markup + Tailwind classes)
│   ├── layouts/
│   │   └── Layout.astro       # Shared HTML shell, imports global Tailwind styles
│   ├── pages/
│   │   └── index.astro        # Demo page that renders the navbar + placeholder sections
│   ├── scripts/
│   │   └── navbar.ts          # Typed toggle logic (open/close, outside-click, Escape, resize)
│   └── styles/
│       └── global.css         # `@import "tailwindcss"` + theme tokens (brand color)
├── public/                    # Static assets (favicon)
├── screenshots/                # Add your screenshots here
├── astro.config.mjs            # Registers the Tailwind Vite plugin
├── tsconfig.json               # Extends Astro's strict TypeScript config
├── package.json
├── README.md
└── REPORT.md

How to Run

npm install
npm run dev        # http://localhost:4321

To verify types and produce a production build:

npx tsc --noEmit    # strict type-check, no errors expected
npm run build       # outputs static site to dist/
npm run preview     # serve the production build locally

To test responsiveness: open DevTools (F12) → toggle device toolbar (Ctrl+Shift+M / Cmd+Shift+M) → try iPhone, iPad, and Desktop presets, or just resize the browser window.

Tech Stack

• Astro — static-site framework, component-based .astro files
• Tailwind CSS v4 — utility-first styling via @tailwindcss/vite
• TypeScript (strict: true, extending astro/tsconfigs/strict)

Notes on the Stack Choice

Astro compiles this down to plain, framework-free HTML/CSS/JS at build time (output: "static") — there's no client-side runtime overhead for a component this simple, while still getting component reuse, typed data (NavLink[]), and Tailwind's design-token system during development.