feat: mobile styles, refactor header
This commit is contained in:
parent
4e35698de5
commit
9cf8d8a32b
|
|
@ -12,88 +12,186 @@ interface Props {
|
|||
|
||||
const Header = ({ user, route }: Props) => {
|
||||
return (
|
||||
<header className="p-3">
|
||||
<nav className="navbar shadow-lg bg-neutral text-neutral-content rounded-box">
|
||||
<div className="flex-1 px-2 mx-2">
|
||||
<Link to="/" className="btn btn-ghost rounded-btn">
|
||||
<span className="text-lg font-bold">Explit</span>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex-none px-2 mx-2 lg:flex">
|
||||
<div className="flex items-stretch">
|
||||
<header className="drawer overflow-visible relative z-50">
|
||||
<input id="mobile-nav-drawer" type="checkbox" className="drawer-toggle" />
|
||||
<div className="flex flex-col drawer-content !overflow-y-visible">
|
||||
<nav className="w-full p-3 shadow-lg rounded-box mb-4 bg-neutral text-neutral-content navbar">
|
||||
<div className="flex-none lg:hidden">
|
||||
<label
|
||||
htmlFor="mobile-nav-drawer"
|
||||
className="btn btn-square btn-ghost"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
className="inline-block w-6 h-6 stroke-current"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M4 6h16M4 12h16M4 18h16"
|
||||
></path>
|
||||
</svg>
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<Link to="/" className="btn btn-ghost rounded-btn">
|
||||
<span className="text-lg font-bold">Explit</span>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex-none hidden lg:block">
|
||||
<ul className="menu horizontal">
|
||||
<li>
|
||||
<Link to="/expenses" className="btn btn-ghost rounded-btn">
|
||||
<MoneyAdd className="lg:mr-2" />
|
||||
<span
|
||||
className={`hidden lg:inline-block ${
|
||||
route === "/expenses" ? "underline" : ""
|
||||
}`}
|
||||
>
|
||||
Expenses
|
||||
</span>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="#" className="btn btn-ghost rounded-btn">
|
||||
<People className="lg:mr-2" />
|
||||
<span
|
||||
className={`hidden lg:inline-block ${
|
||||
route === "/team" ? "underline" : ""
|
||||
}`}
|
||||
>
|
||||
Your team
|
||||
</span>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="#" className="btn btn-ghost rounded-btn">
|
||||
<Percentage className="lg:mr-2" />
|
||||
<span
|
||||
className={`hidden lg:inline-block ${
|
||||
route === "/statistics" ? "underline" : ""
|
||||
}`}
|
||||
>
|
||||
Statistics
|
||||
</span>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="flex-none">
|
||||
{user ? (
|
||||
<div className="dropdown dropdown-end">
|
||||
<div tabIndex={0} className="btn btn-ghost rounded-full p-0">
|
||||
<div className="rounded-full w-10 h-10 m-1 inline-flex justify-center items-center bg-white text-3xl">
|
||||
{user.icon ?? user.username[0]}
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
tabIndex={0}
|
||||
className="p-2 shadow-lg menu dropdown-content bg-base-100 rounded-box w-52 z-10"
|
||||
>
|
||||
<li>
|
||||
<Link to="/account" className="text-base-content">
|
||||
<span className="text-base-content">Account</span>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Form action="/logout" method="post">
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-ghost rounded-btn w-full text-base-content capitalize justify-start py-[0.75rem] px-[1.25rem] text-base font-normal"
|
||||
>
|
||||
Logout
|
||||
</button>
|
||||
</Form>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
) : (
|
||||
<Link
|
||||
to="/login"
|
||||
className="btn btn-square btn-ghost"
|
||||
title="Login"
|
||||
>
|
||||
<span className="hidden lg:inline-block mr-1">Login</span>
|
||||
<LoginSVG />
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<div className="drawer-side">
|
||||
<label htmlFor="mobile-nav-drawer" className="drawer-overlay"></label>
|
||||
<ul className="p-4 overflow-y-auto menu w-80 max-w-[70%] bg-base-100">
|
||||
<li className="items-end mb-2">
|
||||
<label
|
||||
htmlFor="mobile-nav-drawer"
|
||||
className="drawer-close cursor-pointer btn btn-sm btn-ghost"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
className="inline-block w-6 h-6 stroke-current"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
></path>
|
||||
</svg>
|
||||
</label>
|
||||
</li>
|
||||
<li className="items-start mb-4">
|
||||
<Link
|
||||
to="/"
|
||||
className="btn btn-ghost rounded-btn items-center h-auto"
|
||||
>
|
||||
<span className="text-lg font-bold">Explit</span>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="items-start">
|
||||
<Link to="/expenses" className="btn btn-ghost rounded-btn">
|
||||
<MoneyAdd className="lg:mr-2" />
|
||||
<MoneyAdd className="mr-2" />
|
||||
<span
|
||||
className={`hidden lg:inline-block ${
|
||||
className={`inline-block ${
|
||||
route === "/expenses" ? "underline" : ""
|
||||
}`}
|
||||
>
|
||||
Expenses
|
||||
</span>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="items-start">
|
||||
<Link to="#" className="btn btn-ghost rounded-btn">
|
||||
<People className="lg:mr-2" />
|
||||
<People className="mr-2" />
|
||||
<span
|
||||
className={`hidden lg:inline-block ${
|
||||
className={`inline-block ${
|
||||
route === "/team" ? "underline" : ""
|
||||
}`}
|
||||
>
|
||||
Your team
|
||||
</span>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="items-start">
|
||||
<Link to="#" className="btn btn-ghost rounded-btn">
|
||||
<Percentage className="lg:mr-2" />
|
||||
<Percentage className="mr-2" />
|
||||
<span
|
||||
className={`hidden lg:inline-block ${
|
||||
className={`inline-block ${
|
||||
route === "/statistics" ? "underline" : ""
|
||||
}`}
|
||||
>
|
||||
Statistics
|
||||
</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-none">
|
||||
{user ? (
|
||||
<div className="dropdown dropdown-end">
|
||||
<div tabIndex={0} className="btn btn-ghost rounded-full p-0">
|
||||
<div className="rounded-full w-10 h-10 m-1 inline-flex justify-center items-center bg-white text-3xl">
|
||||
{user.icon ?? user.username[0]}
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
tabIndex={0}
|
||||
className="p-2 shadow-lg menu dropdown-content bg-base-100 rounded-box w-52"
|
||||
>
|
||||
<li>
|
||||
<Link to="/account" className="text-base-content">
|
||||
<span className="text-base-content">Account</span>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Form action="/logout" method="post">
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-ghost rounded-btn w-full text-base-content capitalize justify-start py-[0.75rem] px-[1.25rem] text-base font-normal"
|
||||
>
|
||||
Logout
|
||||
</button>
|
||||
</Form>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
) : (
|
||||
<Link
|
||||
to="/login"
|
||||
className="btn btn-square btn-ghost"
|
||||
title="Login"
|
||||
>
|
||||
<span className="hidden lg:inline-block mr-1">Login</span>
|
||||
<LoginSVG />
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</nav>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,11 +1,14 @@
|
|||
import type { LinksFunction, MetaFunction } from "remix";
|
||||
import { Links, LiveReload, Outlet, useCatch, Meta, Scripts } from "remix";
|
||||
import Header from "./components/Header";
|
||||
|
||||
import styles from "./tailwind.css";
|
||||
import headerStyles from "./styles/header.css";
|
||||
|
||||
export const links: LinksFunction = () => {
|
||||
return [{ rel: "stylesheet", href: styles }];
|
||||
return [
|
||||
{ rel: "stylesheet", href: styles },
|
||||
{ rel: "stylesheet", href: headerStyles },
|
||||
];
|
||||
// return [
|
||||
// {
|
||||
// rel: "stylesheet",
|
||||
|
|
@ -56,7 +59,7 @@ function Document({
|
|||
<title>{title}</title>
|
||||
<Links />
|
||||
</head>
|
||||
<body className="bg-base-300 m-0 min-h-screen">
|
||||
<body className="bg-base-300 m-0 min-h-screen p-3">
|
||||
{children}
|
||||
<Scripts />
|
||||
{process.env.NODE_ENV === "development" ? <LiveReload /> : null}
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ export default function JokesIndexRoute() {
|
|||
const data = useLoaderData<LoaderData>();
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-2 gap-4 p-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="col-span-2 md:col-span-1 card shadow-lg compact side bg-base-100 order-last md:order-none">
|
||||
<div className="flex-column items-center card-body !py-6">
|
||||
<h2 className="card-title">Last expenses</h2>
|
||||
|
|
@ -50,7 +50,7 @@ export default function JokesIndexRoute() {
|
|||
</div>
|
||||
<div className="grow ml-3 flex flex-col justify-center items-start">
|
||||
<span className="text-xs opacity-50">
|
||||
{new Intl.DateTimeFormat("en", {
|
||||
{new Intl.DateTimeFormat("it", {
|
||||
dateStyle: "short",
|
||||
timeStyle: "short",
|
||||
}).format(new Date(exp.createdAt))}
|
||||
|
|
@ -90,7 +90,7 @@ export default function JokesIndexRoute() {
|
|||
></path>
|
||||
</svg>
|
||||
<span className="block w-full mt-2 lg:mt-0 lg:w-auto lg:inline-block">
|
||||
New expense
|
||||
New
|
||||
</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
|
|
|||
22
app/styles/header.css
Normal file
22
app/styles/header.css
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
.drawer-toggle:not(:checked) ~ .drawer-side {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
max-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.drawer-toggle:checked ~ .drawer-side {
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
header.drawer {
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue