feat: enhance dialog components with overflow handling and update placeholder text for consistency
This commit is contained in:
@@ -75,8 +75,24 @@ const PublicNavbar = () => {
|
||||
<div className='sticky top-0 inset-x-0 z-50'>
|
||||
|
||||
<header className="bg-gradient-to-r flex-wrap from-[var(--purple-amethyst)] to-[var(--purple-deep)] px-[20px] py-[10px] flex md:justify-end justify-between items-center gap-4 sm:gap-6">
|
||||
<div className='flex gap-4 sm:gap-6'>
|
||||
|
||||
<div className='flex gap-4 sm:gap-6 items-center'>
|
||||
{user && (
|
||||
<span
|
||||
className="text-white text-base font-medium"
|
||||
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
||||
>
|
||||
Welcome, {user.first_name}
|
||||
</span>
|
||||
)}
|
||||
{(user?.role === 'admin' || user?.role === 'superadmin') && (
|
||||
<Link
|
||||
to="/admin"
|
||||
className="text-white text-base font-medium hover:opacity-80 transition-opacity"
|
||||
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
||||
>
|
||||
Dashboard
|
||||
</Link>
|
||||
)}
|
||||
<button
|
||||
onClick={handleAuthAction}
|
||||
className="text-white text-base font-medium hover:opacity-80 transition-opacity bg-transparent border-none cursor-pointer"
|
||||
@@ -176,7 +192,71 @@ const PublicNavbar = () => {
|
||||
Members Only
|
||||
</Link>
|
||||
)}
|
||||
<Link
|
||||
{user && (
|
||||
<>
|
||||
<Link
|
||||
to="/events"
|
||||
className={getDesktopLinkClasses('/events')}
|
||||
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
||||
>
|
||||
Events
|
||||
</Link>
|
||||
<Link
|
||||
to="/members/calendar"
|
||||
className={getDesktopLinkClasses('/members/calendar')}
|
||||
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
||||
>
|
||||
Calendar
|
||||
</Link>
|
||||
<Link
|
||||
to="/members/directory"
|
||||
className={getDesktopLinkClasses('/members/directory')}
|
||||
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
||||
>
|
||||
Directory
|
||||
</Link>
|
||||
<Link
|
||||
to="/members/gallery"
|
||||
className={getDesktopLinkClasses('/members/gallery')}
|
||||
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
||||
>
|
||||
Gallery
|
||||
</Link>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button
|
||||
className={`${location.pathname.startsWith('/members/newsletters') || location.pathname.startsWith('/members/financials') || location.pathname.startsWith('/members/bylaws')
|
||||
? "text-[var(--orange-light)] hover:text-[var(--orange-coral)]"
|
||||
: "text-white hover:opacity-80"} text-[17.5px] font-medium transition-all flex items-center gap-1 bg-transparent border-none cursor-pointer px-3 py-1 rounded-md`}
|
||||
style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
Documents
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="start" className="bg-background min-w-[220px]">
|
||||
<DropdownMenuItem asChild>
|
||||
<Link to="/members/newsletters" className="w-full px-3 py-2 text-[var(--purple-deep)] hover:bg-[var(--lavender-300)] cursor-pointer"
|
||||
style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
Newsletters
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem asChild>
|
||||
<Link to="/members/financials" className="w-full px-3 py-2 text-[var(--purple-deep)] hover:bg-[var(--lavender-300)] cursor-pointer"
|
||||
style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
Financials
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem asChild>
|
||||
<Link to="/members/bylaws" className="w-full px-3 py-2 text-[var(--purple-deep)] hover:bg-[var(--lavender-300)] cursor-pointer"
|
||||
style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
Bylaws
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</>
|
||||
)}
|
||||
{/* <Link
|
||||
to="/resources"
|
||||
className={getDesktopLinkClasses('/resources')}
|
||||
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
||||
@@ -189,7 +269,7 @@ const PublicNavbar = () => {
|
||||
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
||||
>
|
||||
Contact Us
|
||||
</Link>
|
||||
</Link> */}
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
@@ -219,6 +299,18 @@ const PublicNavbar = () => {
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* User Info */}
|
||||
{user && (
|
||||
<div className="px-6 py-4 border-b border-[var(--purple-deep)]">
|
||||
<p className="text-white text-sm opacity-90" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
Welcome,
|
||||
</p>
|
||||
<p className="text-white font-semibold text-base" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
{user.first_name} {user.last_name}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Navigation Links */}
|
||||
<nav className="flex flex-col p-6 space-y-4">
|
||||
<Link
|
||||
@@ -284,6 +376,80 @@ const PublicNavbar = () => {
|
||||
</Link>
|
||||
)}
|
||||
|
||||
{user && (
|
||||
<>
|
||||
<Link
|
||||
to="/events"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
className={getMobileLinkClasses('/events')}
|
||||
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
||||
>
|
||||
Events
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
to="/members/calendar"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
className={getMobileLinkClasses('/members/calendar')}
|
||||
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
||||
>
|
||||
Calendar
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
to="/members/directory"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
className={getMobileLinkClasses('/members/directory')}
|
||||
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
||||
>
|
||||
Directory
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
to="/members/gallery"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
className={getMobileLinkClasses('/members/gallery')}
|
||||
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
||||
>
|
||||
Gallery
|
||||
</Link>
|
||||
|
||||
{/* Documents Section */}
|
||||
<div className="space-y-2">
|
||||
<p
|
||||
className={`text-base font-semibold px-4 py-2 rounded-md ${location.pathname.startsWith('/members/newsletters') || location.pathname.startsWith('/members/financials') || location.pathname.startsWith('/members/bylaws') ? 'text-[var(--orange-light)]' : 'text-white'}`}
|
||||
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
||||
>
|
||||
Documents
|
||||
</p>
|
||||
<Link
|
||||
to="/members/newsletters"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
className={getMobileSubLinkClasses('/members/newsletters')}
|
||||
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
||||
>
|
||||
Newsletters
|
||||
</Link>
|
||||
<Link
|
||||
to="/members/financials"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
className={getMobileSubLinkClasses('/members/financials')}
|
||||
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
||||
>
|
||||
Financials
|
||||
</Link>
|
||||
<Link
|
||||
to="/members/bylaws"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
className={getMobileSubLinkClasses('/members/bylaws')}
|
||||
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
||||
>
|
||||
Bylaws
|
||||
</Link>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<Link
|
||||
to="/resources"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
@@ -304,6 +470,16 @@ const PublicNavbar = () => {
|
||||
|
||||
{/* Auth Actions */}
|
||||
<div className="pt-4 border-t border-[var(--purple-deep)] space-y-2">
|
||||
{(user?.role === 'admin' || user?.role === 'superadmin') && (
|
||||
<Link
|
||||
to="/admin"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
className="block text-white text-base font-medium hover:bg-[var(--purple-deep)] px-4 py-3 rounded-md transition-colors"
|
||||
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
||||
>
|
||||
Dashboard
|
||||
</Link>
|
||||
)}
|
||||
<button
|
||||
onClick={() => {
|
||||
handleAuthAction();
|
||||
|
||||
Reference in New Issue
Block a user