Fix: footer position

src/app/(main)/layout.tsx

@@ -5,20 +5,33 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import Header from "@/layout/Header";
 import Footer from "@/layout/Footer";
 
-const Container = styled.main`
+const Main = styled.main`
   height: 100vh;
+}
+`;
+
+const Container = styled.div`
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  * {
+    flex-shrink: 0;
+  }
 `;
 
 const queryClient = new QueryClient();
 
 const Layout = ({ children }: Readonly<{ children: React.ReactNode }>) => {
   return (
     <QueryClientProvider client={queryClient}>
-      <Container>
-        <Header />
-        {children}
-        <Footer />
-      </Container>
+      <Main>
+        <Container>
+          <Header />
+          {children}
+          <Footer />
+        </Container>
+      </Main>
     </QueryClientProvider>
   );
 };

src/layout/Footer/index.tsx

@@ -6,7 +6,6 @@ import LearnAboutKleros from "@/assets/learn-about-kleros.svg";
 import { socialmedia } from "@/consts/socialmedia";
 
 const Container = styled.div`
-  position: fixed;
   height: 122px;
   width: 100%;
   bottom: 0;
@@ -15,6 +14,7 @@ const Container = styled.div`
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  margin-top: 24px;
   padding: 0 32px 8px 32px;
   gap: 24px;
 `;

src/layout/Header/Navbar/MobileHeader.tsx

@@ -5,6 +5,7 @@ import Link from "next/link";
 import { useClickAway, useToggle } from "react-use";
 import HamburgerIcon from "@/assets/Menu.svg";
 import KlerosCourtLogo from "@/assets/kleros-court.svg";
+import { isUndefined } from "@/lib/utils";
 import NavBar from "./Navbar";
 
 const Container = styled.div`
@@ -18,15 +19,19 @@ const StyledHamburger = styled.a`
   padding: 0;
 `;
 
-const OpenContext = React.createContext({
-  isOpen: false,
-  toggleIsOpen: () => {
-    // Placeholder
-  },
-});
+interface IOpenContext {
+  isOpen: boolean;
+  toggleIsOpen: () => void;
+}
+
+const OpenContext = React.createContext<IOpenContext | undefined>(undefined);
 
 export function useOpenContext() {
-  return useContext(OpenContext);
+  const context = useContext(OpenContext);
+  if (isUndefined(context)) {
+    throw new Error("Cannot use OpenContext outside of provider");
+  }
+  return context;
 }
 
 const MobileHeader: React.FC = () => {
@@ -51,4 +56,5 @@ const MobileHeader: React.FC = () => {
     </Container>
   );
 };
+
 export default MobileHeader;

src/layout/Header/Navbar/Navbar.tsx

@@ -4,7 +4,6 @@ import { useQuery } from "@tanstack/react-query";
 import { darkTheme } from "@kleros/ui-components-library";
 import UserIcon from "@/assets/user.svg";
 import ConnectionsIcon from "@/assets/connections.svg";
-import { Overlay } from "@/components/Overlay";
 import Explore from "@/layout/Header/Navbar/Explore";
 import { useOpenContext } from "./MobileHeader";
 
@@ -14,14 +13,9 @@ const Wrapper = styled.div<{ isOpen: boolean }>`
   top: 100%;
   left: 0;
   width: 100vw;
-  height: 100vh;
   z-index: 30;
 `;
 
-const StyledOverlay = styled(Overlay)`
-  top: unset;
-`;
-
 const Container = styled.div<{ isOpen: boolean }>`
   position: absolute;
   top: 0;
@@ -71,25 +65,22 @@ const NavBar: React.FC = () => {
   });
 
   return (
-    <>
-      <Wrapper {...{ isOpen }}>
-        <StyledOverlay />
-        <Container {...{ isOpen }}>
-          {data && (
-            <>
-              <StyledItems>
-                <UserIcon /> {data.username}
-              </StyledItems>
-              <StyledItems>
-                <ConnectionsIcon /> {data.connections} Connections
-              </StyledItems>
-              <StyledDivider />
-            </>
-          )}
-          <Explore />
-        </Container>
-      </Wrapper>
-    </>
+    <Wrapper {...{ isOpen }}>
+      <Container {...{ isOpen }}>
+        {data && (
+          <>
+            <StyledItems>
+              <UserIcon /> {data.username}
+            </StyledItems>
+            <StyledItems>
+              <ConnectionsIcon /> {data.connections} Connections
+            </StyledItems>
+            <StyledDivider />
+          </>
+        )}
+        <Explore />
+      </Container>
+    </Wrapper>
   );
 };
 

src/lib/registry.tsx

@@ -1,8 +1,8 @@
-'use client'
+"use client"
 
-import React, { useState } from 'react'
-import { useServerInsertedHTML } from 'next/navigation'
-import { ServerStyleSheet, StyleSheetManager } from 'styled-components'
+import React, { useState } from "react";
+import { useServerInsertedHTML } from "next/navigation";
+import { ServerStyleSheet, StyleSheetManager } from "styled-components";
 
 export default function StyledComponentsRegistry({
   children,
@@ -11,19 +11,19 @@ export default function StyledComponentsRegistry({
 }) {
   // Only create stylesheet once with lazy initial state
   // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
-  const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet())
- 
+  const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet());
+
   useServerInsertedHTML(() => {
     const styles = styledComponentsStyleSheet.getStyleElement()
     styledComponentsStyleSheet.instance.clearTag()
     return <>{styles}</>
-  })
- 
-  if (typeof window !== 'undefined') return <>{children}</>
- 
+  });
+
+  if (typeof window !== "undefined") return <>{children}</>;
+
   return (
     <StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
       {children}
     </StyleSheetManager>
-  )
-}
+  );
+};