Update to new layout

package.json

@@ -19,6 +19,7 @@
     "@trpc/react-query": "^10.45.2",
     "@trpc/server": "^10.45.2",
     "cheerio": "1.0.0-rc.12",
+    "clsx": "^2.1.1",
     "daisyui": "^2.52.0",
     "jotai": "^2.8.4",
     "jotai-trpc": "^0.7.0",
@@ -33,6 +34,7 @@
     "sass": "^1.77.6",
     "seedrandom": "^3.0.5",
     "superjson": "2.2.1",
+    "tailwind-merge": "^2.4.0",
     "zod": "^3.23.8"
   },
   "devDependencies": {

src/components/base/button.tsx

@@ -22,10 +22,10 @@ export const Button: FC<PropsWithChildren<ButtonProps>> = ({
       disabled={disabled}
       type="button"
       className={cn(
-        "flex overflow-clip border-black bg-white py-[1px] leading-none tracking-tight hover:hover-hover:pointer-fine:bg-black hover:hover-hover:pointer-fine:text-white",
+        "flex overflow-clip border-off-black bg-white py-[1px] leading-none tracking-tight hover:hover-hover:pointer-fine:bg-off-black hover:hover-hover:pointer-fine:text-white",
         square ? "rounded-none" : "rounded-full",
-        plain ? "border-0" : "border-[3px] px-3",
-        active && "bg-black text-white",
+        plain ? "border-0" : "border-4 px-3",
+        active && "bg-off-black text-white",
         disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
         props.className,
       )}

src/components/layout/main/MainHeader/index.tsx

@@ -1,20 +1,100 @@
 import Link from "next/link";
-import { type FC, useState } from "react";
+import { useRouter } from "next/router";
+import { type ComponentProps, type HTMLProps, useState } from "react";
+import type { UrlObject } from "url";
 
 import ImageZezLogo from "~/assets/img/shared/zez-logo.png";
+import { Button } from "~/components/base/button";
 import { AppDrawer } from "~/components/base/drawer";
-import ImageMenuBurger from "~/components/base/drawer/assets/menu-burger.svg";
 import { useNavigationChange } from "~/hooks/onNavigation";
 import { fontDisplay } from "~/utils/font";
 import { cn } from "~/utils/style";
 
-import { SideNav } from "../SideNav";
+export type NavLinkProps = Omit<HTMLProps<typeof Link>, "children"> & {
+  href?: string | UrlObject | null;
+  label: string;
+};
+
+const links = [
+  {
+    href: "/archive",
+    label: "archive",
+  },
+  {
+    href: "/about",
+    label: "about",
+  },
+] satisfies NavLinkProps[];
+
+const socials = [
+  {
+    href: "https://www.instagram.com/zezfestival/",
+    label: "ig",
+  },
+  {
+    href: "https://www.facebook.com/zavodzaeksperimentalnizvuk",
+    label: "fb",
+  },
+] satisfies NavLinkProps[];
+
+const NavLink = ({ href, label, ...props }: NavLinkProps) => {
+  const router = useRouter();
+  const path = router.asPath;
+
+  const active = (link: NavLinkProps): boolean => {
+    return path.startsWith(String(link.href));
+  };
+
+  const isActive = active({ href, label });
+
+  return (
+    <Link
+      href={href ?? "#"}
+      className={cn(
+        "inline-block self-start rounded-full text-[45px] leading-none max-br:text-[42px]",
+        props.className,
+      )}
+      onClick={(event) => {
+        if (!href) {
+          event.preventDefault();
+        }
+        props.onClick?.(event as never);
+      }}
+    >
+      <Button
+        active={isActive}
+        className="px-4 pb-1.5 leading-[.85em]"
+        tabIndex={-1}
+      >
+        {label}
+      </Button>
+    </Link>
+  );
+};
 
-export type MainHeaderProps = {
-  withoutLogo?: boolean;
+type NavProps = ComponentProps<"nav"> & {
+  sectionProps?: ComponentProps<"div">;
 };
 
-export const MainHeader: FC<MainHeaderProps> = ({ withoutLogo }) => {
+const Nav = ({ sectionProps, ...props }: NavProps) => {
+  return (
+    <nav {...props} className={cn("flex gap-8", props.className)}>
+      <div {...sectionProps} className={cn("flex", sectionProps?.className)}>
+        <NavLink className="max-br:hidden" label="generator" />
+        {links.map((link) => {
+          return <NavLink key={String(link.href)} {...link} />;
+        })}
+      </div>
+      <div {...sectionProps} className={cn("flex", sectionProps?.className)}>
+        {socials.map((link) => {
+          return <NavLink key={String(link.href)} {...link} />;
+        })}
+      </div>
+    </nav>
+  );
+};
+
+export const MainHeader = () => {
   const [navOpen, setNavOpen] = useState(false);
   useNavigationChange(() => setNavOpen(false));
 
@@ -25,36 +105,36 @@ export const MainHeader: FC<MainHeaderProps> = ({ withoutLogo }) => {
         fontDisplay.className,
       )}
     >
-      <h1 className="w-28 leading-[1.15] tracking-tight br:w-48 br:text-2xl br:leading-6">
-        <Link href="/">Zavod za eksperimentalni zvuk</Link>
-      </h1>
+      <Nav className="max-br:hidden" />
 
-      {!withoutLogo ? (
+      <Link className="ml-auto hover:contrast-200 max-br:hidden" href="/">
         <img
           alt="ZEZ logo"
-          className="ml-auto h-20 max-br:hidden"
+          className="h-20 max-br:hidden"
           src={ImageZezLogo.src}
         />
-      ) : null}
-      <div className="ml-auto block h-12 br:hidden">
-        <button type="button" onClick={() => setNavOpen((open) => !open)}>
-          <img
-            alt="Open menu"
-            className="h-full w-full object-contain"
-            src={(ImageMenuBurger as { src: string }).src}
-          />
-        </button>
+      </Link>
+
+      <div className="block br:hidden">
+        <NavLink label="menu" onClick={() => setNavOpen((open) => !open)} />
+        <NavLink label="generator" />
         <AppDrawer showCloseButton open={navOpen} onChange={setNavOpen}>
-          <div className="flex w-full flex-col bg-white p-4 text-black">
-            <SideNav className="mt-32" />
+          <div className="flex w-full flex-col bg-white text-black">
+            <Nav
+              className="flex-col"
+              sectionProps={{
+                className: "flex-col",
+              }}
+            />
           </div>
 
           <div className="mb-[18px] ml-[10px] mt-auto">
-            <img
-              alt="ZEZ logo"
-              className="h-[74px] w-auto"
-              src={ImageZezLogo.src}
-            />
+            <Link
+              className="ml-auto flex justify-end hover:contrast-200"
+              href="/"
+            >
+              <img alt="ZEZ logo" className="h-[76px]" src={ImageZezLogo.src} />
+            </Link>
           </div>
         </AppDrawer>
       </div>