style: Memperbarui komponen Navbar dengan menambahkan item menu dan ikon baru
marszayn
parent
19ff23b2d6
commit
4c21af6209
|
|
@ -42,7 +42,9 @@ const Footer = () => {
|
|||
Telepon: (021) 8092744 | Fax: (021) 8091056
|
||||
</p>
|
||||
<p className="text-sm">Email: dinaslh@jakarta.go.id</p>
|
||||
<p className="text-xs mt-6">© Copyright 2016</p>
|
||||
<p className="text-xs mt-6">
|
||||
© Copyright {new Date().getFullYear()}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,16 @@
|
|||
import React, { useState, useEffect } from "react";
|
||||
import { Search, LogIn, Menu, X, Moon, Sun } from "lucide-react";
|
||||
import {
|
||||
Search,
|
||||
LogIn,
|
||||
Menu,
|
||||
X,
|
||||
Moon,
|
||||
Sun,
|
||||
Home,
|
||||
Bell,
|
||||
FileText,
|
||||
BookOpen,
|
||||
} from "lucide-react";
|
||||
import {
|
||||
NavigationMenu,
|
||||
NavigationMenuList,
|
||||
|
|
@ -33,10 +44,8 @@ interface CustomPageProps extends InertiaPageProps {
|
|||
|
||||
const Navbar = () => {
|
||||
const { runPosts = [] } = usePage<CustomPageProps>().props;
|
||||
// const runPosts = props.runPosts || [];
|
||||
const [isScrolled, setIsScrolled] = useState(false);
|
||||
const [isDrawerOpen, setIsDrawerOpen] = useState(false);
|
||||
// const [searchQuery, setSearchQuery] = useState("");
|
||||
const { theme, setTheme } = useTheme();
|
||||
|
||||
// Handle scroll effect
|
||||
|
|
@ -54,56 +63,43 @@ const Navbar = () => {
|
|||
setTheme(theme === "light" ? "dark" : "light");
|
||||
};
|
||||
|
||||
const menuItems = [
|
||||
{ title: "HOME", icon: <Home className="h-4 w-4 mr-2" />, href: "/" },
|
||||
{
|
||||
title: "PENGUMUMAN",
|
||||
icon: <Bell className="h-4 w-4 mr-2" />,
|
||||
href: "/pengumuman",
|
||||
},
|
||||
{
|
||||
title: "UNDANGAN",
|
||||
icon: <FileText className="h-4 w-4 mr-2" />,
|
||||
href: "/undangan",
|
||||
},
|
||||
{
|
||||
title: "PERATURAN",
|
||||
icon: <BookOpen className="h-4 w-4 mr-2" />,
|
||||
href: "/peraturan",
|
||||
},
|
||||
];
|
||||
|
||||
const NavItems: React.FC<NavItemsProps> = ({ mobile = false, onClose }) => (
|
||||
<>
|
||||
<NavigationMenuItem>
|
||||
<Link
|
||||
href={`/`}
|
||||
onClick={mobile && onClose ? onClose : undefined}
|
||||
className={`inline-flex items-center px-4 py-2 transition-all duration-200 text-white hover:font-bold ${
|
||||
mobile
|
||||
? "flex w-full justify-center items-center mx-auto rounded-lg hover:bg-green-700"
|
||||
: "rounded-full hover:bg-green-800"
|
||||
}`}
|
||||
>
|
||||
HOME
|
||||
</Link>
|
||||
</NavigationMenuItem>
|
||||
{["PENGUMUMAN", "UNDANGAN", "PERATURAN"].map((item) => (
|
||||
<NavigationMenuItem key={item}>
|
||||
{menuItems.map((item) => (
|
||||
<NavigationMenuItem key={item.title}>
|
||||
<Link
|
||||
href={`/${item.toLowerCase()}`}
|
||||
href={item.href}
|
||||
onClick={mobile && onClose ? onClose : undefined}
|
||||
className={`inline-flex items-center px-4 py-2 transition-all duration-200 text-white hover:font-bold ${
|
||||
className={`inline-flex items-center px-4 py-2 transition-all duration-200 text-white text-sm hover:font-bold ${
|
||||
mobile
|
||||
? "w-full justify-center items-center rounded-lg hover:bg-green-700"
|
||||
: "rounded-full hover:bg-green-800"
|
||||
? "flex w-full justify-center items-center mx-auto rounded-lg hover:bg-green-700"
|
||||
: "rounded-full hover:bg-green-800 hover:scale-105"
|
||||
}`}
|
||||
>
|
||||
{item}
|
||||
{item.icon}
|
||||
{item.title}
|
||||
</Link>
|
||||
</NavigationMenuItem>
|
||||
))}
|
||||
{/* <NavigationMenuItem>
|
||||
<form onSubmit={handleSearch} className="flex items-center">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className={`bg-white text-black px-3 py-2 rounded-l-full focus:outline-none w-full ${
|
||||
mobile ? "w-32" : "w-40"
|
||||
}`}
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="ghost"
|
||||
className="bg-green-700 hover:bg-green-600 text-white rounded-r-full p-2"
|
||||
>
|
||||
<Search className="h-4 w-4 text-white" />
|
||||
</Button>
|
||||
</form>
|
||||
</NavigationMenuItem> */}
|
||||
<NavigationMenuItem>
|
||||
<SearchDialog />
|
||||
</NavigationMenuItem>
|
||||
|
|
@ -134,8 +130,8 @@ const Navbar = () => {
|
|||
/>
|
||||
</Link>
|
||||
|
||||
<NavigationMenu className="bg-green-800/90 rounded-full hidden md:block backdrop-blur-sm">
|
||||
<NavigationMenuList className="space-x-6">
|
||||
<NavigationMenu className="bg-green-800/90 rounded-full hidden md:block backdrop-blur-sm shadow-lg border border-green-700/30 hover:border-green-600/50 transition-all">
|
||||
<NavigationMenuList className="space-x-2 px-2 py-1">
|
||||
<NavItems />
|
||||
</NavigationMenuList>
|
||||
</NavigationMenu>
|
||||
|
|
@ -193,22 +189,10 @@ const Navbar = () => {
|
|||
</Drawer>
|
||||
</div>
|
||||
|
||||
{/* <Button
|
||||
variant="ghost"
|
||||
onClick={toggleTheme}
|
||||
className="p-3 bg-[#2d7448] hover:bg-[#16a34a] rounded-full text-white "
|
||||
>
|
||||
{theme === "light" ? (
|
||||
<Moon className="h-6 w-6" />
|
||||
) : (
|
||||
<Sun className="h-6 w-6" />
|
||||
)}
|
||||
</Button> */}
|
||||
|
||||
<div className="hidden md:block">
|
||||
<Link
|
||||
href="/login"
|
||||
className="inline-flex items-center bg-green-700 hover:bg-green-600 transition-all duration-200 text-white px-4 py-2 rounded-full"
|
||||
className="inline-flex items-center bg-green-700 hover:bg-green-600 transition-all duration-200 text-white px-4 py-2 rounded-full shadow-md hover:shadow-lg text-sm"
|
||||
>
|
||||
<LogIn className="mr-2 h-4 w-4" /> LOGIN
|
||||
</Link>
|
||||
|
|
|
|||
Loading…
Reference in New Issue