daniel-gitea/cgr-next-js
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor NavItems component

Browse Source
This commit is contained in:
Eduard Schulteis
2026-01-26 22:30:50 +01:00
parent c97393c751
commit 8bbe4a2e01
6 changed files with 107 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/layout.tsx
View File

@@ -1,7 +1,5 @@
import type { Metadata } from "next";
import { ThemeProvider } from "next-themes";
import { Geist, Geist_Mono } from "next/font/google";
import { ThemeToggle } from "../components/ThemeToggle";
import "./globals.css";
const geistSans = Geist({
@@ -26,9 +24,7 @@ export default function RootLayout({
}>) {
return (
<html lang="en" className="dark">
<body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
{children}
</body>
<body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>{children}</body>
</html>
);
}

2
components/Header.tsx
View File

@@ -8,7 +8,7 @@ const Header = () => {
<header className="sticky top-0 header">
<div className="container header-wrapper">
<Link href="/">
<Image src="/logo.svg" alt="CGR Logo" width={100} height={100} className="h-8 w-auto cursor-pointer"/>
<Image src="/logo.svg" alt="CGR Logo" width={100} height={100} className="h-8 w-auto cursor-pointer" />
</Link>
<nav className="hidden sm:block">
<NavItems />

36
components/NavItems.tsx
View File

@@ -1,36 +0,0 @@
"use client";
import { NAV_ITEMS } from "@/lib/constans";
import Link from "next/link";
import { usePathname } from "next/navigation";
const NavItems = () => {
const pathname = usePathname();
const isActive = (path: string) => {
if(path === '/') return pathname === '/';
return pathname.startsWith(path);
}
return (
<ul className="flex flex-col sm:flex-row p-2 gap-3 sm:gap-10 font-medium">
{NAV_ITEMS.map(({ label, href }) => {
const active = isActive(href);
return (
<li key={href}>
<Link href={href} className={`hover:text-yellow-500 transition-colors ${
active
? 'text-gray-100 font-bold'
: ''
}`}
>
{label}
</Link>
</li>
);
})}
</ul>
);
};
export default NavItems;

33
components/NavItems/NavItem.tsx Normal file
View File

@@ -0,0 +1,33 @@
"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
type NavItemProps = {
item: {
label: string;
href: string;
};
};
export const NavItem: React.FC<NavItemProps> = ({ item: { label, href } }) => {
const pathname = usePathname();
const isActive = (path: string) => {
if (path === "/") return pathname === "/";
return pathname.startsWith(path);
};
const active = isActive(href);
return (
<li key={href}>
<Link
href={href}
className={`hover:text-yellow-500 transition-colors ${active ? "text-gray-100 font-bold" : ""}`}
>
{label}
</Link>
</li>
);
};

16
components/NavItems/index.tsx Normal file
View File

@@ -0,0 +1,16 @@
"use client";
import { NAV_ITEMS } from "@/lib/constans";
import { NavItem } from "./NavItem";
const NavItems = () => {
return (
<ul className="flex flex-col sm:flex-row p-2 gap-3 sm:gap-10 font-medium">
{NAV_ITEMS.map((item) => (
<NavItem key={item.href} item={item} />
))}
</ul>
);
};
export default NavItems;

29
components/UserDropdown.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import { Button } from "@/components/ui/button"
import { Button } from "@/components/ui/button";
import {
DropdownMenu,
DropdownMenuContent,
@@ -9,20 +9,20 @@ import {
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { useRouter } from "next/navigation"
} from "@/components/ui/dropdown-menu";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { useRouter } from "next/navigation";
import { LogOut } from "lucide-react";
import NavItems from "./NavItems";
const UserDropdown = () => {
const router = useRouter();
const handleSignOut = async() => {
router.push('/sign-in');
}
const handleSignOut = async () => {
router.push("/sign-in");
};
const user = { name: 'Ivan', email: 'ivan@cgr.js' };
const user = { name: "Ivan", email: "ivan@cgr.js" };
return (
<DropdownMenu>
@@ -30,9 +30,7 @@ const UserDropdown = () => {
<Button variant="ghost" className="flex items-center gap-3 text-gray-4 hover:text-yellow-500">
<Avatar className="h-8 w-8">
{/* <AvatarImage src="https://github.com/shadcn.png" /> */}
<AvatarFallback className="bg-yellow-500 text-yellow-900 text-sm font-bold">
{user.name[0]}
</AvatarFallback>
<AvatarFallback className="bg-yellow-500 text-yellow-900 text-sm font-bold">{user.name[0]}</AvatarFallback>
</Avatar>
<div className="hidden md:flex flex-col items-start">
<span className="text-base font-medium text-gray-400">{user.name}</span>
@@ -59,13 +57,16 @@ const UserDropdown = () => {
<NavItems />
</nav>
<DropdownMenuSeparator className="sm:hidden bg-gray-600" />
<DropdownMenuItem onClick={handleSignOut} className="text-gray-100 text-md font-medium focus:bg-transparent focus:text-yellow-500 transition-colors cursor-pointer">
<DropdownMenuItem
onClick={handleSignOut}
className="text-gray-100 text-md font-medium focus:bg-transparent focus:text-yellow-500 transition-colors cursor-pointer"
>
<LogOut className="mr-2 h-4 w-4" />
Logout
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
)
}
);
};
export default UserDropdown;