Footer (#11)

* Implement the footer

* Test footer rendering

* Adjust navigation tests to pass with the added footer

cypress/e2e/footer.cy.ts

@@ -0,0 +1,13 @@
+describe("Footer", () => {
+  beforeEach(() => {
+    cy.visit("http://localhost:3000/dashboard");
+  });
+
+  it("renders the footer", () => {
+    cy.get("footer").should("be.visible");
+    cy.get("footer").find("a").should("have.length", 4);
+    cy.get("footer")
+      .find("img")
+      .should("have.attr", "src", "/icons/logo-small.svg");
+  });
+});

cypress/e2e/navigation.cy.ts

@@ -47,16 +47,24 @@ describe("Sidebar Navigation", () => {
       cy.get("nav").contains("Issues").should("not.exist");
     });
 
-    it("shows large logo when switching to landscape mode while navigation is collapsed", () => {
+    it.only("shows large logo when switching to landscape mode while navigation is collapsed", () => {
       // collapse navigation
       cy.get("nav").contains("Collapse").click();
-      cy.get("img[src='/icons/logo-small.svg']").should("be.visible");
-      cy.get("img[src='/icons/logo-large.svg']").should("not.be.visible");
+      cy.get("header")
+        .find("img[src='/icons/logo-small.svg']")
+        .should("be.visible");
+      cy.get("header")
+        .find("img[src='/icons/logo-large.svg']")
+        .should("not.be.visible");
 
       //switch to landscape mode that uses the mobile menu
       cy.viewport(900, 1025);
-      cy.get("img[src='/icons/logo-small.svg']").should("not.be.visible");
-      cy.get("img[src='/icons/logo-large.svg']").should("be.visible");
+      cy.get("header")
+        .find("img[src='/icons/logo-large.svg']")
+        .should("be.visible");
+      cy.get("header")
+        .find("img[src='/icons/logo-small.svg']")
+        .should("not.be.visible");
     });
 
     it("support link has correct href", () => {

features/layout/footer/footer-link.module.scss

@@ -0,0 +1,16 @@
+@use "@styles/color";
+@use "@styles/font";
+@use "@styles/space";
+@use "@styles/breakpoint";
+@use "@styles/misc";
+
+.listItem {
+  list-style-type: none;
+  display: inline;
+  margin: 0 space.$s3;
+}
+
+.anchor {
+  text-decoration: none;
+  color: inherit;
+}

features/layout/footer/footer-link.tsx

@@ -0,0 +1,18 @@
+import Link from "next/link";
+import React from "react";
+import styles from "./footer-link.module.scss";
+
+type FooterLinkProps = {
+  text: string;
+  href: string;
+};
+
+export function FooterLink({ text, href }: FooterLinkProps) {
+  return (
+    <li className={styles.listItem}>
+      <Link className={styles.anchor} href={href}>
+        {text}
+      </Link>
+    </li>
+  );
+}

features/layout/footer/footer.module.scss

@@ -0,0 +1,68 @@
+@use "@styles/color";
+@use "@styles/font";
+@use "@styles/space";
+@use "@styles/breakpoint";
+@use "@styles/misc";
+
+.container {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  background: color.$gray-50;
+  padding: 0 space.$s6;
+
+  @media (min-width: breakpoint.$desktop) {
+    flex-direction: row;
+  }
+}
+
+.content {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+
+  @media (min-width: breakpoint.$desktop) {
+    width: 100%;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
+
+.linkList {
+  order: 1;
+  margin: space.$s6;
+  padding: 0;
+
+  @media (min-width: breakpoint.$desktop) {
+    order: 2;
+  }
+}
+
+.version {
+  color: color.$gray-400;
+  margin: space.$s6 0;
+  order: 3;
+
+  @media (min-width: breakpoint.$desktop) {
+    order: 1;
+  }
+}
+
+.links {
+  color: color.$gray-500;
+  order: 1;
+
+  @media (min-width: breakpoint.$desktop) {
+    order: 2;
+  }
+}
+
+.logo {
+  padding: 0;
+  margin: 0;
+  order: 2;
+
+  @media (min-width: breakpoint.$desktop) {
+    order: 3;
+  }
+}

features/layout/footer/footer.tsx

@@ -0,0 +1,45 @@
+import { version } from "../../../package.json";
+import { FooterLink } from "./footer-link";
+import styles from "./footer.module.scss";
+
+const footerLinks = [
+  {
+    text: "Docs",
+    href: "#",
+  },
+  {
+    text: "API",
+    href: "#",
+  },
+  {
+    text: "Help",
+    href: "#",
+  },
+  {
+    text: "Community",
+    href: "#",
+  },
+];
+
+export const Footer = () => (
+  <footer>
+    <div className={styles.container}>
+      <div className={styles.content}>
+        <p className={styles.version}>Version: {version}</p>
+        <div className={styles.links}>
+          <ul className={styles.linkList}>
+            {footerLinks.map((footerLink, index) => (
+              <FooterLink key={index} {...footerLink} />
+            ))}
+          </ul>
+        </div>
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img
+          className={styles.logo}
+          src="/icons/logo-small.svg"
+          alt="Prolog Logo"
+        />
+      </div>
+    </div>
+  </footer>
+);

features/layout/footer/index.ts

@@ -0,0 +1 @@
+export { Footer } from "./footer";

features/layout/index.ts

@@ -1,2 +1,3 @@
 export * from "./page-container";
 export * from "./sidebar-navigation";
+export * from "./footer";

features/layout/page-container/page-container.tsx

@@ -1,5 +1,6 @@
 import Head from "next/head";
 import { SidebarNavigation } from "../sidebar-navigation";
+import { Footer } from "../footer";
 import styles from "./page-container.module.scss";
 
 type PageContainerProps = {
@@ -20,13 +21,16 @@ export function PageContainer({ children, title, info }: PageContainerProps) {
       </Head>
 
       <SidebarNavigation />
-      <main className={styles.main}>
-        <div className={styles.contentContainer}>
-          <h1 className={styles.title}>{title}</h1>
-          <div className={styles.info}>{info}</div>
-          {children}
-        </div>
-      </main>
+      <div className={styles.main}>
+        <main>
+          <div className={styles.contentContainer}>
+            <h1 className={styles.title}>{title}</h1>
+            <div className={styles.info}>{info}</div>
+            {children}
+          </div>
+        </main>
+        <Footer />
+      </div>
     </div>
   );
 }