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>
+  );
+};

src/widgets/header/index.ts

@@ -0,0 +1,3 @@
+import { Header } from "./header";
+
+export { Header };

src/widgets/header/mobileMenu/mobileMenu.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { SectionService } from "@/features/sections";
+import clsx from "clsx";
+import Link from "next/link";
+import { useState } from "react";
+
+export const MobileMenu = () => {
+  const [open, changeMenuOpen] = useState<boolean>(false);
+
+  return (
+    <div className="relative">
+      <button
+        className="w-16 h-16 *:w-12 *:h-1 *:bg-fg1 *:my-3 
+						*:transition-all *:duration-300 *:relative"
+        onClick={(e) => {
+          changeMenuOpen(!open);
+          e.stopPropagation();
+        }}
+        onBlur={() => changeMenuOpen(false)}
+      >
+        <div
+          className={clsx(open && "rotate-45 top-4", !open && "top-0")}
+        ></div>
+        <div className={clsx(open && "opacity-0")}></div>
+        <div
+          className={clsx(open && "-rotate-45 bottom-4", !open && "bottom-0")}
+        ></div>
+      </button>
+      <div
+        className={clsx(
+          "h-0 absolute transition-all duration-300 overflow-hidden\
+					bg-bg4 rounded-lg px-4 flex flex-col shadow-xl",
+          open && "h-56"
+        )}
+        onClick={() => changeMenuOpen(false)}
+      >
+        {SectionService.sections.map((section) => (
+          <Link
+            key={section}
+            className="text-xl py-2 cursor-pointer hover:underline"
+            href={"/" + section}
+          >
+            {SectionService.sectionsConfiguration[section].sectionName}
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+};