ndmg/archive-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix layout

Browse Source
This commit is contained in:
ndmg 2026-11-07 14:40:38 +00:00
parent 1b0e63b73c
commit 4556d991cc
1 changed files with 13 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/Layout.jsx
View File

@ -37,19 +37,23 @@ export default function Layout() {
<div className="pointer-events-none fixed inset-x-0 top-0 -z-0 h-80 bg-[radial-gradient(60%_100%_at_50%_0%,rgba(244,63,94,0.16),transparent)]" />
<header className="sticky top-0 z-40 border-b border-white/10 bg-zinc-950/75 backdrop-blur-xl">
<div className="mx-auto flex max-w-6xl items-center gap-4 px-4 py-3 sm:px-6">
<div className="mx-auto flex max-w-6xl flex-wrap items-center gap-x-4 gap-y-2 px-4 py-3 sm:px-6">
{/* 1. Логотип */}
<NavLink
to="/"
end
aria-label="На главную"
className="flex shrink-0 items-center gap-2.5 rounded-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-rose-400"
className="order-1 flex shrink-0 items-center gap-2.5 rounded-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-rose-400"
>
<span className="hidden text-lg font-bold tracking-tight text-white sm:block">ndmg's media library</span>
<span className="text-base font-bold tracking-tight text-white sm:text-lg">
ndmg's media library
</span>
</NavLink>
{/* 3 (mobile: вторая строка) / 2 (desktop) */}
<nav
aria-label="Основная навигация"
className="flex min-w-0 flex-1 gap-1 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
className="order-3 flex w-full min-w-0 gap-1 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden md:order-2 md:w-auto md:flex-1"
>
{NAV.map(({ to, label, icon, end }) => (
<NavLink key={to} to={to} end={end} className={linkClass}>
@ -71,7 +75,11 @@ export default function Layout() {
</NavLink>
))}
</nav>
<SearchBox />
{/* 2 (mobile: справа от логотипа) / 3 (desktop) */}
<div className="order-2 ml-auto min-w-0 flex-1 sm:flex-none md:order-3">
<SearchBox />
</div>
</div>
</header>