Merge pull request VanshKing30#333 from Praveenkumar5048/main

Solved the issue VanshKing30#316 Added My canteen button in navbar
nishant0708 · Jun 18, 2024 · 1d1aad7 · 1d1aad7
2 parents 7a1e2bb + 4a3bda9
commit 1d1aad7
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 0 deletions.
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -7,6 +7,7 @@ import { GiHamburgerMenu } from "react-icons/gi";
 import { ThemeContext } from '../themeContext';
 
 const Navbar = () => {
+  const canteenId = localStorage.getItem("canteenId");
   const { theme, toggleTheme } = useContext(ThemeContext);
   const [isOpen, setIsOpen] = useState(false);
   const { scrollYProgress } = useScroll();
@@ -37,6 +38,13 @@ const Navbar = () => {
                 <NavItem to="/about" icon={<IconAbout />}>About</NavItem>
                 <NavItem to="/news" icon={<IconNews />}>News</NavItem>
                 <NavItem to="/rateus" icon={<IconRateUs />}>RateUs</NavItem>
+                {/* Conditionally render "My Canteen" button */}
+                {canteenId && (
+                  <NavItem to={`/section/${canteenId}`} icon={<IconCanteen />}>My&nbsp;Canteen</NavItem>
+                )}
+              </div>
+            </div>
+
 
               <div className="ml-16 flex gap-6 items-baseline space-x-4   ">
                 <NavItem to="/home" className="nav-item" icon={<IconHome />}>Home</NavItem>
@@ -94,6 +102,38 @@ const Navbar = () => {
               <MobileNavItem to="/news">News</MobileNavItem>
               <MobileNavItem to="/contact">Contact</MobileNavItem>
 
+
+        <AnimatePresence>
+          {isOpen && (
+            <motion.div
+              initial={{ opacity: 0, y: -50 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -50 }}
+              className="md:hidden absolute left-0 w-full flex flex-col items-center justify-center"
+            >
+              <div className="w-[100%] bg-[#152146] px-[20%] pt-2 pb-3 space-y-1 mt-1 dark:bg-teal-900">
+                <MobileNavItem to="/home">Home</MobileNavItem>
+                <MobileNavItem to="/about">About us</MobileNavItem>
+                <MobileNavItem to="/news">News</MobileNavItem>
+                <MobileNavItem to="/contact">Contact</MobileNavItem>
+                <MobileNavItem to="/rateus">RateUs</MobileNavItem>            
+                {/* Conditionally render "My Canteen" button */}
+                {canteenId && (
+                  <MobileNavItem to={`/section/${canteenId}`}>My Canteen</MobileNavItem>
+                )}
+                <MobileNavItem to="/">
+                  <button
+                    className={`rounded transition duration-300 ease-in-out transform hover:scale-105 ${theme === 'dark' ? 'bg-white text-black' : 'bg-green-500 hover:bg-green-700 text-white py-1 px-2'}`}
+                  >
+                    Log out
+                  </button>
+                </MobileNavItem>
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </nav>
+    </>
               <MobileNavItem to="/rateus">Rateus</MobileNavItem>
 
               <MobileNavItem to="/">
@@ -146,5 +186,6 @@ const IconHome = () => <span>🏠</span>;
 const IconAbout = () => <span>ℹ️</span>;
 const IconNews = () => <span>📰</span>;
 const IconRateUs = () => <span>⭐</span>;
+const IconCanteen = () => <span>🥗</span>
 
 export default Navbar;
diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx
@@ -67,9 +67,12 @@ function Login() {
       if (formData.accountType === "User") {
         navigate("/home");
       } else {
+        navigate("/home");
+
         localStorage.setItem("canteenId",response.data.cantId);
         localStorage.setItem("token",response.data.token);
         navigate(`/section/${response.data.cantId}`);
+
       }
     } catch (error) {
       toast.error("Failed to login");

diff --git a/src/pages/Signup.jsx b/src/pages/Signup.jsx
@@ -77,7 +77,12 @@ function Signup() {
           const token = response.data.token;
           localStorage.setItem("token", token);
           localStorage.setItem("canteenId", response.data.cantId);
+          navigate("/home");
+        } else {
+          navigate("/");
+
           navigate(`/section/${response.data.cantId}`);
+
         }
       } catch (error) {
         const errorMessage = error.response?.data?.message || "Failed to create account. Please try again.";