nzambello/explit
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

feat: mobile styles, refactor header

Browse source
This commit is contained in:
Nicola Zambello 2022-02-14 13:23:06 +01:00
parent 4e35698de5
commit 9cf8d8a32b
4 changed files with 187 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

112
app/components/Header.tsx
View file

@ -12,15 +12,38 @@ 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">
<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 px-2 mx-2 lg:flex">
<div className="flex items-stretch">
<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
@ -31,6 +54,8 @@ const Header = ({ user, route }: Props) => {
Expenses
</span>
</Link>
</li>
<li>
<Link to="#" className="btn btn-ghost rounded-btn">
<People className="lg:mr-2" />
<span
@ -41,6 +66,8 @@ const Header = ({ user, route }: Props) => {
Your team
</span>
</Link>
</li>
<li>
<Link to="#" className="btn btn-ghost rounded-btn">
<Percentage className="lg:mr-2" />
<span
@ -51,7 +78,8 @@ const Header = ({ user, route }: Props) => {
Statistics
</span>
</Link>
</div>
</li>
</ul>
</div>
<div className="flex-none">
{user ? (
@ -63,7 +91,7 @@ const Header = ({ user, route }: Props) => {
</div>
<ul
tabIndex={0}
className="p-2 shadow-lg menu dropdown-content bg-base-100 rounded-box w-52"
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">
@ -94,6 +122,76 @@ const Header = ({ user, route }: Props) => {
)}
</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="mr-2" />
<span
className={`inline-block ${
route === "/expenses" ? "underline" : ""
}`}
>
Expenses
</span>
</Link>
</li>
<li className="items-start">
<Link to="#" className="btn btn-ghost rounded-btn">
<People className="mr-2" />
<span
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="mr-2" />
<span
className={`inline-block ${
route === "/statistics" ? "underline" : ""
}`}
>
Statistics
</span>
</Link>
</li>
</ul>
</div>
</header>
);
};

9
app/root.tsx
View file

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

6
app/routes/expenses/index.tsx
View file

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