From f84d345612072ad4909397521f3c6538c68ea1f5 Mon Sep 17 00:00:00 2001 From: Poyraz Avsever Date: Tue, 10 Mar 2026 10:51:22 +0300 Subject: [PATCH] feat: update layout and components for improved styling and functionality --- app/layout.tsx | 2 +- components/home-hero.tsx | 2 +- components/references-section.tsx | 6 +- components/search-command.tsx | 40 ++++------ components/site-navbar.tsx | 122 +++++++++++++++++++++++++++--- 5 files changed, 132 insertions(+), 40 deletions(-) diff --git a/app/layout.tsx b/app/layout.tsx index b68325f..a7f30c7 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -47,7 +47,7 @@ export default function RootLayout({
-
{children}
+
{children}
diff --git a/components/home-hero.tsx b/components/home-hero.tsx index b75f83b..cb87037 100644 --- a/components/home-hero.tsx +++ b/components/home-hero.tsx @@ -68,7 +68,7 @@ export function HomeHero() { alt="Poyraz Avsever" width={240} height={240} - className="absolute right-0 bottom-0 h-auto w-48 object-contain" + className="absolute right-0 bottom-0 h-auto w-20 md:w-48 object-contain" /> diff --git a/components/references-section.tsx b/components/references-section.tsx index 00a88e2..81c764f 100644 --- a/components/references-section.tsx +++ b/components/references-section.tsx @@ -1,16 +1,12 @@ "use client"; import Link from "next/link"; -import { Typography } from "poyraz-ui/atoms"; import { TestimonialCard } from "poyraz-ui/molecules"; import { REFERENCES } from "@/data/references"; export function ReferencesSection() { return ( -
- - References - +
diff --git a/components/search-command.tsx b/components/search-command.tsx index f35828b..ce75ab2 100644 --- a/components/search-command.tsx +++ b/components/search-command.tsx @@ -2,7 +2,7 @@ import { Icon } from "@iconify/react"; import { useRouter } from "next/navigation"; -import { useEffect, useMemo, useState } from "react"; +import { useEffect, useMemo } from "react"; import { CommandPalette, CommandPaletteContent, @@ -13,15 +13,18 @@ import { CommandPaletteItem, CommandPaletteList, CommandPaletteSeparator, - CommandPaletteTrigger, } from "poyraz-ui/molecules"; import { COMMAND_PALETTE_GROUPS, type CommandPaletteItem as PaletteItem, } from "@/lib/command-palette-links"; -export function SearchCommand() { - const [open, setOpen] = useState(false); +type SearchCommandProps = { + open: boolean; + onOpenChange: (open: boolean) => void; +}; + +export function SearchCommand({ open, onOpenChange }: SearchCommandProps) { const router = useRouter(); const shortcut = useMemo(() => { @@ -36,15 +39,15 @@ export function SearchCommand() { if (!isShortcut) return; event.preventDefault(); - setOpen((prev) => !prev); + onOpenChange(!open); }; window.addEventListener("keydown", onKeyDown); return () => window.removeEventListener("keydown", onKeyDown); - }, []); + }, [open, onOpenChange]); const handleCommandSelect = (item: PaletteItem) => { - setOpen(false); + onOpenChange(false); if (item.external) { window.open(item.href, "_blank", "noopener,noreferrer"); @@ -55,23 +58,12 @@ export function SearchCommand() { }; return ( - - - - - - - + + + No results found. {COMMAND_PALETTE_GROUPS.map((group, index) => ( diff --git a/components/site-navbar.tsx b/components/site-navbar.tsx index 4574ccc..18bedd3 100644 --- a/components/site-navbar.tsx +++ b/components/site-navbar.tsx @@ -2,6 +2,8 @@ import { Icon } from "@iconify/react"; import Link from "next/link"; +import { usePathname } from "next/navigation"; +import { useMemo, useState } from "react"; import { Avatar, AvatarFallback, AvatarImage, Separator } from "poyraz-ui/atoms"; import { DropdownMenu, @@ -10,13 +12,41 @@ import { DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, + Sheet, + SheetClose, + SheetContent, + SheetTitle, + SheetTrigger, } from "poyraz-ui/molecules"; import { SearchCommand } from "@/components/search-command"; import { NAV_LINKS, SOCIAL_LINKS } from "@/lib/links"; +function getNavLinkClass(isActive: boolean) { + return [ + "inline-flex border-b-2 pb-1 text-sm transition-colors", + isActive + ? "border-red-600 text-foreground" + : "border-transparent text-foreground/55 hover:text-foreground", + ].join(" "); +} + export function SiteNavbar() { + const pathname = usePathname(); + const [searchOpen, setSearchOpen] = useState(false); + + const shortcut = useMemo(() => { + if (typeof window === "undefined") return "Ctrl K"; + const isMac = /(Mac|iPhone|iPad)/i.test(window.navigator.platform); + return isMac ? "Cmd K" : "Ctrl K"; + }, []); + + const isActiveLink = (href: string) => { + if (href === "/") return pathname === "/"; + return pathname === href || pathname.startsWith(`${href}/`); + }; + return ( -
+
@@ -26,18 +56,15 @@ export function SiteNavbar() { -
+
- - + + @@ -72,6 +110,72 @@ export function SiteNavbar() {
+ +
+ + + + Menu + + + Mobile Menu +
+ + + + + + + + + + +
+ {SOCIAL_LINKS.map((item) => ( + + + {item.label} + + ))} +
+
+ + +
+ +
); }