09-07

src/widgets/header/header.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { MobileMenu } from "./mobileMenu/mobileMenu";
+import Link from "next/link";
+import { useSelectedLayoutSegment } from "next/navigation";
+import clsx from "clsx";
+import { SectionService } from "@/features/sections";
+import { ColorSchemeSwitch } from "@/features/colorSchemeSwitch";
+
+export const Header = () => {
+  const currentPageName = useSelectedLayoutSegment();
+
+  return (
+    <header className="w-full h-20 z-10 bg-bg1 sticky top-0 shadow-xl">
+      <div
+        className="w-full h-full max-w-[var(--app-width)] m-auto px-5
+              flex items-center justify-between"
+      >
+        <h1 className="text-4xl font-bold flex items-center">
+          <div className="lp:hidden">
+            <MobileMenu />
+          </div>
+          <Link href="/">JellyBelly</Link>
+        </h1>
+        <div className="hidden text-2xl lp:block">
+          {SectionService.sections.map((section) => (
+            <Link
+              key={section}
+              className={clsx(
+                "px-5 cursor-pointer hover:underline underline-offset-2",
+                currentPageName === section && "underline"
+              )}
+              href={"/" + section}
+            >
+              {SectionService.sectionsConfiguration[section].sectionName}
+            </Link>
+          ))}
+        </div>
+        <ColorSchemeSwitch />
+
+        {/* <label className="flex flex-col items-start relative w-36">
+          <input
+            type="search"
+            className="peer/search w-full rounded-lg bg-bg4 px-2"
+            placeholder=" "
+          />
+          <span
+            className="peer-focus/search:opacity-0 
+                  				peer-[:not(:placeholder-shown)]/search:opacity-0 
+                  				transition-opacity h-0 flex items-center relative bottom-3"
+          >
+            <SearchIcon className="w-4 h-4 mx-2" />
+            Поиск
+          </span>
+        </label> */}
+      </div>
+    </header>
+  );
+};