You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
56 lines
1.5 KiB
56 lines
1.5 KiB
6 months ago
|
import React, { useState } from 'react';
|
||
|
|
import { Button } from "@/components/ui/button";
|
||
|
|
import { Menu, X } from "lucide-react";
|
||
|
|
import { DesktopNav } from '../Navbar/desktopNav';
|
||
|
|
import { MobileNav } from '../Navbar/mobileNav';
|
||
|
|
import SearchBar from './_partials/searchBar';
|
||
|
|
|
||
|
|
const Header = () => {
|
||
|
|
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||
|
|
|
||
|
|
const toggleMenu = () => {
|
||
|
|
setIsMenuOpen(!isMenuOpen);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<header className="relative bg-zinc-900">
|
||
|
|
<div className="container mx-auto px-4">
|
||
|
|
<div className="flex items-center justify-between py-4">
|
||
|
|
{/* Logo */}
|
||
|
|
<h1 className="brand-logo text-purple-700 font-bold text-2xl">EDU CONNECT</h1>
|
||
|
|
<SearchBar />
|
||
|
|
<div className='flex gap-8'>
|
||
|
|
<DesktopNav />
|
||
|
|
<div className="hidden md:block space-x-4">
|
||
|
|
<Button className='bg-purple-700'>
|
||
|
|
Login
|
||
|
|
</Button>
|
||
|
|
<Button className='bg-purple-700'>
|
||
|
|
Register
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
{/* Hamburger Menu Button */}
|
||
|
|
<button
|
||
|
|
onClick={toggleMenu}
|
||
|
|
className="md:hidden p-2 rounded-md hover:bg-gray-100"
|
||
|
|
>
|
||
|
|
{isMenuOpen ? (
|
||
|
|
<X className="h-6 w-6" />
|
||
|
|
) : (
|
||
|
|
<Menu className="h-6 w-6" />
|
||
|
|
)}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Mobile Navigation */}
|
||
|
|
<MobileNav isOpen={isMenuOpen} />
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default Header;
|