replace absolute/fixed layout with CSS grid (#241)

varianter · Nov 1, 2023 · 5d2281d · 5d2281d
1 parent 3494d7d
commit 5d2281d
Show file tree

Hide file tree

Showing 8 changed files with 93 additions and 45 deletions.
diff --git a/frontend/src/app/[organisation]/bemanning/page.tsx b/frontend/src/app/[organisation]/bemanning/page.tsx
@@ -24,13 +24,11 @@ export default async function Bemanning({
       consultants={consultants}
       departments={departments}
     >
-      <div className="flex flex-row">
-        <StaffingSidebar />
+      <StaffingSidebar />
 
-        <div className="pl-12 p-6 w-full">
-          <h1>Bemanning</h1>
-          <FilteredConsultantsList />
-        </div>
+      <div className="main pl-12 p-6 w-full">
+        <h1>Bemanning</h1>
+        <FilteredConsultantsList />
       </div>
     </ConsultantFilterProvider>
   );

diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
@@ -122,4 +122,36 @@
     font-family: "Graphik-SemiBold";
     line-height: 6rem;
   }
+
+  .layout-grid {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-template-rows: auto 1fr;
+    grid-template-areas:
+      "header header"
+      "sidebar main";
+    height: 100vh;
+    width: 100vw;
+    overflow: hidden;
+  }
+
+  .header {
+    grid-area: header;
+  }
+
+  .sidebar {
+    grid-area: sidebar;
+  }
+
+  .main {
+    grid-area: main;
+    overflow-y: scroll;
+    height: 100%;
+  }
+
+  .invisible-input {
+    opacity: 0;
+    height: 0;
+    width: 0;
+  }
 }
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -19,7 +19,7 @@ export default function RootLayout({
           content="minimum-scale=1, initial-scale=1, width=device-width"
         />
       </Head>
-      <body>
+      <body className="layout-grid">
         <NavBar />
         <NextTopLoader color="#F076A6" height={3} initialPosition={0.2} />
         {children}

diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
@@ -6,7 +6,7 @@ import Link from "next/link";
 export default async function Root() {
   const orgs = (await fetchWithToken<Organisation[]>("organisations")) ?? [];
   return (
-    <ul className="h-screen flex items-center justify-center gap-4">
+    <ul className="main h-screen flex items-center justify-center gap-4">
       {orgs.map((o) => (
         <li key={o.urlKey}>
           <Link href={`/${o.urlKey}/bemanning`}>

diff --git a/frontend/src/components/FilteredConsultantsList.tsx b/frontend/src/components/FilteredConsultantsList.tsx
@@ -7,7 +7,7 @@ export default function FilteredConsultantList() {
   const { filteredConsultants: consultants } = useFilteredConsultants();
   return (
     <div>
-      <div className="my-6 min-h-[56px]">
+      <div className="">
         <ActiveFilters />
       </div>
       <div className="flex flex-row gap-3 pb-4 items-center">

diff --git a/frontend/src/components/NavBar/NavBar.tsx b/frontend/src/components/NavBar/NavBar.tsx
@@ -4,7 +4,7 @@ import NavBarUserIcon from "./NavBarUserIcon";
 
 export default function NavBar() {
   return (
-    <div className="bg-primary_default w-full h-[52px] flex flex-row justify-between sticky top-0 px-4 z-50">
+    <div className="bg-primary_default w-full h-[52px] flex flex-row justify-between header">
       <div className="flex flex-row">
         <NavBarLink text="Bemanning" path={`bemanning`} />
       </div>

diff --git a/frontend/src/components/SearchBarComponent.tsx b/frontend/src/components/SearchBarComponent.tsx
@@ -3,7 +3,11 @@ import { useEffect, useRef, useState } from "react";
 import { Search } from "react-feather";
 import { useFilteredConsultants } from "@/hooks/useFilteredConsultants";
 
-export default function SearchBarComponent() {
+export default function SearchBarComponent({
+  hidden = false,
+}: {
+  hidden?: boolean;
+}) {
   const { currentNameSearch, setNameSearch } = useFilteredConsultants();
   const inputRef = useRef<HTMLInputElement>(null);
   const [searchIsActive, setIsSearchActive] = useState(false);
@@ -33,25 +37,41 @@ export default function SearchBarComponent() {
   }, [setNameSearch]);
 
   return (
-    <div className="flex flex-col gap-2">
-      <p className="body-small">Søk</p>
-      <div
-        className={`flex flex-row gap-2 rounded-lg border px-3 py-2 w-full hover:bg-primary_l4 hover:border-primary_default ${
-          searchIsActive ? "border-primary_default" : "border-primary_l1"
-        } `}
-      >
-        <Search className="text-primary_default h-4 w-4" />
+    <>
+      {hidden ? (
         <input
-          placeholder="Søk etter konsulent"
-          id="consultantSearch"
-          className="input w-[131px] focus:outline-none body-small "
+          placeholder=""
+          id="hiddenSearch"
+          className="input invisible-input"
           onChange={(e) => setNameSearch(e.target.value)}
           ref={inputRef}
           value={currentNameSearch}
-          onFocus={() => setIsSearchActive(true)}
-          onBlur={() => setIsSearchActive(false)}
-        ></input>
-      </div>
-    </div>
+          onFocus={() => console.log("F")}
+        />
+      ) : (
+        <div className={`flex flex-col gap-2 rounded-lg`}>
+          <p className="body-small">Søk</p>
+          <div
+            className={`flex flex-row gap-2 border
+            px-3 py-2 w-full hover:bg-primary_l4 hover:border-primary_default ${
+              searchIsActive ? "border-primary_default" : "border-primary_l1"
+            } `}
+          >
+            <Search className="text-primary_default h-4 w-4" />
+
+            <input
+              placeholder="Søk etter konsulent"
+              id="consultantSearch"
+              className="input w-[131px] focus:outline-none body-small"
+              onChange={(e) => setNameSearch(e.target.value)}
+              ref={inputRef}
+              value={currentNameSearch}
+              onFocus={() => setIsSearchActive(true)}
+              onBlur={() => setIsSearchActive(false)}
+            ></input>
+          </div>
+        </div>
+      )}
+    </>
   );
 }
diff --git a/frontend/src/components/StaffingSidebar.tsx b/frontend/src/components/StaffingSidebar.tsx
@@ -9,15 +9,9 @@ export default function StaffingSidebar() {
   const [isSidebarHidden, setIsSidebarHidden] = useState(true);
 
   return (
-    <div className="min-h-screen max-[720px]:fixed z-10">
-      <div
-        className={`bg-primary_l4 py-6 px-4 h-full min-h-screen w-[300px]  ${
-          isSidebarHidden
-            ? "absolute -left-[328px]"
-            : "fixed sm:sticky top-[52px]"
-        }`}
-      >
-        <div className="flex flex-col gap-6 fixed w-[270px]">
+    <div className="sidebar z-10">
+      {!isSidebarHidden ? (
+        <div className=" bg-primary_l4 h-full flex flex-col gap-6 p-8 w-[300px]">
           <div className="flex flex-row justify-between">
             <h3 className="">Filter</h3>
             <button
@@ -31,15 +25,19 @@ export default function StaffingSidebar() {
           <DepartmentFilter />
           <ExperienceFilter />
         </div>
-      </div>
-      <button
-        onClick={() => setIsSidebarHidden(false)}
-        className={`bg-primary_l3 rounded-r p-2 mt-6 hover:bg-primary_default hover:bg-opacity-20 ${
-          isSidebarHidden ? "top-[200px]" : "hidden"
-        }`}
-      >
-        <Filter className="text-primary_default" size="20" />
-      </button>
+      ) : (
+        <>
+          <button
+            onClick={() => setIsSidebarHidden(false)}
+            className="bg-primary_l3 rounded-r p-2 mt-6 hover:bg-primary_default hover:bg-opacity-20"
+          >
+            <Filter className="text-primary_default" size="20" />
+          </button>
+          <div style={{ width: "0px", height: "0px" }}>
+            <SearchBarComponent hidden />
+          </div>
+        </>
+      )}
     </div>
   );
 }