Merge pull request #1815 from navikt/TAG-2127-POC_Sticky_filters_faktisk

Tag 2127 poc sticky filters
navikt · May 3, 2024 · bd22326 · bd22326
2 parents 8dc4e1c + ed19322
commit bd22326
Show file tree

Hide file tree

Showing 8 changed files with 93 additions and 36 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
     "dependencies": {
         "@grafana/faro-web-sdk": "1.3.6",
         "@navikt/aksel-icons": "^5.17.2",
-        "@navikt/arbeidsgiver-notifikasjon-widget": "6.5.5",
+        "@navikt/arbeidsgiver-notifikasjon-widget": "6.5.6",
         "@navikt/bedriftsmeny": "6.13.0",
         "@navikt/ds-css": "^5.17.2",
         "@navikt/ds-icons": "3.4.3",

diff --git a/server/package-lock.json b/server/package-lock.json
diff --git a/server/package.json b/server/package.json
@@ -5,7 +5,7 @@
     "type": "module",
     "main": "server.js",
     "dependencies": {
-        "@navikt/arbeidsgiver-notifikasjoner-brukerapi-mock": "6.5.5",
+        "@navikt/arbeidsgiver-notifikasjoner-brukerapi-mock": "6.5.6",
         "apollo-server-express": "3.12.1",
         "casual": "^1.6.2",
         "express": "^4.19.2",

diff --git a/src/Pages/Saksoversikt/Saksfilter/Saksfilter.css b/src/Pages/Saksoversikt/Saksfilter/Saksfilter.css
@@ -2,11 +2,15 @@
     display: flex;
     flex-direction: column;
     min-width: min(22rem, 100%);
-    min-height: max(100vh);
+    max-height: 100vh;
     gap: 16px;
     background: var(--a-bg-default);
     padding: 24px;
     grid-column-start: 2;
+    overflow-y: scroll;
+    position: sticky;
+    top: 0;
+    margin-bottom: 64px;
 }
 
 @media (max-width: 730px) {
@@ -15,7 +19,18 @@
     }
 }
 
-ul.sak_virksomhetsmeny_hovedenhetliste,
+
+.saksfilter::-webkit-scrollbar {
+    width: 10px; /* Angi ønsket bredde på scroll-baren */
+}
+
+.saksfilter::-webkit-scrollbar-thumb {
+    background-color: #888; /* Angi ønsket farge på scroll-baren */
+    border-radius: 5px; /* Angi ønsket avrundingsradius på scroll-baren */
+    min-height: 30px; /* Angi ønsket min-høyde på scroll-baren */
+}
+
+.sak_virksomhetsmeny_hovedenhetliste,
 .sak_virksomhetsmeny_hovedenhetliste ul {
     margin: 0;
     padding: 0;

diff --git a/src/Pages/Saksoversikt/Saksfilter/Saksfilter.tsx b/src/Pages/Saksoversikt/Saksfilter/Saksfilter.tsx
@@ -4,7 +4,7 @@ import { Virksomhetsmeny } from './Virksomhetsmeny/Virksomhetsmeny';
 import { Søkeboks } from './Søkeboks';
 import { Filter } from '../useOversiktStateTransitions';
 import { Ekspanderbartpanel } from '../../../GeneriskeElementer/Ekspanderbartpanel';
-import { BodyShort, Checkbox, CheckboxGroup, Heading } from '@navikt/ds-react';
+import { BodyShort, Button, Checkbox, CheckboxGroup, Heading } from '@navikt/ds-react';
 import { Filter as FilterIkon } from '@navikt/ds-icons';
 import {
     OppgaveTilstand,
@@ -154,7 +154,7 @@ export const Saksfilter = ({
                     </CheckboxGroup>
                 )}
 
-                <CheckboxGroup legend="Virksomheter">
+                <CheckboxGroup legend="Virksomheter" className="saksfilter_virksomhetsmeny">
                     <Virksomhetsmeny
                         valgteEnheter={valgteVirksomheter}
                         setValgteEnheter={setValgteVirksomheter}

diff --git a/src/Pages/Saksoversikt/Saksoversikt.css b/src/Pages/Saksoversikt/Saksoversikt.css
@@ -4,19 +4,48 @@
   gap: 16px;
   background-color: var(--a-gray-100);
   margin: 16px;
-  grid-column-start: 3
+  grid-column-start: 3;
 }
 
 .saksoversikt__innhold {
   display: grid;
   grid-template-columns: 1fr 22rem min(62rem, calc(100vw - 22rem) ) 22rem 1fr;
 }
 
+.saksoversikt_sticky_top {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 8px;
+  margin-top: -16px;
+  padding-top: 16px;
+  padding-bottom: 8px;
+  position: sticky;
+  top: -1px;
+  background: var(--a-bg-subtle);
+
+  box-shadow: 0 50px 0 -60px black;
+  transition: box-shadow 0.5s ease-in-out;
+}
+
+.saksoversikt_sticky_top[data-stuck] {
+  box-shadow: 0 50px 50px -60px black;
+}
+
 @media (max-width: 730px){
   .saksoversikt__innhold {
     display: flex;
     flex-direction: column;
   }
+
+  .saksoversikt_sticky_top {
+    position: unset;
+    top: unset;
+  }
+
+  .saksoversikt_sticky_top[data-stuck] {
+    box-shadow: none;
+  }
 }
 
 .saksoversikt__skjult-header-uu {
@@ -69,10 +98,6 @@
   gap: 16px;
 }
 
-.saksoversikt__saksliste-footer {
-  flex-wrap: wrap-reverse;
-}
-
 .saksoversikt__sortering {
   grid-template-columns: auto auto;
   align-items: center;

diff --git a/src/Pages/Saksoversikt/Saksoversikt.tsx b/src/Pages/Saksoversikt/Saksoversikt.tsx
@@ -63,6 +63,25 @@ export const Saksoversikt = () => {
 
     const alleSakstyper = useAlleSakstyper();
 
+    const navRef = useRef<HTMLDivElement>(null); //Brukes til å legge skygge under paginering og filtre
+
+    useEffect(() => {
+        const observer = new IntersectionObserver(
+            ([entry]) => {
+                navRef.current?.toggleAttribute('data-stuck', entry.intersectionRatio < 1);
+            },
+            { threshold: [1] }
+        );
+
+        if (navRef.current) {
+            observer.observe(navRef.current);
+        }
+
+        return () => {
+            observer.disconnect();
+        };
+    }, []);
+
     return (
         <div className="saksoversikt__innhold">
             <Saksfilter
@@ -80,25 +99,23 @@ export const Saksoversikt = () => {
                 <Heading level="2" size="medium" className="saksoversikt__skjult-header-uu">
                     Mine filtervalg
                 </Heading>
-                <LagreFilter
-                    state={state}
-                    byttFilter={byttFilter}
-                    setValgtFilterId={setValgtFilterId}
-                />
-                <FilterChips state={state} byttFilter={byttFilter} />
-                <div className="saksoversikt__saksliste-header">
-                    <VelgSortering state={state} byttFilter={byttFilter} />
-                    <Sidevelger state={state} byttFilter={byttFilter} skjulForMobil={true} />
+                <div ref={navRef} className="saksoversikt_sticky_top">
+                    <LagreFilter
+                        state={state}
+                        byttFilter={byttFilter}
+                        setValgtFilterId={setValgtFilterId}
+                    />
+                    <FilterChips state={state} byttFilter={byttFilter} />
+                    <div className="saksoversikt__saksliste-header">
+                        <VelgSortering state={state} byttFilter={byttFilter} />
+                        <Sidevelger state={state} byttFilter={byttFilter} skjulForMobil={true} />
+                    </div>
                 </div>
                 <Heading level="2" size="medium" className="saksoversikt__skjult-header-uu">
                     Saker
                 </Heading>
                 <SaksListeBody state={state} />
-
-                <div className="saksoversikt__saksliste-footer">
-                    <HvaVisesHer />
-                    <Sidevelger state={state} byttFilter={byttFilter} skjulForMobil={false} />
-                </div>
+                <HvaVisesHer />
             </div>
         </div>
     );