Endre hovedsiden til å vise alle menyelementer med scroll

navikt · May 28, 2024 · dfaaecb · dfaaecb
1 parent 44a9f64
commit dfaaecb
Show file tree

Hide file tree

Showing 15 changed files with 45 additions and 42 deletions.
diff --git a/src/app/(minCV)/_components/MinCVPage.jsx b/src/app/(minCV)/_components/MinCVPage.jsx
@@ -25,6 +25,9 @@ export default function MinCVPage() {
 
     function onStepChange(x) {
         setActiveStep(x);
+
+        const element = document.getElementById(x);
+        element.scrollIntoView({ behavior: "smooth" });
     }
 
     return (
@@ -60,20 +63,20 @@ export default function MinCVPage() {
                         <Box className={styles.main}>
                             <HStack gap="4">
                                 <VStack>
-                                    {activeStep === 1 && <DelingAvCV />}
-                                    {activeStep === 2 && <Personalia />}
-                                    {activeStep === 3 && <Jobbonsker />}
-                                    {activeStep === 4 && <Utdanninger />}
-                                    {activeStep === 5 && <Fagbrev />}
-                                    {activeStep === 6 && <Arbeidsforhold />}
-                                    {activeStep === 7 && <AndreErfaringer />}
-                                    {activeStep === 8 && <Kompetanser />}
-                                    {activeStep === 9 && <OffentligeGodkjenninger />}
-                                    {activeStep === 10 && <AndreGodkjenninger />}
-                                    {activeStep === 11 && <Sprak />}
-                                    {activeStep === 12 && <Forerkort />}
-                                    {activeStep === 13 && <Kurs />}
-                                    {activeStep === 14 && <Sammendrag />}
+                                    <DelingAvCV />
+                                    <Personalia />
+                                    <Jobbonsker />
+                                    <Utdanninger />
+                                    <Fagbrev />
+                                    <Arbeidsforhold />
+                                    <AndreErfaringer />
+                                    <Kompetanser />
+                                    <OffentligeGodkjenninger />
+                                    <AndreGodkjenninger />
+                                    <Sprak />
+                                    <Forerkort />
+                                    <Kurs />
+                                    <Sammendrag />
                                 </VStack>
                             </HStack>
                         </Box>

diff --git a/src/app/(minCV)/_components/andreErfaringer/AndreErfaringer.jsx b/src/app/(minCV)/_components/andreErfaringer/AndreErfaringer.jsx
@@ -4,8 +4,8 @@ import { PlusIcon } from "@navikt/aksel-icons";
 
 export default function AndreErfaringer() {
     return (
-        <div>
-            <Box id="7" background="surface-default" padding="10" className={styles.box}>
+        <div id="7">
+            <Box background="surface-default" padding="10" className={styles.box}>
                 <Heading level="2" size="large" align="start" spacing>
                     Andre erfaringer
                 </Heading>

diff --git a/src/app/(minCV)/_components/andreGodkjenninger/AndreGodkjenninger.jsx b/src/app/(minCV)/_components/andreGodkjenninger/AndreGodkjenninger.jsx
@@ -4,8 +4,8 @@ import { PlusIcon } from "@navikt/aksel-icons";
 
 export default function AndreGodkjenninger() {
     return (
-        <div>
-            <Box id="10" background="surface-default" padding="10" className={styles.box}>
+        <div id="10">
+            <Box background="surface-default" padding="10" className={styles.box}>
                 <Heading level="2" size="large" align="start" spacing>
                     Andre godkjenninger
                 </Heading>

diff --git a/src/app/(minCV)/_components/arbeidsforhold/Arbeidsforhold.jsx b/src/app/(minCV)/_components/arbeidsforhold/Arbeidsforhold.jsx
@@ -26,8 +26,8 @@ export default function Arbeidsforhold() {
     const [bekreftJobbJegHarNa, setBekreftJobbJegHarNa] = useState(false);
 
     return (
-        <div>
-            <Box id="6" background="surface-default" padding="10" className={styles.box}>
+        <div id="6">
+            <Box background="surface-default" padding="10" className={styles.box}>
                 <Heading level="2" size="large" align="start" spacing>
                     Arbeidsforhold
                 </Heading>

diff --git a/src/app/(minCV)/_components/delingAvCV/DelingAvCV.jsx b/src/app/(minCV)/_components/delingAvCV/DelingAvCV.jsx
@@ -160,8 +160,8 @@ function EuresLogoIcon() {
 
 export default function DelingAvCV() {
     return (
-        <div>
-            <Box id="1" background="surface-default" padding="10" className={styles.box}>
+        <div id="1">
+            <Box background="surface-default" padding="10" className={styles.box}>
                 <HStack justify="center">
                     <StarsEUIcon />
                 </HStack>

diff --git a/src/app/(minCV)/_components/fagbrev/Fagbrev.jsx b/src/app/(minCV)/_components/fagbrev/Fagbrev.jsx
@@ -9,8 +9,8 @@ export default function Fagbrev() {
     const [fagdokumentasjon, setFagdokumentasjon] = useState();
 
     return (
-        <div>
-            <Box id="5" background="surface-default" padding="10" className={styles.box}>
+        <div id="5">
+            <Box background="surface-default" padding="10" className={styles.box}>
                 <Heading className={styles.mb6} level="2" size="large" align="start" spacing>
                     Fagbrev
                 </Heading>

diff --git a/src/app/(minCV)/_components/forerkort/Forerkort.jsx b/src/app/(minCV)/_components/forerkort/Forerkort.jsx
@@ -4,8 +4,8 @@ import { PlusIcon } from "@navikt/aksel-icons";
 
 export default function Forerkort() {
     return (
-        <div>
-            <Box id="12" background="surface-default" padding="10" className={styles.box}>
+        <div id="12">
+            <Box background="surface-default" padding="10" className={styles.box}>
                 <Heading level="2" size="large" align="start" spacing>
                     Førerkort
                 </Heading>

diff --git a/src/app/(minCV)/_components/jobbonsker/Jobbonsker.jsx b/src/app/(minCV)/_components/jobbonsker/Jobbonsker.jsx
@@ -20,8 +20,8 @@ export default function Jobbonsker() {
     const [hvorKanDuJobbe, setHvorKanDuJobbe] = useState();
 
     return (
-        <div>
-            <Box id="3" background="surface-default" padding="10" className={styles.box}>
+        <div id="3">
+            <Box background="surface-default" padding="10" className={styles.box}>
                 <Heading level="2" size="large" align="start" spacing>
                     Jobbønsker
                 </Heading>

diff --git a/src/app/(minCV)/_components/kompetanser/Kompetanser.jsx b/src/app/(minCV)/_components/kompetanser/Kompetanser.jsx
@@ -4,8 +4,8 @@ import { PlusIcon } from "@navikt/aksel-icons";
 
 export default function Fagbrev() {
     return (
-        <div>
-            <Box id="8" background="surface-default" padding="10" className={styles.box}>
+        <div id="8">
+            <Box background="surface-default" padding="10" className={styles.box}>
                 <Heading level="2" size="large" align="start" spacing>
                     Kompetanser
                 </Heading>

diff --git a/src/app/(minCV)/_components/kurs/Kurs.jsx b/src/app/(minCV)/_components/kurs/Kurs.jsx
@@ -4,8 +4,8 @@ import { PlusIcon } from "@navikt/aksel-icons";
 
 export default function Kurs() {
     return (
-        <div>
-            <Box id="13" background="surface-default" padding="10" className={styles.box}>
+        <div id="13">
+            <Box background="surface-default" padding="10" className={styles.box}>
                 <Heading level="2" size="large" align="start" spacing>
                     Kurs
                 </Heading>

diff --git a/src/app/(minCV)/_components/offentligeGodkjenninger/OffentligeGodkjenninger.jsx b/src/app/(minCV)/_components/offentligeGodkjenninger/OffentligeGodkjenninger.jsx
@@ -4,8 +4,8 @@ import { PlusIcon } from "@navikt/aksel-icons";
 
 export default function OffentligeGodkjenninger() {
     return (
-        <div>
-            <Box id="9" background="surface-default" padding="10" className={styles.box}>
+        <div id="9">
+            <Box background="surface-default" padding="10" className={styles.box}>
                 <Heading level="2" size="large" align="start" spacing>
                     Offentlige godkjenninger
                 </Heading>

diff --git a/src/app/(minCV)/_components/personalia/Personalia.jsx b/src/app/(minCV)/_components/personalia/Personalia.jsx
@@ -35,8 +35,8 @@ export default function Personalia() {
     const [sted, setSted] = useState("Oslo");
 
     return (
-        <div>
-            <Box id="2" background="surface-default" padding="10" className={styles.box}>
+        <div id="2">
+            <Box background="surface-default" padding="10" className={styles.box}>
                 <HStack justify="center">
                     <PersonaliaIcon />
                 </HStack>

diff --git a/src/app/(minCV)/_components/sammendrag/Sammendrag.jsx b/src/app/(minCV)/_components/sammendrag/Sammendrag.jsx
@@ -4,8 +4,8 @@ import { PlusIcon } from "@navikt/aksel-icons";
 
 export default function Sammendrag() {
     return (
-        <div>
-            <Box id="14" background="surface-default" padding="10" className={styles.box}>
+        <div id="14">
+            <Box background="surface-default" padding="10" className={styles.box}>
                 <Heading level="2" size="large" align="start" spacing>
                     Om meg
                 </Heading>

diff --git a/src/app/(minCV)/_components/sprak/Sprak.jsx b/src/app/(minCV)/_components/sprak/Sprak.jsx
@@ -4,8 +4,8 @@ import { PlusIcon } from "@navikt/aksel-icons";
 
 export default function Sprak() {
     return (
-        <div>
-            <Box id="11" background="surface-default" padding="10" className={styles.box}>
+        <div id="11">
+            <Box background="surface-default" padding="10" className={styles.box}>
                 <Heading level="2" size="large" align="start" spacing>
                     Språk
                 </Heading>

diff --git a/src/app/(minCV)/_components/utdanninger/Utdanninger.jsx b/src/app/(minCV)/_components/utdanninger/Utdanninger.jsx
@@ -20,8 +20,8 @@ export default function Utdanninger() {
     const [leggTilUtdanning, setLeggTilUtdanning] = useState(false);
 
     return (
-        <div>
-            <Box id="4" background="surface-default" padding="10" className={styles.box}>
+        <div id="4">
+            <Box background="surface-default" padding="10" className={styles.box}>
                 <Heading level="2" size="large" align="start" spacing>
                     Utdanninger
                 </Heading>