feat: mobile styles, refactor header

app/components/Header.tsx

@@ -12,15 +12,38 @@ interface Props {
 
 const Header = ({ user, route }: Props) => {
   return (
-    <header className="p-3">
+    <header className="drawer overflow-visible relative z-50">
-      <nav className="navbar shadow-lg bg-neutral text-neutral-content rounded-box">
+      <input id="mobile-nav-drawer" type="checkbox" className="drawer-toggle" />
-        <div className="flex-1 px-2 mx-2">
+      <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-none hidden lg:block">
-          <div className="flex items-stretch">
+            <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>
   );
 };

app/root.tsx

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

app/routes/expenses/index.tsx

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

app/styles/header.css

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