StepanovPlaton/torrent_frontend
1
0
Fork 0
mirror of https://github.com/StepanovPlaton/torrent_frontend.git synced 2026-04-04 04:40:50 +04:00
Code Issues Packages Projects Releases Wiki Activity

Adaptive header for modile and tablet

Browse Source
This commit is contained in:
Степанов Платон
2024-05-09 14:55:24 +04:00
parent a634c194fe
commit 4f8301d1e8
13 changed files with 192 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/globals.css
View File

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

7
src/app/page.tsx
View File

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

17
src/features/colorSchemeSwitch/colorSchemeSwitch.tsx Normal file
View File

@@ -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")}
/>
</>
);
};

3
src/features/colorSchemeSwitch/index.ts Normal file
View File

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

2
src/features/gameCard/gameCard.tsx
View File

@@ -1,3 +1,3 @@
export const GameCard = () => {
return <></>;
return <></>;
};

3
src/features/schemeSwitch/index.ts
View File

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

17
src/features/schemeSwitch/schemeSwitch.tsx
View File

@@ -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")}
/>
</>
);
};

97
src/widgets/header/header.tsx
View File

@@ -1,45 +1,62 @@
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">
<div
className="w-full h-full max-w-[var(--app-width)]
return (
<header className="w-full h-20 bg-bg1">
<div
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>
<div className="text-3xl">
{["Игры", "Фильмы", "Аудиокниги"].map((section) => (
<a key={section} className="px-2 cursor-pointer hover:underline">
{section}
</a>
))}
</div>
<div className="flex flex-col items-end">
<span className="flex items-center mb-1 ">
<SchemeSwitch />
<span className="cursor-pointer flex items-center">
<PersonIcon className="mr-1 h-4 w-4" />
Войти
</span>
</span>
<label className="flex flex-col items-start relative w-36">
<input
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-all h-0 flex items-center relative bottom-3"
>
<SearchIcon className="w-4 h-4 mx-2" />
Поиск
</span>
</label>
</div>
</div>
</header>
);
>
<h1 className="text-4xl font-bold flex items-center">
<div className="lp:hidden">
<MobileMenu sections={sections} />
</div>
<Link href="/">.Torrent</Link>
</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">
<span className="flex items-center mb-1 ">
<SchemeSwitch />
<span className="cursor-pointer flex items-center">
<PersonIcon className="mr-1 h-4 w-4" />
Войти
</span>
</span>
<label className="flex flex-col items-start relative w-36">
<input
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-all h-0 flex items-center relative bottom-3"
>
<SearchIcon className="w-4 h-4 mx-2" />
Поиск
</span>
</label>
</div>
</div>
</header>
);
};

50
src/widgets/header/mobileMenu/mobileMenu.tsx Normal file
View File

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

22
src/widgets/section/section.tsx
View File

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