Update: layout of footer to be always at bottom

Co-authored-by: andregroseth <[email protected]>
navikt · Dec 8, 2023 · 72777ef · 72777ef
1 parent a9b1741
commit 72777ef
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 9 deletions.
diff --git a/apps/frontend/src/components/Navigation/Footer.tsx b/apps/frontend/src/components/Navigation/Footer.tsx
@@ -6,14 +6,14 @@ import { behandlingsKatalogLink, datajegerSlackLink, documentationLink, githubRe
 
 export const Footer = () => {
   const [showButtonToTop, setShowButtonToTop] = React.useState(false)
-  const [pageScroll, setPageScroll] = React.useState(window.pageYOffset)
+  const [pageScroll, setPageScroll] = React.useState(window.scrollY)
 
   React.useEffect(() => {
     const checkScrollTop = () => {
-      setPageScroll(window.pageYOffset)
-      if (!showButtonToTop && window.pageYOffset > 100) {
+      setPageScroll(window.scrollY)
+      if (!showButtonToTop && window.scrollY > 100) {
         setShowButtonToTop(true)
-      } else if (showButtonToTop && window.pageYOffset <= 100) {
+      } else if (showButtonToTop && window.scrollY <= 100) {
         setShowButtonToTop(false)
       }
     }
@@ -24,16 +24,16 @@ export const Footer = () => {
   }, [pageScroll])
 
   return (
-    <div className="bg-purple-400 text-white px-12 py-7 w-full">
-      <Button
+    <div className="bg-purple-400 text-white px-12 py-7 w-full mt-auto">
+      {showButtonToTop && <Button
         className="text-white"
         size="xsmall"
         icon={<ArrowUpIcon aria-label="" aria-hidden />}
         onClick={() => window.scrollTo(0, 0)}
         variant="tertiary-neutral"
       >
         Til toppen
-      </Button>
+      </Button>}
       <div className="flex mt-11">
         <div className=" flex flex-col">
           <BodyShort className="text-2xl mb-5 flex">

diff --git a/apps/frontend/src/components/scaffold/Page.tsx b/apps/frontend/src/components/scaffold/Page.tsx
@@ -23,7 +23,7 @@ export const PageLayout = ({
 }) => {
 
   return (
-    <div id="content" role="main" className={`flex flex-col w-full bg-white min-h-screen ${fullWidth ? '' : 'max-w-7xl'}`}>
+    <div id="content" role="main" className={`flex flex-col w-full bg-white ${fullWidth ? '' : 'max-w-7xl'}`}>
       <div className={`${noPadding ? '' : 'px-2 pb-6'}`}>
         {(currentPage || breadcrumbPaths) && (
           <CustomizedBreadcrumbs currentPage={currentPage} paths={breadcrumbPaths} />

diff --git a/apps/frontend/src/main.tsx b/apps/frontend/src/main.tsx
@@ -31,7 +31,7 @@ const Main = (props: any) => {
               <title>Etterlevelse</title>
             </Helmet>
 
-            <div className="flex flex-col w-full items-center bg-white">
+            <div className="flex flex-col w-full items-center min-h-screen bg-white">
               <Header />
               <AppRoutes />
               <Footer />