styling alignment

antonstihl · Jan 12, 2024 · ccd6ed7 · ccd6ed7
1 parent 20389ae
commit ccd6ed7
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 94 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -7,7 +7,7 @@ import ParentProvider from "./context/ParentContext";
 const App = () => {
   return (
     <>
-      <div className="flex flex-col items-center w-full min-w-fit bg-amber-300 px-4 py-1 text-sm">
+      <div className="flex flex-col sticky items-center w-full min-w-fit bg-amber-300 px-4 py-1 text-sm z-20">
         <p className="text-center">
           Flappen är i alfaversion och kan gå sönder när som helst.
         </p>

diff --git a/src/components/Menu.tsx b/src/components/Menu.tsx
diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
@@ -1,11 +1,10 @@
+import { useState } from "react";
 import { NavLink } from "react-router-dom";
 import {
   useParent,
   useParentUpdate,
   useParents,
 } from "../context/ParentContext";
-import { useState } from "react";
-import Menu from "./Menu";
 
 export default function NavBar() {
   const parent = useParent();
@@ -25,52 +24,83 @@ export default function NavBar() {
   const leaningLineBottom = (
     <div className="h-1 bg-white rounded-md w-6 rotate-12"></div>
   );
+
+  const getMenuItem = (text: string, path: string) => {
+    return (
+      <NavLink
+        to={path}
+        onClick={() => setMenuOpen(false)}
+        className="rounded-md py-1 pl-2 pr-10 text-left w-full hover:bg-emerald-700"
+      >
+        {text}
+      </NavLink>
+    );
+  };
+
   return (
     <>
-      <div className="flex justify-between items-center px-4 text-lg bg-green-700 text-white font-mono w-screen min-w-fit h-12">
-        <button onClick={() => toggleMenu()}>
-          <div className="flex flex-col space-y-1 pr-4">
-            {!menuOpen && line}
-            {!menuOpen && line}
-            {!menuOpen && line}
-            {menuOpen && leaningLineTop}
-            {menuOpen && line}
-            {menuOpen && leaningLineBottom}
-          </div>
-        </button>
-        <NavLink to={"/"} onClick={menuOpen ? toggleMenu : () => {}}>
-          <div
-            className="flex flex-row gap-2"
-            onMouseEnter={() => setIsHoveringTitle(true)}
-            onMouseLeave={() => setIsHoveringTitle(false)}
-          >
-            <p>
-              F
-              <span className={`${!isHoveringTitle && "hidden"}`}>öräldra</span>
-              l
-              <span className={`${!isHoveringTitle && "hidden"}`}>
-                edighets
-              </span>
-              appen
-            </p>
-            <div className="rotate-6">👶</div>
-          </div>
-        </NavLink>
+      <div className="flex flex-col justify-start sticky top-0 z-20">
+        <div className="flex justify-between items-center text-lg bg-green-700 text-white font-mono w-screen min-w-fit h-12">
+          <button onClick={() => toggleMenu()}>
+            <div className="flex flex-col space-y-1 py-3 px-4">
+              {!menuOpen && line}
+              {!menuOpen && line}
+              {!menuOpen && line}
+              {menuOpen && leaningLineTop}
+              {menuOpen && line}
+              {menuOpen && leaningLineBottom}
+            </div>
+          </button>
+          <NavLink to={"/"} onClick={menuOpen ? toggleMenu : () => {}}>
+            <div
+              className="flex flex-row gap-2"
+              onMouseEnter={() => setIsHoveringTitle(true)}
+              onMouseLeave={() => setIsHoveringTitle(false)}
+            >
+              <p>
+                F
+                <span className={`${!isHoveringTitle && "hidden"}`}>
+                  öräldra
+                </span>
+                l
+                <span className={`${!isHoveringTitle && "hidden"}`}>
+                  edighets
+                </span>
+                appen
+              </p>
+              <div className="rotate-6">👶</div>
+            </div>
+          </NavLink>
 
-        <select
-          onChange={(e) => setParent(e.target.value)}
-          className="rounded-md p-1 w-max text-black"
-          name="parent"
-          value={parent?.id}
-        >
-          {parents.map((p) => (
-            <option value={p.id} key={p.id}>
-              {p.name}
-            </option>
-          ))}
-        </select>
+          <select
+            onChange={(e) => setParent(e.target.value)}
+            className="rounded-md p-1 mr-4 w-max text-black"
+            name="parent"
+            value={parent?.id}
+          >
+            {parents.map((p) => (
+              <option value={p.id} key={p.id}>
+                {p.name}
+              </option>
+            ))}
+          </select>
+        </div>
       </div>
-      {menuOpen && <Menu closeMenu={() => setMenuOpen(false)} />}
+      {menuOpen && (
+        <div className="sticky top-12 flex flex-row w-screen h-0 z-20">
+          <nav className="left-0 bg-green-700 pt-2 px-2 h-screen text-white w-max flex flex-col z-20">
+            {getMenuItem("Familj", "/family")}
+            {getMenuItem("Kalender", "/calendar")}
+            {getMenuItem("Lön", "/salary")}
+          </nav>
+        </div>
+      )}
+      {menuOpen && (
+        <div
+          className="fixed top-0 w-screen h-screen bg-black bg-opacity-50 block z-10"
+          onClick={() => setMenuOpen(false)}
+        />
+      )}
     </>
   );
 }
diff --git a/src/pages/FamilyPage.tsx b/src/pages/FamilyPage.tsx
@@ -170,9 +170,9 @@ function FamilyPage() {
           }
         />
       )}
-      <div className="flex m-4 gap-4 flex-col">
-        <div className="flex flex-col gap-4">
-          <Card title="Barn" width="w-full lg:w-1/2">
+      <div className="flex m-4 justify-center">
+        <div className="flex flex-col gap-4 items-center w-max">
+          <Card title="Barn" width="w-full">
             <div className="m-2">
               {children.length === 0 ? (
                 <p>Inga barn tillagda.</p>
@@ -184,7 +184,7 @@ function FamilyPage() {
                         variant="delete"
                         onClick={() => setChildToDelete(c)}
                       >
-                        X
+                        -
                       </Button>
                       {`
                 ${c.name}${
@@ -213,9 +213,7 @@ function FamilyPage() {
               </Button>
             </div>
           </Card>
-        </div>
-        <div className="flex flex-col gap-4">
-          <Card title="Föräldrar" width="w-full lg:w-1/2">
+          <Card title="Föräldrar" width="w-full">
             <div className="m-2">
               {parents.length === 0 ? (
                 <p>Inga föräldrar tillagda.</p>
@@ -227,7 +225,7 @@ function FamilyPage() {
                         variant="delete"
                         onClick={() => setParentToDelete(p)}
                       >
-                        X
+                        x
                       </Button>
                       {p.name}
                       <span title={p.id}>

diff --git a/src/pages/SalaryPage.tsx b/src/pages/SalaryPage.tsx
@@ -225,8 +225,8 @@ export default function SalaryPage() {
           </div>
         </Modal>
       )}
-      <div className="m-4 flex flex-col gap-4">
-        <Card width="w-full" title="Anställningar">
+      <div className="m-4 flex flex-col items-center gap-4">
+        <Card width="w-max" title="Anställningar">
           {employments.length === 0 ? (
             <p className="m-2">No employments saved.</p>
           ) : (
@@ -283,15 +283,15 @@ export default function SalaryPage() {
             </>
           )}
         </Card>
-        <Card width="w-full">
+        <Card width="w-max">
           <Chart
             chartType="BarChart"
             width="100%"
             data={salaryGraphData}
             options={options}
           />
         </Card>
-        <Card width="w-full" title="Lägg till anställning">
+        <Card width="w-max" title="Lägg till anställning">
           <div className="grid grid-cols-2 gap-2 p-2 items-center">
             <label htmlFor="employer">Arbetsgivare</label>
             <input