Navbar: Fixed at the top + responsive for mobile.

-> Fixed the Navbar at the top of the page which makes the user to navigate through pages easily. -> Mobile UI of the navigation bar has been fixed. -> Animations for the closing and opening of the navigation bar. -> Proper comments added.
TenzDelek · Oct 17, 2024 · 19e9b21 · 19e9b21
1 parent e49b73d
commit 19e9b21
Show file tree

Hide file tree

Showing 6 changed files with 201 additions and 43 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@clerk/clerk-sdk-node": "^5.0.48",
-    "@clerk/nextjs": "^5.7.1",
+    "@clerk/nextjs": "^5.7.5",
     "@prisma/client": "^5.20.0",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-slot": "^1.1.0",
@@ -62,4 +62,4 @@
       "prettier --write"
     ]
   }
-}
+}
diff --git a/src/app/about/page.jsx b/src/app/about/page.jsx
@@ -60,7 +60,7 @@ const About = () => {
 
     return (
         <div className="min-h-screen bg-[#0A0A0A] text-[#FAFAFA] overflow-hidden">
-            <div className="relative container mx-auto px-4 py-16">
+            <div className="container mx-auto px-4 py-16">
                 <header className="text-center mb-16">
                     <h1 className="text-6xl font-bold mb-4">
                         Meet DearDiary, your space for life&apos;s moments

diff --git a/src/app/daily-quote/page.jsx b/src/app/daily-quote/page.jsx
@@ -35,7 +35,7 @@ export default function DailyQuote() {
 
   return (
     <div className="min-h-screen bg-[#0A0A0A] text-[#FAFAFA] overflow-hidden">
-      <div className="relative container mx-auto px-4 py-12">
+      <div className="container mx-auto px-4 py-12">
         <div className="text-center mb-16">
           <h1 className="text-6xl font-bold mb-4 text-white">
             Daily Quotes to Inspire You

diff --git a/src/app/layout.jsx b/src/app/layout.jsx
@@ -32,8 +32,8 @@ export default function RootLayout({ children }) {
         <body
           className={`${geistSans.variable} ${geistMono.variable} antialiased`}
         >
-          <header className="flex items-center justify-between p-2 text-white">
-            <div className="flex-grow flex sm:justify-center">
+          <header className="fixed flex items-center justify-between w-full p-2 text-white bg-black">
+            <div className="sm:justify-center flex flex-grow">
               <Navbar />
             </div>
             <div className="flex items-center">
@@ -45,8 +45,11 @@ export default function RootLayout({ children }) {
               </SignedIn>
             </div>
           </header>
-          {children}
-          <footer><Footer/></footer>
+          {/* This div is responsible to maintain proper spacing throughout the pages [this was needed because the Navbar has been fixed] */}
+          <div id="main" className="pt-14 sm:pt-24">
+            {children}
+          </div>
+          <footer><Footer /></footer>
         </body>
       </html>
     </ClerkProvider>

diff --git a/src/components/Navbar.js b/src/components/Navbar.js
@@ -1,37 +1,82 @@
 "use client"
-import { CircleX, Menu } from 'lucide-react';
+import { BookHeart, BookType, Gem, Home, Menu, Notebook, Quote } from 'lucide-react';
 import Link from 'next/link';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
+import favicon from "@/../public/favicon/DearDiary.png"
+import Image from 'next/image';
 
 const items = [
-  { link: "/", name: "Home" },
-  { link: "/notes", name: "Notes" },
-  { link: "/daily-quote", name: "Daily Quote" },
-  { link: "/about", name: "About" },
-  { link: "/guestbook", name: "Guestbook" },
-  { link: "/diary", name: "Diary" }
+  { icon: <Home />, link: "/", name: "Home" },
+  { icon: <Notebook />, link: "/notes", name: "Notes" },
+  { icon: <Quote />, link: "/daily-quote", name: "Daily Quote" },
+  { icon: <Gem />, link: "/about", name: "About" },
+  { icon: <BookHeart />, link: "/guestbook", name: "Guestbook" },
+  { icon: <BookType />, link: "/diary", name: "Diary" }
 ]
 
 export default function Navbar() {
+
+  // This state hook is responsible for the transition effect on the navbar -> updating this true/false makes the navbar visible/hidden
   const [open, setOpen] = useState(true)
+
+  // handleResize function is responsible to maintain the state value as per the windows width.
+  const handleResize = () => {
+    if (typeof window !== "undefined") {
+      if (window.innerWidth > 640) {
+        setOpen(true)
+      }
+      else {
+        setOpen(false)
+      }
+    }
+  }
+
+  // This useEffect hook is responsible for maintaining the Navbar layout on resizing.
+  useEffect(() => {
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+
   return (
     <>
-      <button className='sm:hidden z-10' onClick={() => setOpen(!open)}>
 
-        {!open ? <Menu /> :
-          <CircleX />}
+      {/* Hamburger Menu -> Visible on small devices only */}
+      <button className='sm:hidden z-10' onClick={() => setOpen(!open)}>
+        <Menu />
       </button>
       {
-        // open &&
-        <nav className={`flex-col absolute top-0 left-0 items-center h-screen sm:h-auto ${open ? 'w-full' : 'hidden'} sm:flex sm:w-auto bg-[#171717] sm:bg-transparent z-[2] sm:relative sm:flex-row flex gap-8  justify-center sm:space-x-8 p-4  text-white`}>
-          {
-            items.map((item, index) => (
-              <div key={index} className='py-2 group'>
-                <Link href={item.link} onClick={() => setOpen(false)}> {item.name} </Link>
-                <div className='w-0 group-hover:w-full h-[2px] rounded-full bg-white transition-all delay-750'></div>
-              </div>
-            ))
-          }
+        // Main Navbar
+        <nav className={`bg-transparent absolute top-0 left-0 items-center h-screen sm:h-auto transition-transform w-full ${open === true ? 'translate-x-0' : '-translate-x-full'}  duration-200 sm:flex sm:w-auto sm:bg-black sm:bg-transparent z-30 sm:z-[2] sm:relative sm:flex-row flex  justify-center sm:p-4 text-white space-x-4`}>
+
+          {/* This div is containing all necessary navigation links as well as a div (this div is shown on small devices only\-). */}
+          <div id='navLinksContainer' className={` flex flex-col sm:flex-row gap-y-2 gap-x-8 h-full w-[75%] sm:w-auto text-gray-400 bg-black shadow-gray-600 shadow-lg sm:shadow-none`}>
+
+            {/* DearDiary Logo and Text */}
+            <Link href={"/"} onClick={handleResize} className='sm:hidden w-fit flex items-center justify-start p-5 mb-3 space-x-2'>
+              <Image width={32} height={32} src={favicon.src} alt="Icon" className='w-10 h-10' />
+              <span className='font-bold text-white'>DearDiary</span>
+            </Link>
+
+            {/* Iterate all the navigation links */}
+            {
+              items.map((item, index) => (
+                <div key={index} className='sm:px-0 group px-5 py-2'>
+                  <Link className='group-hover:text-white flex items-center justify-start' href={item.link} onClick={() => handleResize()}>
+                    <span className='sm:hidden inline-block'>{item.icon}</span>
+                    <span className='text-nowrap block' > {item.name} </span>
+                  </Link>
+                  <div className='w-[50%] sm:block sm:w-0 group-hover:w-full h-[1px] sm:h-[2px] rounded-full bg-white transition-all delay-750'></div>
+                </div>
+              ))
+            }
+          </div>
+
+          {/* This div when clicked, it hides the NavBar. */}
+          <div id='closeNavArea' className='sm:hidden h-full w-[25%] bg-transparent' onClick={() => setOpen(false)}>
+          </div>
 
         </nav>
       }