Hi, I'm Zheera

Your AI agent for writing code, building websites, and shipping web apps — fast, clean, and production-ready.

Build a landing page

Responsive design with modern CSS

Create a REST API

Node.js, Express & authentication

Debug my code

Find bugs and fix errors fast

Next.js project setup

Tailwind, TypeScript boilerplate

Python web scraper

Parse and extract data from URLs

Database schema

PostgreSQL for SaaS apps

You

Build me a responsive navbar component in React with Tailwind — include mobile hamburger menu and active link state.

Zheera

Here's a clean, responsive navbar with mobile support and active link state using React and Tailwind CSS:

                  tsx
                  
                
import { useState } from "react";
import { Link, useLocation } from "react-router-dom";

const Navbar = () => {
  const [open, setOpen] = useState(false);
  const { pathname } = useLocation();

  const links = [
    { to: "/", label: "Home" },
    { to: "/about", label: "About" },
    { to: "/projects", label: "Projects" },
    { to: "/contact", label: "Contact" },
  ];

  return (
    <nav className="bg-white border-b border-gray-200">
      <div className="max-w-6xl mx-auto px-4 h-16 flex items-center justify-between">
        <Link to="/" className="font-bold text-lg text-violet-700">Brand</Link>
        </* Desktop links */>
        <div className="hidden md:flex items-center gap-1">
          {links.map(({ to, label }) => (
            <Link key={to} to={to}
              className={`px-4 py-2 rounded-md text-sm font-medium transition
                ${pathname === to
                  ? "bg-violet-100 text-violet-700"
                  : "text-gray-600 hover:bg-gray-100"}`}
            >{label}</Link>
          ))}
        </div>
      </div>
    </nav>
  );
};

The component uses useLocation to compare the current path and apply active styles. Want me to add a dropdown submenu or integrate with Next.js's useRouter instead?

Secure

Code generation

Web apps

Debug & review