Feat/footer-and-navbar

src/components/Footer.jsx

@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 
-const links = [
+// Links logged out grid
+const loggedOutLinks = [
   { id: 'home', text: 'Home', href: '/' },
   { id: 'dashboard', text: 'Dashboard', href: '/dashboard' },
   { id: 'privacy-policy', text: 'Privacy Policy', href: '/privacy-policy' },
@@ -11,70 +12,122 @@ const links = [
     text: 'Terms of Service',
     href: '/terms-of-service',
   },
-  { id: 'onboarding', text: 'Onboarding', href: '/onboarding' },
+
+];
+
+// Links logged in
+const loggedInLinks = [
+  { id: 'home', text: 'Home', href: '/' },
+  { id: 'privacy-policy', text: 'Privacy Policy', href: '/privacy-policy' },
+  {
+    id: 'terms-of-service',
+    text: 'Terms of Service',
+    href: '/terms-of-service',
+  },
 ];
 
 const Footer = () => {
-  const getLinkGridClasses = (id) => {
+  const [isLoggedIn, setIsLoggedIn] = useState(
+    !!localStorage.getItem('authToken')
+  );
+
+  useEffect(() => {
+    const checkAuth = () => {
+      setIsLoggedIn(!!localStorage.getItem('authToken'));
+    };
+
+    window.addEventListener('storage', checkAuth);
+    checkAuth();
+
+    return () => {
+      window.removeEventListener('storage', checkAuth);
+    };
+  }, []);
+
+  const getLinkClasses = (isLoggedIn) =>
+    `focus:outline-none focus-visible:ring-2 rounded-lg px-2 py-1 transition-colors whitespace-nowrap ${
+      isLoggedIn
+        ? `font-[Poppins] text-xl font-medium text-[#1E1E1E] leading-normal hover:font-bold focus:ring-persianblue `
+        : 'font-medium text-xl text-[#1e1e1e]  hover:font-bold focus:ring-persianblue'
+    }`;
+
+  // Grid logged out state
+  const getLoggedOutGridClasses = (id) => {
     switch (id) {
       case 'home':
-        return 'row-start-1 col-start-1';
+        return 'lg:row-start-1 lg:col-start-1';
       case 'dashboard':
-        return 'row-start-1 col-start-2';
+        return 'lg:row-start-1 lg:col-start-2';
       case 'privacy-policy':
-        return 'row-start-2 col-start-1';
+        return 'lg:row-start-2 lg:col-start-1';
       case 'sign-up':
-        return 'row-start-2 col-start-2';
+        return 'lg:row-start-2 lg:col-start-2';
       case 'terms-of-service':
-        return 'row-start-3 col-start-1';
+        return 'lg:row-start-3 lg:col-start-1';
       default:
         return '';
     }
   };
 
   return (
-    <footer className="w-full relative bg-[linear-gradient(180deg,rgba(225,255,228,1)_0%,rgba(187,253,255,1)_100%)]">
-      {/*Responsive Navigation Container */}
-      <nav
-        className="
-          // Mobile Styles 
-          flex flex-col items-center py-5 px-2 space-y-4
+    <footer
+      className={`w-full relative bg-[linear-gradient(180deg,rgba(225,255,228,1)_0%,rgba(187,253,255,1)_100%)] font-poppins`}
+    >
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        {isLoggedIn ? (
+          /* Footer for authenticated user */
+          <nav
+            className="flex flex-col items-center justify-center py-4 h-auto md:flex-row md:h-[100px] space-y-3 md:space-y-0 "
+            aria-label="Logged-in Footer navigation"
+          >
+            {loggedInLinks.map((link) => (
+              <Link
+                key={link.id}
+                to={link.href}
+                className={`
+                  mx-6 sm:mx-8 md:mx-12 lg:mx-[135px] 
+                  ${getLinkClasses(true)}
+                `}
+              >
+                {link.text}
+              </Link>
+            ))}
+          </nav>
+        ) : (
+          /* Footer for NON-authenticated user */
+          <nav
+            className="
+              // Mobile Styles: Centered column
+              flex flex-col items-center py-5 px-2 space-y-4
 
-          // Desktop Styles 
-          lg:grid 
-          lg:grid-cols-2 
-          lg:grid-rows-3 
-
-
-          lg:gap-x-[184px] lg:gap-y-4 
-
-          lg:px-[104px] 
-          lg:py-[40px] 
-          lg:h-[250px] 
-          lg:mx-auto
-          lg:max-w-[1440px] 
-          lg:w-full
-        "
-        aria-label="Footer navigation"
-      >
-        {links.map((link) => (
-          <Link
-            key={link.id}
-            to={link.href}
-            className={`
-               relative h-[30px] font-medium text-[#1e1e1e] text-xl tracking-[0] leading-[normal] 
-              focus:outline-none focus:ring-2 focus:ring-persianblue rounded-[5px] px-5 
-
-
-              // Grid Placement for Desktop
-              lg:text-left lg:h-auto 
-              ${getLinkGridClasses(link.id)}
-            `}
+              // Desktop Styles: 2-column Grid
+              lg:grid
+              lg:grid-cols-2
+              lg:grid-rows-3
+              lg:gap-x-40 lg:gap-y-4
+              lg:px-10
+              lg:py-10
+              lg:max-w-[1000px]
+              lg:mx-auto
+            "
+            aria-label="Logged-out Footer navigation"
           >
-            {link.text}
-          </Link>
-        ))}
-      </nav>
+            {loggedOutLinks.map((link) => (
+              <Link
+                key={link.id}
+                to={link.href}
+                className={`
+                  text-center relative h-auto ${getLinkClasses(false)}
+                  // Grid Placement for Desktop
+                  lg:text-left ${getLoggedOutGridClasses(link.id)}
+                `}
+              >
+                {link.text}
+              </Link>
+            ))}
+          </nav>
+        )}
+      </div>
     </footer>
   );
 };

src/components/MobileMenu.jsx

@@ -0,0 +1,63 @@
+// react
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { AiOutlineClose } from 'react-icons/ai';
+import { RiLayoutHorizontalFill, RiUser3Fill } from 'react-icons/ri';
+import { PiListBulletsFill } from 'react-icons/pi';
+
+const MobileMenu = ({ isOpen, toggleMenu }) => {
+  const navLinks = [
+    { name: 'Dashboard', href: '/dashboard', icon: PiListBulletsFill },
+    {
+      name: 'Detox Challenge',
+      href: '/detoxChallenge',
+      icon: RiLayoutHorizontalFill,
+    },
+    { name: 'Profile', href: '/profile', icon: RiUser3Fill },
+  ];
+
+  return (
+    <>
+      {/* Side Menu*/}
+      <div
+        className={`fixed top-0 left-0 h-full w-full bg-white shadow-xl p-2 transform transition-transform duration-300 ease-in-out z-50 ${isOpen ? 'translate-x-0' : '-translate-x-full'}`}
+        role="dialog"
+        aria-modal="true"
+        aria-label="Main Navigation Menu"
+        id="mobile-menu"
+      >
+        {/* Close Button */}
+        <button
+          onClick={toggleMenu}
+          className="text-stone-900 text-3xl mt-8 mb-2 ml-8 rounded-full p-1"
+          aria-label="Close Menu"
+        >
+          <AiOutlineClose />
+        </button>
+
+        {/* Links with Icons */}
+        <nav>
+          <ul className="flex flex-col space-y-3 ml-10 ">
+            {navLinks.map((link) => (
+              <li key={link.name} className="mb-4">
+                <Link 
+                  to={link.href} 
+                  className="flex items-center text-stone-900 text-lg font-poppins font-semibold transition-colors hover:font-bold focus:outline-none focus:ring-2focus:outline-none  focus-visible:ring-2 focus-visible:ring-persianblue rounded-[5px]"
+                  onClick={toggleMenu} 
+                >
+                  <link.icon
+                    className="mr-2 text-2xl text-black w-5 h-6 "
+                    aria-hidden="true"
+                  />
+                  {link.name}
+                </Link> 
+              </li>
+            ))}
+          </ul>
+        </nav>
+      </div>
+    </>
+  );
+};
+
+export default MobileMenu;