rename footer to navbar

BookHive-ufcg · Aug 14, 2024 · a577a9b · a577a9b · github-actions · Aug 14, 2024
1 parent 89a9d16
commit a577a9b
Show file tree

Hide file tree

Showing 7 changed files with 74 additions and 93 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -5,9 +5,9 @@
     "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
     "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
 
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
+  --background-primary: #ffffee;
+  --background-secondary: #ffffff;
+  --background-tertiary: #e7e7e7;
 
   --primary-glow: conic-gradient(
     from 180deg at 50% 50%,
@@ -40,39 +40,6 @@
   --card-border-rgb: 131, 134, 135;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-
-    --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
-    --secondary-glow: linear-gradient(
-      to bottom right,
-      rgba(1, 65, 255, 0),
-      rgba(1, 65, 255, 0),
-      rgba(1, 65, 255, 0.3)
-    );
-
-    --tile-start-rgb: 2, 13, 46;
-    --tile-end-rgb: 2, 5, 19;
-    --tile-border: conic-gradient(
-      #ffffff80,
-      #ffffff40,
-      #ffffff30,
-      #ffffff20,
-      #ffffff10,
-      #ffffff10,
-      #ffffff80
-    );
-
-    --callout-rgb: 20, 20, 20;
-    --callout-border-rgb: 108, 108, 108;
-    --card-rgb: 100, 100, 100;
-    --card-border-rgb: 200, 200, 200;
-  }
-}
-
 * {
   box-sizing: border-box;
   padding: 0;
@@ -99,9 +66,3 @@ a {
   color: inherit;
   text-decoration: none;
 }
-
-@media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
-  }
-}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,7 +1,7 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
-import Footer from "@/components/Footer";
+import Navbar from "@/components/Navbar";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -19,7 +19,7 @@ export default function RootLayout({
     <html lang="en">
       <body className={inter.className}>
         {children}
-        <Footer />
+        <Navbar />
       </body>
     </html>
   );

diff --git a/src/app/page.module.css b/src/app/page.module.css
@@ -192,7 +192,7 @@
     align-items: flex-end;
     pointer-events: none;
     inset: auto 0 0;
-    padding: 2rem;
+    margin-bottom: 4rem;
     height: 200px;
     background: linear-gradient(
       to bottom,
@@ -210,16 +210,6 @@
   }
 }
 
-@media (prefers-color-scheme: dark) {
-  .vercelLogo {
-    filter: invert(1);
-  }
-
-  .logo {
-    filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70);
-  }
-}
-
 @keyframes rotate {
   from {
     transform: rotate(360deg);

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -19,7 +19,6 @@ export default function Home() {
             <Image
               src="/vercel.svg"
               alt="Vercel Logo"
-              className={styles.vercelLogo}
               width={100}
               height={24}
               priority

diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import React from "react";
+import Link from "next/link";
+import { FaHome, FaBook, FaPlus, FaSearch, FaUser } from "react-icons/fa";
+import { usePathname } from "next/navigation";
+
+import styles from "./navbar.module.css";
+
+export default function Navbar() {
+  const pathname = usePathname();
+
+  return (
+    <nav className={styles.navbar}>
+      <Link href="/" className={pathname === "/" ? styles.active : undefined}>
+        <FaHome className={styles.icon} />
+      </Link>
+      <Link href="/books">
+        <FaBook className={styles.icon} />
+      </Link>
+      <Link href="/add-book">
+        <FaPlus className={styles.icon} />
+      </Link>
+      <Link
+        href="/search"
+        className={pathname === "/search" ? styles.active : undefined}
+      >
+        <FaSearch className={styles.icon} />
+      </Link>
+      <Link
+        href="/profile"
+        className={pathname === "/profile" ? styles.active : undefined}
+      >
+        <FaUser className={styles.icon} />
+      </Link>
+    </nav>
+  );
+}
diff --git a/src/components/Navbar/navbar.module.css b/src/components/Navbar/navbar.module.css
@@ -0,0 +1,30 @@
+.navbar {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  background-color: var(--background-secondary);
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  border-top: 1px solid var(--background-tertiary);
+}
+
+.navbar a {
+  padding: 20px 0;
+  width: 20%;
+  display: flex;
+  justify-content: center;
+}
+
+.navbar a:hover {
+  background-color: var(--background-tertiary);
+}
+
+.icon {
+  color: #ffdd4b;
+  font-size: 24px;
+}
+
+.active {
+  background-color: var(--background-tertiary);
+}