Merge pull request #335 from nishant0708/Navbar

Feat:Want to Fix Nav Bar #331

Author: hustlerZzZ

src/components/Navbar.jsx

@@ -38,70 +38,43 @@ 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>
-                <NavItem to="/about" className="nav-item"  icon={<IconAbout />}>About</NavItem>
-                <NavItem to="/news" className="nav-item" icon={<IconNews />}>News</NavItem>
-                <NavItem to="/rateus" className="nav-item" icon={<IconRateUs />}>RateUs</NavItem>
+            <div className="hidden md:flex items-center gap-5">
+              <button onClick={toggleTheme} className="p-2 rounded focus:outline-none text-4xl border-none outline-none">
+                {theme === 'dark' ? '🌞' : '🌙'}
+              </button>
+              <div>
+                <Link to="/">
+                  <button className={`py-1 px-2 rounded w-full h-auto text-l relative z-0 rounded-lg transition-all duration-200 hover:scale-110 ${theme === 'dark' ? 'bg-white text-black' : 'bg-green-400 hover:bg-green-600 hover:shadow-green text-white'}`}>
+                    Log out
+                  </button>
+                </Link>
               </div>
-            
-          </div>
-          <div className="hidden md:flex items-center gap-5">
-            <button onClick={toggleTheme} className="p-2 rounded focus:outline-none text-4xl border-none outline-none ">
-              {theme === 'dark' ? '🌞' : '🌙'}
-            </button>
-            <div>
-              <Link to="/">
-                <button
-
-                  className={`py-1 px-2 rounded w-full h-auto text-l relative z-0 rounded-lg transition-all duration-200 hover:scale-110 ${theme === 'dark' ? 'bg-white text-black' : 'bg-green-400 hover:bg-green-600 hover:shadow-green text-white'}`}
+            </div>
 
-                >
-                  Log out
-                </button>
-              </Link>
+            <div className="-mr-2 flex md:hidden">
+              <button onClick={toggleTheme} className="p-2 rounded focus:outline-none text-2xl border-none outline-none">
+                {theme === 'dark' ? '🌞' : '🌙'}
+              </button>
+              <button
+                onClick={toggleMenu}
+                className="inline-flex items-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:bg-gray-700 focus:text-white"
+                aria-expanded="false"
+              >
+                {isOpen ? (
+                  <IoClose className="text-white" />
+                ) : (
+                  <GiHamburgerMenu className="text-white" />
+                )}
+              </button>
             </div>
           </div>
-          <div className="-mr-2 flex md:hidden">
-          <button onClick={toggleTheme} className="p-2 rounded focus:outline-none text-2xl border-none outline-none ">
-              {theme === 'dark' ? '🌞' : '🌙'}
-            </button>
-            <button
-              onClick={toggleMenu}
-              className="inline-flex items-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:bg-gray-700 focus:text-white"
-              aria-expanded="false"
-            >
-              {isOpen ? (
-                <IoClose className="text-white" />
-              ) : (
-                <GiHamburgerMenu className="text-white" />
-              )}
-            </button>
-          </div>
         </div>
-      </div>
-      <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>
-
 
         <AnimatePresence>
           {isOpen && (
@@ -116,15 +89,12 @@ const Navbar = () => {
                 <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 */}
+                <MobileNavItem to="/rateus">RateUs</MobileNavItem>
                 {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'}`}
-                  >
+                  <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>
@@ -134,58 +104,31 @@ const Navbar = () => {
         </AnimatePresence>
       </nav>
     </>
-              <MobileNavItem to="/rateus">Rateus</MobileNavItem>
-
-              <MobileNavItem to="/">
-              <Link 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>
-                </Link>
-              </MobileNavItem>
-            </div>
-          </motion.div>
-        )}
-      </AnimatePresence>
-      </div>
-    </nav>  
-  </>
   );
 };
 
 const NavItem = ({ icon, to, children }) => {
   return (
-    <Link
-      to={to}
-      className="flex items-center space-x-2 w-full h-auto relative z-0 rounded-lg transition-all duration-200 hover:scale-125 text-xl block hover:bg-opacity-50"
-    >
+    <Link to={to} className="flex items-center space-x-2 w-full h-auto relative z-0 rounded-lg transition-all duration-200 hover:scale-125 text-xl block hover:bg-opacity-50">
       {icon && <span>{icon}</span>}
       <span>{children}</span>
     </Link>
   );
 };
 
 const MobileNavItem = ({ to, children }) => {
-  const classname = "z-[2] text-gray-300 text-center hover:text-white block px-3 py-2 rounded-md text-xl font-medium ";
+  const classname = "z-[2] text-gray-300 text-center hover:text-white block px-3 py-2 rounded-md text-xl font-medium";
   return (
-    <Link
-      to={to}
-      className={classname + "hover:bg-gray-700"}
-    >
+    <Link to={to} className={classname + " hover:bg-gray-700"}>
       {children}
     </Link>
   );
 };
 
-// Define your icon components here
 const IconHome = () => <span>🏠</span>;
 const IconAbout = () => <span>ℹ️</span>;
 const IconNews = () => <span>📰</span>;
 const IconRateUs = () => <span>⭐</span>;
-const IconCanteen = () => <span>🥗</span>
+const IconCanteen = () => <span>🥗</span>;
 
 export default Navbar;

src/pages/Signup.jsx

@@ -78,11 +78,6 @@ function Signup() {
           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.";