feat(ui): remove registration submenu
This commit is contained in:
GoHorse Deploy
parent
30803ccde6
commit
9f0b6ca809
1 changed files with 129 additions and 161 deletions
|
|
@ -1,161 +1,129 @@
|
|||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import Link from "next/link"
|
||||
import Image from "next/image"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu"
|
||||
import { Menu, User, LogIn, Building2, UserPlus } from "lucide-react"
|
||||
import { getCurrentUser } from "@/lib/auth"
|
||||
import { useTranslation } from "@/lib/i18n"
|
||||
import { LanguageSwitcher } from "@/components/language-switcher"
|
||||
|
||||
export function Navbar() {
|
||||
const [isOpen, setIsOpen] = useState(false)
|
||||
const user = getCurrentUser()
|
||||
const { t } = useTranslation()
|
||||
|
||||
const navigationItems = [
|
||||
{ href: "/jobs", label: t('nav.jobs') },
|
||||
{ href: "/companies", label: t('footer.empresas') },
|
||||
{ href: "/blog", label: t('footer.blog') },
|
||||
]
|
||||
|
||||
return (
|
||||
<nav className="bg-[#1F2F40] sticky top-0 z-50 shadow-sm border-b border-white/20">
|
||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex h-16 items-center justify-between">
|
||||
{/* Logo */}
|
||||
<Link href="/" className="flex items-center gap-2 hover:opacity-80 transition-opacity">
|
||||
<Image src="/logohorse.png" alt="GoHorse Jobs" width={48} height={48} />
|
||||
<span className="text-xl font-bold">
|
||||
<span className="text-white">GoHorse </span>
|
||||
<span className="text-primary">Jobs</span>
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
{/* Desktop Navigation - moved to right side */}
|
||||
<div className="hidden md:flex items-center gap-8 ml-auto mr-8">
|
||||
{navigationItems.map((item) => (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className="text-sm font-medium text-white hover:text-primary transition-colors"
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Desktop Auth Buttons */}
|
||||
<div className="hidden md:flex items-center gap-3">
|
||||
{/* LanguageSwitcher removed to match design */ }
|
||||
{user ? (
|
||||
<Link href="/dashboard">
|
||||
<Button variant="ghost" className="gap-2 text-white hover:text-primary transition-colors">
|
||||
<User className="w-4 h-4" />
|
||||
Dashboard
|
||||
</Button>
|
||||
</Link>
|
||||
) : (
|
||||
<div className="flex items-center gap-0 border border-primary rounded-md overflow-hidden bg-transparent">
|
||||
<Link href="/login">
|
||||
<Button variant="ghost" className="gap-2 text-primary hover:bg-primary/10 rounded-none border-r border-primary px-6 h-9 font-normal">
|
||||
{t('footer.login')}
|
||||
</Button>
|
||||
</Link>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon" className="text-primary hover:bg-primary/10 rounded-none px-3 h-9 w-9">
|
||||
<Menu className="w-5 h-5" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-56">
|
||||
<DropdownMenuItem asChild>
|
||||
<Link href="/register/user" className="flex items-center gap-2 cursor-pointer">
|
||||
<UserPlus className="w-4 h-4" />
|
||||
<span>Cadastrar Usuário</span>
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem asChild>
|
||||
<Link href="/register" className="flex items-center gap-2 cursor-pointer">
|
||||
<Building2 className="w-4 h-4" />
|
||||
<span>Cadastrar Empresa</span>
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem asChild>
|
||||
<Link href="/auth/login" className="flex items-center gap-2 cursor-pointer">
|
||||
<LogIn className="w-4 h-4" />
|
||||
<span>Login</span>
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu */}
|
||||
<Sheet open={isOpen} onOpenChange={setIsOpen}>
|
||||
<SheetTrigger asChild className="md:hidden">
|
||||
<Button variant="ghost" size="icon">
|
||||
<Menu className="w-5 h-5" />
|
||||
</Button>
|
||||
</SheetTrigger>
|
||||
<SheetContent side="right" className="w-80">
|
||||
<div className="flex flex-col gap-4 mt-6">
|
||||
<div className="flex items-center gap-2 pb-4 border-b justify-center">
|
||||
<Image src="/logohorse.png" alt="GoHorse Jobs" width={48} height={48} />
|
||||
<span className="text-lg font-bold">GoHorse Jobs</span>
|
||||
</div>
|
||||
|
||||
{navigationItems.map((item) => (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className="text-sm text-muted-foreground hover:text-foreground transition-colors p-2 rounded-lg hover:bg-muted"
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
))}
|
||||
|
||||
<div className="flex flex-col gap-2 mt-4 pt-4 border-t">
|
||||
{user ? (
|
||||
<Link href="/dashboard" onClick={() => setIsOpen(false)}>
|
||||
<Button variant="ghost" className="w-full justify-start gap-2">
|
||||
<User className="w-4 h-4" />
|
||||
Dashboard
|
||||
</Button>
|
||||
</Link>
|
||||
) : (
|
||||
<>
|
||||
<Link href="/login" onClick={() => setIsOpen(false)}>
|
||||
<Button variant="ghost" className="w-full justify-start gap-2">
|
||||
<LogIn className="w-4 h-4" />
|
||||
{t('nav.login')}
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/register" onClick={() => setIsOpen(false)}>
|
||||
<Button className="w-full justify-start gap-2">
|
||||
<User className="w-4 h-4" />
|
||||
{t('nav.register')}
|
||||
</Button>
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import Link from "next/link"
|
||||
import Image from "next/image"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
|
||||
import { Menu, User, LogIn } from "lucide-react"
|
||||
import { getCurrentUser } from "@/lib/auth"
|
||||
import { useTranslation } from "@/lib/i18n"
|
||||
import { LanguageSwitcher } from "@/components/language-switcher"
|
||||
|
||||
export function Navbar() {
|
||||
const [isOpen, setIsOpen] = useState(false)
|
||||
const user = getCurrentUser()
|
||||
const { t } = useTranslation()
|
||||
|
||||
const navigationItems = [
|
||||
{ href: "/jobs", label: t('nav.jobs') },
|
||||
{ href: "/companies", label: t('footer.empresas') },
|
||||
{ href: "/blog", label: t('footer.blog') },
|
||||
]
|
||||
|
||||
return (
|
||||
<nav className="bg-[#1F2F40] sticky top-0 z-50 shadow-sm border-b border-white/20">
|
||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex h-16 items-center justify-between">
|
||||
{/* Logo */}
|
||||
<Link href="/" className="flex items-center gap-2 hover:opacity-80 transition-opacity">
|
||||
<Image src="/logohorse.png" alt="GoHorse Jobs" width={48} height={48} />
|
||||
<span className="text-xl font-bold">
|
||||
<span className="text-white">GoHorse </span>
|
||||
<span className="text-primary">Jobs</span>
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
{/* Desktop Navigation - moved to right side */}
|
||||
<div className="hidden md:flex items-center gap-8 ml-auto mr-8">
|
||||
{navigationItems.map((item) => (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className="text-sm font-medium text-white hover:text-primary transition-colors"
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Desktop Auth Buttons */}
|
||||
<div className="hidden md:flex items-center gap-3">
|
||||
<LanguageSwitcher />
|
||||
{user ? (
|
||||
<Link href="/dashboard">
|
||||
<Button variant="ghost" className="gap-2 text-white hover:text-primary transition-colors">
|
||||
<User className="w-4 h-4" />
|
||||
Dashboard
|
||||
</Button>
|
||||
</Link>
|
||||
) : (
|
||||
<Link href="/login">
|
||||
<Button variant="outline" className="border-primary text-primary hover:bg-primary/10 px-6 h-9 font-normal">
|
||||
{t('footer.login')}
|
||||
</Button>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu */}
|
||||
<Sheet open={isOpen} onOpenChange={setIsOpen}>
|
||||
<SheetTrigger asChild className="md:hidden">
|
||||
<Button variant="ghost" size="icon">
|
||||
<Menu className="w-5 h-5" />
|
||||
</Button>
|
||||
</SheetTrigger>
|
||||
<SheetContent side="right" className="w-80">
|
||||
<div className="flex flex-col gap-4 mt-6">
|
||||
<div className="flex items-center gap-2 pb-4 border-b justify-center">
|
||||
<Image src="/logohorse.png" alt="GoHorse Jobs" width={48} height={48} />
|
||||
<span className="text-lg font-bold">GoHorse Jobs</span>
|
||||
</div>
|
||||
|
||||
{navigationItems.map((item) => (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className="text-sm text-muted-foreground hover:text-foreground transition-colors p-2 rounded-lg hover:bg-muted"
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
))}
|
||||
|
||||
<div className="flex flex-col gap-2 mt-4 pt-4 border-t">
|
||||
{user ? (
|
||||
<Link href="/dashboard" onClick={() => setIsOpen(false)}>
|
||||
<Button variant="ghost" className="w-full justify-start gap-2">
|
||||
<User className="w-4 h-4" />
|
||||
Dashboard
|
||||
</Button>
|
||||
</Link>
|
||||
) : (
|
||||
<>
|
||||
<Link href="/login" onClick={() => setIsOpen(false)}>
|
||||
<Button variant="ghost" className="w-full justify-start gap-2">
|
||||
<LogIn className="w-4 h-4" />
|
||||
{t('nav.login')}
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/register" onClick={() => setIsOpen(false)}>
|
||||
<Button className="w-full justify-start gap-2">
|
||||
<User className="w-4 h-4" />
|
||||
{t('nav.register')}
|
||||
</Button>
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
<div className="mt-4 flex justify-center">
|
||||
<LanguageSwitcher />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue