refactor: move navbar & background to page layout

app/src/components/NavigationBar.tsx

@@ -31,6 +31,9 @@ function NavMenu() {
  );
 }
 
+/* TODO the socials should be dynamically loaded from Strapi. 
+ This would probably require to migrate to an App Router to use
+ server-side components. */
 export default function NavigationBar() {
  const [visible, setVisible] = useState(false);
  const toggleMenu = () => {

app/src/pages/_app.tsx

@@ -1,6 +1,18 @@
+import Background from "@/assets/background.svg";
+import NavigationBar from "@/components/NavigationBar";
 import "@/styles/globals.scss";
 import type { AppProps } from "next/app";
 
 export default function App({ Component, pageProps }: AppProps) {
- return <Component {...pageProps} />;
+ return (
+ <>
+ <NavigationBar />
+ <div className="main">
+ <Component {...pageProps} />
+ </div>
+ <div className="background">
+ <Background />
+ </div>
+ </>
+ );
 }

app/src/pages/index.tsx

@@ -1,23 +1,15 @@
-import Background from "@/assets/background.svg";
-import NavigationBar from "@/components/NavigationBar";
 import StrapiImage from "@/components/StrapiImage";
 import strapi from "@/strapi";
 import { ApiAssociation } from "@/types/generated/contentTypes";
 import { GetServerSideProps, InferGetServerSidePropsType } from "next";
 
 export default function Home(props: { association: ApiAssociation }) {
  return (
- <div className="main">
- <NavigationBar />
- <div className="background">
- <StrapiImage
- img={props.association.attributes.logo}
- size="medium"
- className="CLICLogo"
- />
- <Background className="background" />
- </div>
- </div>
+ <StrapiImage
+ img={props.association.attributes.logo}
+ size="medium"
+ className="CLICLogo"
+ />
  );
 }
 
@@ -27,6 +19,5 @@ export const getServerSideProps: GetServerSideProps<
  let association = await strapi.find<ApiAssociation>("association", {
  populate: "*",
  });
- console.log(JSON.stringify(association));
  return { props: { association: association.data } };
 };

app/src/styles/globals.scss

@@ -7,33 +7,40 @@ a {
  text-decoration: none;
  color: inherit;
 }
-
-.main {
- display: flex;
- justify-content: space-between;
- align-items: center;
- height: 100vh;
-}
-
 .background {
  position: absolute;
  top: 0;
  left: 0;
- right: 0;
  z-index: -50;
+ overflow: hidden;
+
+ min-height: 100vh;
+ height: 100%;
+ min-width: 100vw;
+ max-width: 100vw;
+
+ svg {
+ min-height: 100vh;
+ min-width: 100vw;
+ }
+}
+
+.main {
  display: flex;
  align-items: center;
  justify-content: center;
+
+ margin-left: 5rem;
+ width: calc(100vw - 5rem);
+
+ min-height: 100vh;
 }
 
 .CLICLogo {
  height: 15em;
  fill: white;
  margin: auto;
  margin-top: 30vh;
- transform: translateX(
- 2.5em
- ); // for centering the logo with respect to the navbar
 }
 
 @media (max-width: 700px) {
@@ -42,11 +49,3 @@ a {
  margin-top: 15vh;
  }
 }
-
-@media (max-width: 800px) {
- .background {
- position: fixed;
- width: 100%;
- margin: auto;
- }
-}