From 9cf8d8a32b6bb798fc4ecd523c6709c49f206182 Mon Sep 17 00:00:00 2001
From: nzambello <nzambello@protonmail.com>
Date: Mon, 14 Feb 2022 13:23:06 +0100
Subject: [PATCH] feat: mobile styles, refactor header

---
 app/components/Header.tsx     | 214 +++++++++++++++++++++++++---------
 app/root.tsx                  |   9 +-
 app/routes/expenses/index.tsx |   6 +-
 app/styles/header.css         |  22 ++++
 4 files changed, 187 insertions(+), 64 deletions(-)
 create mode 100644 app/styles/header.css

diff --git a/app/components/Header.tsx b/app/components/Header.tsx
index 5cd5b98..2bd1ed5 100644
--- a/app/components/Header.tsx
+++ b/app/components/Header.tsx
@@ -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>
   );
 };
diff --git a/app/root.tsx b/app/root.tsx
index dca0c2a..f1b7f37 100644
--- a/app/root.tsx
+++ b/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}
diff --git a/app/routes/expenses/index.tsx b/app/routes/expenses/index.tsx
index 677c0d6..2f677f7 100644
--- a/app/routes/expenses/index.tsx
+++ b/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>
diff --git a/app/styles/header.css b/app/styles/header.css
new file mode 100644
index 0000000..db96769
--- /dev/null
+++ b/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;
+    }
+}