205 mobile view (#218)

Co-authored-by: Mathilde Haukø Haugum <[email protected]>
varianter · Oct 26, 2023 · 92ec604 · 92ec604
1 parent 0806744
commit 92ec604
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 7 deletions.
diff --git a/frontend/src/components/SearchBarComponent.tsx b/frontend/src/components/SearchBarComponent.tsx
@@ -36,7 +36,7 @@ export default function SearchBarComponent() {
     <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-max hover:bg-primary_l4 hover:border-primary_default ${
+        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"
         } `}
       >

diff --git a/frontend/src/components/StaffingSidebar.tsx b/frontend/src/components/StaffingSidebar.tsx
@@ -9,13 +9,15 @@ export default function StaffingSidebar() {
   const [isSidebarHidden, setIsSidebarHidden] = useState(true);
 
   return (
-    <div>
+    <div className="min-h-screen fixed">
       <div
-        className={`bg-primary_l4 py-6 px-4 h-full min-h-screen w-[211px]  ${
-          isSidebarHidden ? "absolute -left-[211px]" : "sticky top-[52px]"
+        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-[179px]">
+        <div className="flex flex-col gap-6 fixed w-[270px]">
           <div className="flex flex-row justify-between">
             <h3 className="">Filter</h3>
             <button
@@ -32,8 +34,8 @@ export default function StaffingSidebar() {
       </div>
       <button
         onClick={() => setIsSidebarHidden(false)}
-        className={`bg-primary_l3 rounded-r p-2 mt-6 hover:bg-primary_default hover:bg-opacity-20 ${
-          !isSidebarHidden ? "hidden" : "sticky top-[76px]"
+        className={`bg-primary_l3 rounded-r p-2 mt-16 hover:bg-primary_default hover:bg-opacity-20 ${
+          isSidebarHidden ? "top-[200px]" : "hidden"
         }`}
       >
         <Filter className="text-primary_default" size="20" />