81e56ef6a0
- Updated SearchBar component to use max-width and height utilities for better responsiveness. - Adjusted ArtistsPage layout to include container for consistent padding and spacing. - Modified BestSeller and NewRelease components to use grid layout for better item arrangement. - Enhanced Frame component layout and styling for improved visual hierarchy. - Refined HomeBanner component for better spacing and text sizing. - Improved Navbar component with mobile menu functionality and responsive design. - Updated RecentDesign and SideNav components for better mobile experience and layout. - Enhanced Sidebar component with mobile menu toggle and improved navigation links. - Refactored marketplace Navbar to include mobile menu and improved layout for icons and buttons.
46 lines
2.5 KiB
TypeScript
46 lines
2.5 KiB
TypeScript
import { Bell, Menu } from 'lucide-react';
|
|
import { Search } from 'lucide-react';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Dispatch, SetStateAction } from 'react';
|
|
|
|
export default function Navbar({ setDrawerOpen }: { setDrawerOpen?: Dispatch<SetStateAction<boolean>> }) {
|
|
return (
|
|
<div className="flex items-center justify-between w-full h-[52px] xs:h-[56px] sm:h-[64px] md:h-[75px] bg-white px-2 xs:px-3 sm:px-4 md:px-6 lg:px-10">
|
|
{/* Hamburger menu for mobile */}
|
|
{setDrawerOpen && (
|
|
<button
|
|
className="md:hidden mr-1 xs:mr-2 p-2 rounded-lg hover:bg-gray-100 focus:outline-none"
|
|
onClick={() => setDrawerOpen((prev: boolean) => !prev)}
|
|
aria-label="Toggle recent designs menu"
|
|
>
|
|
<Menu size={22} className="xs:w-6 xs:h-6 w-5 h-5" />
|
|
</button>
|
|
)}
|
|
{/* Search bar: hidden on mobile, visible on sm and up */}
|
|
<div className="hidden sm:flex flex-1 justify-end mr-1 xs:mr-2 sm:mr-4 md:mr-8 lg:mr-16 xl:mr-32">
|
|
<div className="flex items-center bg-[#F2F4F8] rounded-lg p-1 xs:p-1.5 sm:p-2 md:p-3 min-w-[140px] xs:min-w-[180px] sm:min-w-[280px] md:min-w-[320px] lg:min-w-[350px]">
|
|
<Search size={15} className="text-[#6B7280] mr-1 xs:mr-1.5 sm:mr-2" />
|
|
<Input
|
|
type="text"
|
|
placeholder="Search ebooks, folders, and uploads"
|
|
className="bg-transparent text-[#6B7280] text-[11px] xs:text-xs sm:text-sm md:text-base w-full focus-visible:ring-0 focus-visible:ring-offset-0 border-0 focus:border-0"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-1 xs:gap-2 sm:gap-3 md:gap-4 lg:gap-6">
|
|
<div className="relative cursor-pointer">
|
|
<Bell size={16} className="text-[#222] xs:text-[18px] sm:text-[20px] md:text-[22px]" />
|
|
<span className="absolute top-[-2px] right-0 w-1 h-1 xs:w-1.5 xs:h-1.5 sm:w-2 sm:h-2 bg-[#FF3B30] rounded-full border-[1.5px] border-white" />
|
|
</div>
|
|
<div className="flex items-center cursor-pointer">
|
|
<div className="w-5 h-5 xs:w-6 xs:h-6 sm:w-7 sm:h-7 md:w-8 md:h-8 rounded-full bg-[#FFD600] flex items-center justify-center font-semibold text-[#222] text-[10px] xs:text-xs sm:text-sm relative z-10">
|
|
D
|
|
</div>
|
|
<div className="w-5 h-5 xs:w-6 xs:h-6 sm:w-7 sm:h-7 md:w-8 md:h-8 rounded-full bg-white border border-[#E5E7EB] flex items-center justify-center text-[#222] cursor-pointer -ml-2 relative z-0">
|
|
+
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |