Adaptive header for modile and tablet

package-lock.json

@@ -8,6 +8,7 @@
       "name": "torrent_frontend",
       "version": "0.1.0",
       "dependencies": {
+        "clsx": "^2.1.1",
         "next": "14.2.3",
         "next-themes": "^0.3.0",
         "react": "^18",
@@ -1088,6 +1089,14 @@
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",

package.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "clsx": "^2.1.1",
     "next": "14.2.3",
     "next-themes": "^0.3.0",
     "react": "^18",

src/app/globals.css

@@ -41,3 +41,15 @@ body {
   color: var(--color-fg1);
   background-color: var(--color-bg0);
 }
+
+@media (max-width: 1280px) {
+  :root {
+    --app-width: 100%;
+  }
+}
+
+@media (max-width: 640px) {
+  :root {
+    font-size: calc((100vh / 1080) * 16);
+  }
+}

src/app/page.tsx

@@ -1,9 +1,6 @@
+import { GameCard } from "@/features/gameCard";
 import { Section } from "@/widgets/section";
 
 export default function Home() {
-  return (
+	return <div className="w-full max-w-[var(--app-width)] m-auto"></div>;
-    <div className="w-full max-w-[var(--app-width)] m-auto">
-      <Section name="Игры">a</Section>
-    </div>
-  );
 }

src/features/colorSchemeSwitch/colorSchemeSwitch.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import { SunIcon } from "@/shared/assets/icons";
+import { useTheme } from "next-themes";
+
+export const ColorSchemeSwitch = () => {
+	const { theme, setTheme } = useTheme();
+
+	return (
+		<>
+			<SunIcon
+				className="mr-5 h-8 w-8 cursor-pointer"
+				onClick={() => setTheme(theme == "light" ? "dark" : "light")}
+			/>
+		</>
+	);
+};

src/features/colorSchemeSwitch/index.ts

@@ -0,0 +1,3 @@
+import { ColorSchemeSwitch } from "./colorSchemeSwitch";
+
+export { ColorSchemeSwitch as SchemeSwitch };

src/features/schemeSwitch/index.ts

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

src/features/schemeSwitch/schemeSwitch.tsx

@@ -1,17 +0,0 @@
-"use client";
-
-import { SunIcon } from "@/shared/assets/icons";
-import { useTheme } from "next-themes";
-
-export const SchemeSwitch = () => {
-  const { theme, setTheme } = useTheme();
-
-  return (
-    <>
-      <SunIcon
-        className="mr-5 h-8 w-8 cursor-pointer"
-        onClick={() => setTheme(theme == "light" ? "dark" : "light")}
-      />
-    </>
-  );
-};

src/widgets/header/header.tsx

@@ -1,19 +1,36 @@
-import { SchemeSwitch } from "@/features/schemeSwitch";
+import { SchemeSwitch } from "@/features/colorSchemeSwitch";
 import { PersonIcon, SearchIcon } from "@/shared/assets/icons";
+import { MobileMenu } from "./mobileMenu/mobileMenu";
+import Link from "next/link";
+
+const sections = [
+	{ title: "Игры", href: "/games" },
+	{ title: "Фильмы", href: "/films" },
+	{ title: "Аудиокниги", href: "/audiobooks" },
+];
 
 export const Header = () => {
 	return (
-    <header className="w-full h-20 flex justify-around bg-bg1">
+		<header className="w-full h-20 bg-bg1">
 			<div
-        className="w-full h-full max-w-[var(--app-width)] 
+				className="w-full h-full max-w-[var(--app-width)] m-auto px-5
               flex items-center justify-between"
 			>
-        <h1 className="text-5xl font-bold">.Torrent</h1>
+				<h1 className="text-4xl font-bold flex items-center">
-        <div className="text-3xl">
+					<div className="lp:hidden">
-          {["Игры", "Фильмы", "Аудиокниги"].map((section) => (
+						<MobileMenu sections={sections} />
-            <a key={section} className="px-2 cursor-pointer hover:underline">
+					</div>
-              {section}
+					<Link href="/">.Torrent</Link>
-            </a>
+				</h1>
+				<div className="hidden text-2xl dsk:block">
+					{sections.map((section) => (
+						<Link
+							key={section.title}
+							className="px-5 cursor-pointer hover:underline"
+							href={section.href}
+						>
+							{section.title}
+						</Link>
 					))}
 				</div>
 				<div className="flex flex-col items-end">

src/widgets/header/mobileMenu/mobileMenu.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import clsx from "clsx";
+import Link from "next/link";
+import { useState } from "react";
+
+export const MobileMenu = ({
+	sections,
+}: {
+	sections: { title: string; href: string }[];
+}) => {
+	const [open, changeMenuOpen] = useState<boolean>(false);
+
+	return (
+		<div className="relative">
+			<button
+				className="peer w-16 h-16 *:w-12 *:h-1 *:bg-fg1 *:my-3 
+						*:transition-all *:duration-300 *:relative"
+				onClick={() => changeMenuOpen(!open)}
+				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",
+					open && "h-32"
+				)}
+				onClick={() => changeMenuOpen(false)}
+			>
+				{sections.map((section) => (
+					<Link
+						key={section.title}
+						className="text-xl py-2 cursor-pointer hover:underline"
+						href={section.href}
+					>
+						{section.title}
+					</Link>
+				))}
+			</div>
+		</div>
+	);
+};

src/widgets/section/section.tsx

@@ -7,7 +7,7 @@ export const Section = ({
 }) => {
 	return (
 		// open section onClick
-    <section className="w-full mt-8 cursor-pointer">
+		<section className="w-full m-5 mt-8 cursor-pointer">
 			<h2 className="text-4xl">{name}</h2>
 			<div>{children}</div>
 		</section>

tailwind.config.ts

@@ -23,6 +23,11 @@ const config: Config = {
 				fg4: "var(--color-fg4)",
 			},
 		},
+		screens: {
+			tb: "640px",
+			lp: "1024px",
+			dsk: "1280px",
+		},
 	},
 	plugins: [],
 };