feat: ui responsiveness

This commit is contained in:
trafficlunar 2025-03-29 14:57:55 +00:00
parent dbe1d2417c
commit d8c9514a7d
4 changed files with 15 additions and 12 deletions

View file

@ -10,14 +10,16 @@ export default async function Header() {
const session = await getServerSession();
return (
<div className="fixed top-0 w-full p-4 flex justify-between items-center bg-amber-50 border-b-4 border-amber-200 shadow-md">
<Link href={"/"} className="font-black text-3xl tracking-wide text-orange-400">
<div className="sticky top-0 z-50 w-full p-4 grid grid-cols-3 gap-2 gap-x-4 items-center bg-amber-50 border-b-4 border-amber-200 shadow-md max-lg:grid-cols-2 max-sm:grid-cols-1">
<Link href={"/"} className="font-black text-3xl tracking-wide text-orange-400 max-sm:text-center">
TomodachiShare
</Link>
<SearchBar />
<div className="flex justify-center max-lg:justify-end max-sm:col-span-3 max-sm:justify-center">
<SearchBar />
</div>
<ul className="flex gap-3 items-center h-11 *:h-full">
<ul className="flex justify-end gap-3 items-center h-11 *:h-full max-lg:col-span-2 max-sm:justify-center">
<li title="Random Mii">
<Link href={"/random"} className="button !p-0 h-full aspect-square">
<Icon icon="mdi:dice-3" fontSize={28} />