diff options
| author | l3wdfut4pwr l3wdfut4pwr <l3wdfut4pwr@gmail.com> | 2026-01-22 07:14:19 +0200 |
|---|---|---|
| committer | l3wdfut4pwr l3wdfut4pwr <l3wdfut4pwr@gmail.com> | 2026-01-22 07:14:19 +0200 |
| commit | a6ec45c2073786eed5e7020887d24dfaba94de6d (patch) | |
| tree | 69582af1749dd37d960beeadeabdef43d8bce426 | |
| parent | d092cdeb5bf3f91202b96bf189473ef5cb282b8d (diff) | |
update navbar
| -rw-r--r-- | src/app/globals.css | 7 | ||||
| -rw-r--r-- | src/app/layout.tsx | 2 | ||||
| -rw-r--r-- | src/components/header/NavBar.tsx | 34 | ||||
| -rw-r--r-- | src/components/header/SubNav.tsx | 2 | ||||
| -rw-r--r-- | src/components/ui/switch.tsx | 2 |
5 files changed, 31 insertions, 16 deletions
diff --git a/src/app/globals.css b/src/app/globals.css index 51cd92c..9420f04 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -3,6 +3,13 @@ @custom-variant dark (&:is(.dark *)); +@theme { + --breakpoint-sm: 480px; + --breakpoint-md: 768px; + --breakpoint-xl: 1280px; /* старт xl с 1280 */ + --breakpoint-2xl: 1920px; /* старт 2xl с 1920 */ +} + :root { --background: #05040a; --foreground: #ffffff; diff --git a/src/app/layout.tsx b/src/app/layout.tsx index b8523d0..e81e45b 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -23,7 +23,7 @@ export default function RootLayout({ <body className={`${nunito.className} antialiased px-37.5 xl:px-10`} > - <div className="max-w-375 min-h-dvh flex flex-col mx-auto"> + <div className="min-h-dvh flex flex-col mx-auto xl:max-w-[1200px] 2xl:max-w-[1500px] "> <GlobalContextProvider> <Header /> <main className="mt-[50px] mb-[80px] grow"> diff --git a/src/components/header/NavBar.tsx b/src/components/header/NavBar.tsx index 34e9fd0..e83d238 100644 --- a/src/components/header/NavBar.tsx +++ b/src/components/header/NavBar.tsx @@ -7,8 +7,8 @@ import DiscordIcon from '@icons/discord.svg'; import { Switch } from '@/components/ui/switch'; export function NavBar() { return ( - <div className="flex w-full justify-between py-7.5 h-[110] items-center"> - <div className="flex min-w-[267] max-w-[750] xl:max-w-[691] grow items-center gap-7.5"> + <div className="flex w-full justify-between py-7.5 h-[110] items-center xl:max-w-[1200px] 2xl:max-w-[1500px]"> + <div className="flex grow items-center gap-[30px] max-w-[750px]"> <Link href="/" className="shrink-0 "> <Image src="/icons/logo.svg" @@ -18,25 +18,33 @@ export function NavBar() { className="h-[50]" /> </Link> - <div className="flex gap-3.75 grow items-center"> + <div className="flex gap-[15px] grow min-w-[674px] items-center"> <Search /> - <Button variant={'icon'} size={'icon'} asChild> + <Button + variant={'icon'} + size={'icon'} + className="w-[50px] h-[50px] p-[15px]" + asChild + > <ShuffleIcon width={20} height={19} strokeWidth={2} /> </Button> - <div className="gap-[20] flex items-center shrink-0 w-[185]"> - <div className="flex h-[22] gap-2.5 opacity-100 items-center w-[66]"> - <span>AI</span> + <div className="gap-[20px] flex items-center shrink-0"> + <div className="flex h-[22px] w-[66px] gap-2.5 opacity-100 items-center"> + <span className="font-[500] h-[22] text-[16px]"> + AI + </span> <Switch /> </div> - <div className="flex h-[22] gap-2.5 opacity-100 items-center w-[66]"> - <span>NSFW</span> + <div className="flex h-[22px] gap-[10px] w-[99px] opacity-100 items-center"> + <span className="font-[500] h-[22px] text-[16px]"> + NSFW + </span> <Switch /> </div> </div> </div> </div> - <Sections /> <div className="flex gap-3.75 items-center shrink-0"> <Link href={'#'} className="hover:[&_path]:fill-light-violet"> <DiscordIcon /> @@ -49,8 +57,8 @@ export function NavBar() { function Search() { return ( - <div className="flex w-[409] xl:w-[350] h-[50] border-2 items-center rounded-4xl p-3.75"> - <div className="flex w-full gap-1.25"> + <div className="flex w-[409px] h-[50px] border-2 rounded-4xl p-[15px]"> + <div className="flex w-[379px] gap-[5px] items-center"> <Image src="/icons/search.svg" alt="" @@ -69,6 +77,6 @@ function Search() { function Sections() { return ( - <div className="flex grow min-w-75 max-w-[450] justify-between px-7.5 font-medium"></div> + <div className="flex grow min-w-75 max-w-[1] justify-between px-7.5 font-medium"></div> ); } diff --git a/src/components/header/SubNav.tsx b/src/components/header/SubNav.tsx index a446ff0..0961cc1 100644 --- a/src/components/header/SubNav.tsx +++ b/src/components/header/SubNav.tsx @@ -5,7 +5,7 @@ import { cn } from '@/lib/utils'; export function SubNav() { return ( - <div className="flex justify-between w-full"> + <div className="flex justify-between xl:w-[1200px] 2xl:w-[1500px] h-[50px]"> <SectionLink href="#" className="rounded-tl-[5px] rounded-bl-4xl"> ТЕГИ </SectionLink> diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx index 26fe2c3..1343d69 100644 --- a/src/components/ui/switch.tsx +++ b/src/components/ui/switch.tsx @@ -13,7 +13,7 @@ function Switch({ <SwitchPrimitive.Root data-slot="switch" className={cn( - 'peer data-[state=checked]:bg-violet data-[state=unchecked]:bg-light-violet focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[18px] w-10 shrink-0 items-center rounded-full border border-transparent transition-all duration-200 ease-out outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50', + 'peer data-[state=checked]:bg-violet data-[state=unchecked]:bg-light-violet focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[18px] w-[40px] shrink-0 items-center rounded-full border border-transparent transition-all duration-200 ease-out outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50', className, )} {...props} |