Layout footer, uferdig

Co-authored-by: andre groseth <[email protected]> Co-authored-by: Jeremiah Uy <[email protected]>
navikt · Dec 8, 2023 · 664bc71 · 664bc71
1 parent fd7c134
commit 664bc71
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 41 deletions.
diff --git a/apps/frontend/src/components/Navigation/Footer.tsx b/apps/frontend/src/components/Navigation/Footer.tsx
@@ -1,11 +1,5 @@
-import { Block } from 'baseui/block'
-import { datajegerSlackLink, documentationLink, githubRepo } from '../../util/config'
+import { Button, Link, Spacer } from '@navikt/ds-react'
 import * as React from 'react'
-import { ExternalLink } from '../common/RouteLink'
-import ToTopCircle from '../../resources/ToTopCircle.svg'
-import { ettlevColors, maxPageWidth, responsivePaddingSmall, responsiveWidthSmall } from '../../util/theme'
-import Button from '../common/Button'
-import { KIND } from 'baseui/button'
 
 export const Footer = () => {
   const [showButtonToTop, setShowButtonToTop] = React.useState(false)
@@ -27,40 +21,65 @@ export const Footer = () => {
   }, [pageScroll])
 
   return (
-    <Block backgroundColor={ettlevColors.green800} width="100%" justifyContent="center" display="flex" position="absolute" bottom="0">
-      <Block maxWidth={maxPageWidth} width="100%">
-        <Block
-          display="flex"
-          width={responsiveWidthSmall}
-          height="100px"
-          paddingRight={responsivePaddingSmall}
-          paddingLeft={responsivePaddingSmall}
-          position="relative"
-          $style={{ left: 0, right: 0, bottom: 0 }}
-        >
-          <div className="w-full min-h-[100px] flex items-center">
-            <div className="w-full flex justify-around items-center">
-              <ExternalLink href={datajegerSlackLink} className="text-white" openOnSamePage>
-                #etterlevelse på Slack
-              </ExternalLink>
-              <ExternalLink href={githubRepo} openOnSamePage className="text-white">
-                Github
-              </ExternalLink>
-              <ExternalLink href={documentationLink} openOnSamePage className="text-white">
-                Dokumentasjon
-              </ExternalLink>
-            </div>
-          </div>
+    <div className="bg-purple-400 text-white">
+      <Button onClick={() => window.scrollTo(0, 0)} variant="tertiary">
+        Til toppen
+      </Button>
+      <div className="flex">
+        <div className="flex-1">Støtte til etterlevelse 2023 NAV Arbeids- og velferdsetaten</div>
+        <div className="flex-1">
+          Nyttige lenker
+          <Link href="#">Status på etterlevelse i NAV</Link>
+          <Link href="#">Om etterlevelse på Navet</Link>
+          <Link href="#">Behandlingskatalogen</Link>
+          <Link href="#">Veileder for å skrive etterlevelseskrav</Link>
+        </div>
+        <div className="flex-1">
+          Om nettstedet
+          <Link href="#">Hva er Støtte til etterlevelse?</Link>
+        </div>
+        <div className="flex-1">
+          Finn oss
+          <Link href="#">Slack</Link>
+          <Link href="#">Github</Link>
+          <Link href="#">Teamkatalogen</Link>
+        </div>
+      </div>
+    </div>
+    // <Block backgroundColor={ettlevColors.green800} width="100%" justifyContent="center" display="flex" position="absolute" bottom="0">
+    //   <Block maxWidth={maxPageWidth} width="100%">
+    //     <Block
+    //       display="flex"
+    //       width={responsiveWidthSmall}
+    //       height="100px"
+    //       paddingRight={responsivePaddingSmall}
+    //       paddingLeft={responsivePaddingSmall}
+    //       position="relative"
+    //       $style={{ left: 0, right: 0, bottom: 0 }}
+    //     >
+    //       <div className="w-full min-h-[100px] flex items-center">
+    //         <div className="w-full flex justify-around items-center">
+    //           <ExternalLink href={datajegerSlackLink} className="text-white" openOnSamePage>
+    //             #etterlevelse på Slack
+    //           </ExternalLink>
+    //           <ExternalLink href={githubRepo} openOnSamePage className="text-white">
+    //             Github
+    //           </ExternalLink>
+    //           <ExternalLink href={documentationLink} openOnSamePage className="text-white">
+    //             Dokumentasjon
+    //           </ExternalLink>
+    //         </div>
+    //       </div>
 
-          {showButtonToTop && (
-            <Block position="relative" display="flex" justifyContent="flex-end" $style={{ cursor: 'pointer', top: '-50px' }} onClick={() => window.scrollTo(0, 0)}>
-              <Button kind={KIND.tertiary} $style={{ ':hover': { backgroundColor: 'transparent' } }}>
-                <img src={ToTopCircle} alt="Til toppen av siden" />
-              </Button>
-            </Block>
-          )}
-        </Block>
-      </Block>
-    </Block>
+    //       {showButtonToTop && (
+    //         <Block position="relative" display="flex" justifyContent="flex-end" $style={{ cursor: 'pointer', top: '-50px' }} onClick={() => window.scrollTo(0, 0)}>
+    //           <Button kind={KIND.tertiary} $style={{ ':hover': { backgroundColor: 'transparent' } }}>
+    //             <img src={ToTopCircle} alt="Til toppen av siden" />
+    //           </Button>
+    //         </Block>
+    //       )}
+    //     </Block>
+    //   </Block>
+    // </Block>
   )
 }
diff --git a/apps/frontend/src/main.tsx b/apps/frontend/src/main.tsx
@@ -11,6 +11,7 @@ import { codelist } from './services/Codelist'
 import { useAwait, useAwaitUser } from './util/hooks'
 import { useNetworkStatus } from './util/network'
 import { customTheme } from './util/theme'
+import { Footer } from './components/Navigation/Footer'
 
 const engine = new Styletron()
 
@@ -33,6 +34,7 @@ const Main = (props: any) => {
             <div className="flex flex-col w-full items-center bg-white">
               <Header />
               <AppRoutes />
+              <Footer />
             </div>
           </BrowserRouter>
           <ErrorModal />