From 7c486f1fd5dcd9f206b5b04e73ac2968d17aa476 Mon Sep 17 00:00:00 2001
From: Aman Gupta <amangupta0874@gmail.com>
Date: Sat, 9 Nov 2024 20:12:28 +0530
Subject: [PATCH 1/4] Maked navbar sticky

---
 frontend/package-lock.json         | 13 -------
 frontend/src/App.css               | 56 ++++++++++++++++--------------
 frontend/src/Components/Navbar.jsx | 54 ++++++++++++++--------------
 3 files changed, 56 insertions(+), 67 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 061c25b2..4c37f5ff 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -3572,11 +3572,8 @@
     "node_modules/css-mediaquery": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz",
-
-      
       "integrity": "sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q==",
       "license": "BSD"
-
     },
     "node_modules/cssesc": {
       "version": "3.0.0",
@@ -4807,10 +4804,8 @@
     "node_modules/hyphenate-style-name": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.1.0.tgz",
-
       "integrity": "sha512-WDC/ui2VVRrz3jOVi+XtjqkDjiVjTtFaAGiW37k6b+ohyQ5wYDOGkvCZa8+H0nx3gyvv0+BST9xuOgIyGQ00gw==",
       "license": "BSD-3-Clause"
-
     },
     "node_modules/idb": {
       "version": "7.1.1",
@@ -5640,9 +5635,7 @@
       "version": "0.453.0",
       "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.453.0.tgz",
       "integrity": "sha512-kL+RGZCcJi9BvJtzg2kshO192Ddy9hv3ij+cPrVPWSRzgCWCVazoQJxOjAwgK53NomL07HB7GPHW120FimjNhQ==",
-
       "license": "ISC",
-
       "peerDependencies": {
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc"
       }
@@ -5660,9 +5653,7 @@
       "version": "0.4.2",
       "resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.4.2.tgz",
       "integrity": "sha512-wrZpoT50ehYOudhDjt/YvUJc6eUzcdFPdmbizfgvswCKNHD1/OBOHYJpHie+HXpu6bSkEGieFMYk6VuutaiRfA==",
-
       "license": "MIT",
-
       "dependencies": {
         "css-mediaquery": "^0.1.2"
       }
@@ -6368,9 +6359,7 @@
       "version": "10.0.0",
       "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-10.0.0.tgz",
       "integrity": "sha512-N6/UiRLGQyGUqrarhBZmrSmHi2FXSD++N5VbSKsBBvWfG0ZV7asvUBluSv5lSzdMyEVjzZ6Y8DL4OHABiztDOg==",
-
       "license": "MIT",
-
       "dependencies": {
         "hyphenate-style-name": "^1.0.0",
         "matchmediaquery": "^0.4.2",
@@ -6797,10 +6786,8 @@
     "node_modules/shallow-equal": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-3.1.0.tgz",
-
       "integrity": "sha512-pfVOw8QZIXpMbhBWvzBISicvToTiM5WBF1EeAUZDDSb5Dt29yl4AYbyywbJFSEsRUMr7gJaxqCdr4L3tQf9wVg==",
       "license": "MIT"
-
     },
     "node_modules/shebang-command": {
       "version": "2.0.0",
diff --git a/frontend/src/App.css b/frontend/src/App.css
index 8419445a..83991d1f 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -5,7 +5,7 @@
 #root {
   max-width: 1366px;
   margin: 0 auto;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
 }
 
 #Hero {
@@ -15,22 +15,26 @@
   background-size: cover;
 }
 
-.error{
+.error {
   margin-top: 0 !important;
 }
 
 /* Animations */
 .animated-text {
-  animation: scaleText .7s ease-in-out 1 alternate; /* Animation properties */
+  animation: scaleText .7s ease-in-out 1 alternate;
+  /* Animation properties */
   transition: all smooth;
 }
 
 @keyframes scaleText {
   from {
-    font-size: 8rem; /* Initial font size */
+    font-size: 8rem;
+    /* Initial font size */
   }
+
   to {
-    font-size: 4rem; /* Final font size */
+    font-size: 4rem;
+    /* Final font size */
   }
 }
 
@@ -42,17 +46,17 @@
 
 /* Track */
 ::-webkit-scrollbar-track {
-  background: #fafafc; 
+  background: #fafafc;
 }
 
 /* Handle */
 ::-webkit-scrollbar-thumb {
-  background:  #B91C1C !important;
+  background: #B91C1C !important;
   border-radius: 12px !important;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background:  #B91C1C!important;
+  background: #B91C1C !important;
   border-radius: 12px !important;
 }
 
@@ -62,17 +66,17 @@
 
 /* Track */
 ::-webkit-scrollbar-track {
-  background: #fafafc; 
+  background: #fafafc;
 }
 
 /* Handle */
 ::-webkit-scrollbar-thumb {
-  background:  #B91C1C !important;
+  background: #B91C1C !important;
   border-radius: 12px !important;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background:  #B91C1C!important;
+  background: #B91C1C !important;
   border-radius: 12px !important;
 }
 
@@ -86,9 +90,10 @@
   }
 }
 
-.navbar{
-  background-color: #fed4d4;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
+.navbar {
+background-color: #fed4d4;
+box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+
 }
 
 .text-\[4rem\] {
@@ -105,16 +110,13 @@
 
 /* ADD THE CLASS OF CLAMPED-TEXT  */
 .clamped-text {
-  display: -webkit-box; 
-  -webkit-box-orient: vertical; /* Define the orientation as vertical */
-  -webkit-line-clamp: 4; /* Limit the number of lines to 4 */
-  overflow: hidden; /* Hide any overflowed content */
-  text-overflow: ellipsis; /* Add ellipsis (...) for overflow */
-}
-
-
-
-
-
-
-
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  /* Define the orientation as vertical */
+  -webkit-line-clamp: 4;
+  /* Limit the number of lines to 4 */
+  overflow: hidden;
+  /* Hide any overflowed content */
+  text-overflow: ellipsis;
+  /* Add ellipsis (...) for overflow */
+}
\ No newline at end of file
diff --git a/frontend/src/Components/Navbar.jsx b/frontend/src/Components/Navbar.jsx
index 3ae21844..5a6f5b30 100644
--- a/frontend/src/Components/Navbar.jsx
+++ b/frontend/src/Components/Navbar.jsx
@@ -46,7 +46,9 @@ const Navbar = () => {
 
   useEffect(() => {
     const handleScroll = () => {
-      if (window.scrollY > window.innerHeight) {
+      console.log(window.scrollY);
+      if (window.scrollY > 0) {
+
         setIsSticky(true);
       } else {
         setIsSticky(false);
@@ -68,10 +70,19 @@ const Navbar = () => {
   };
 
   return (
+    // <nav
+    //   className={`z-50 relative navbar ${isSticky ? "fixed top-0 left-0 w-full bg-white shadow-md" : ""
+    //     }`}
+    // >
     <nav
-      className={`z-50 relative navbar ${
-        isSticky ? "fixed top-0 left-0 w-full bg-white shadow-md" : ""
-      }`}
+      style={{
+        position: "sticky",
+        top: 0,
+        zIndex: 1000,
+        backgroundColor: isSticky ? "#fed4d4" : "#fed4d4",
+        boxShadow: isSticky ? "0 4px 6px rgba(0, 0, 0, 0.3)" : "none",
+        transition: "background-color 0.3s, box-shadow 0.3s",
+      }}
     >
       <header className="text-gray-600 body-font">
         <div className="container mx-auto flex items-center justify-between p-5">
@@ -84,9 +95,8 @@ const Navbar = () => {
 
           {/* Slide-in Menu and Overlay */}
           <div
-            className={`fixed inset-0 z-40 transition-all duration-300 transform ${
-              menuOpen ? "translate-x-0" : "-translate-x-full"
-            } flex flex-col top-0 left-0 bg-white w-[250px] h-full p-5`}
+            className={`fixed inset-0 z-40 transition-all duration-300 transform ${menuOpen ? "translate-x-0" : "-translate-x-full"
+              } flex flex-col top-0 left-0 bg-white w-[250px] h-full p-5`}
           >
             {/* Close button inside the menu */}
             <div className="flex justify-end">
@@ -100,8 +110,7 @@ const Navbar = () => {
               <NavLink
                 to="/recipes"
                 className={({ isActive }) =>
-                  `hover:text-red-700 font-semibold ${
-                    isActive ? "text-red-700" : "text-black"
+                  `hover:text-red-700 font-semibold ${isActive ? "text-red-700" : "text-black"
                   }`
                 }
                 onClick={handleLinkClick}
@@ -111,8 +120,7 @@ const Navbar = () => {
               <NavLink
                 to="/mainmeals"
                 className={({ isActive }) =>
-                  `hover:text-red-700 font-semibold ${
-                    isActive ? "text-red-700" : "text-black"
+                  `hover:text-red-700 font-semibold ${isActive ? "text-red-700" : "text-black"
                   }`
                 }
                 onClick={handleLinkClick}
@@ -122,8 +130,7 @@ const Navbar = () => {
               <NavLink
                 to="/smallbites"
                 className={({ isActive }) =>
-                  `hover:text-red-700 font-semibold ${
-                    isActive ? "text-red-700" : "text-black"
+                  `hover:text-red-700 font-semibold ${isActive ? "text-red-700" : "text-black"
                   }`
                 }
                 onClick={handleLinkClick}
@@ -133,8 +140,7 @@ const Navbar = () => {
               <NavLink
                 to="/healthy"
                 className={({ isActive }) =>
-                  `hover:text-red-700 font-semibold ${
-                    isActive ? "text-red-700" : "text-black"
+                  `hover:text-red-700 font-semibold ${isActive ? "text-red-700" : "text-black"
                   }`
                 }
                 onClick={handleLinkClick}
@@ -144,8 +150,7 @@ const Navbar = () => {
               <NavLink
                 to="/recipe-suggestions"
                 className={({ isActive }) =>
-                  `mr-5 hover:text-red-700 font-semibold ${
-                    isActive ? "text-red-700" : "text-black"
+                  `mr-5 hover:text-red-700 font-semibold ${isActive ? "text-red-700" : "text-black"
                   }`
                 }
                 onClick={handleLinkClick}
@@ -181,8 +186,7 @@ const Navbar = () => {
             <NavLink
               to="/recipes"
               className={({ isActive }) =>
-                `mr-5 hover:text-red-700 font-semibold ${
-                  isActive ? "text-red-700" : "text-black"
+                `mr-5 hover:text-red-700 font-semibold ${isActive ? "text-red-700" : "text-black"
                 }`
               }
             >
@@ -191,8 +195,7 @@ const Navbar = () => {
             <NavLink
               to="/mainmeals"
               className={({ isActive }) =>
-                `mr-5 hover:text-red-700 font-semibold ${
-                  isActive ? "text-red-700" : "text-black"
+                `mr-5 hover:text-red-700 font-semibold ${isActive ? "text-red-700" : "text-black"
                 }`
               }
             >
@@ -201,8 +204,7 @@ const Navbar = () => {
             <NavLink
               to="/smallbites"
               className={({ isActive }) =>
-                `mr-5 hover:text-red-700 font-semibold ${
-                  isActive ? "text-red-700" : "text-black"
+                `mr-5 hover:text-red-700 font-semibold ${isActive ? "text-red-700" : "text-black"
                 }`
               }
             >
@@ -211,8 +213,7 @@ const Navbar = () => {
             <NavLink
               to="/healthy"
               className={({ isActive }) =>
-                `mr-5 hover:text-red-700 font-semibold ${
-                  isActive ? "text-red-700" : "text-black"
+                `mr-5 hover:text-red-700 font-semibold ${isActive ? "text-red-700" : "text-black"
                 }`
               }
             >
@@ -221,8 +222,7 @@ const Navbar = () => {
             <NavLink
               to="/recipe-suggestions"
               className={({ isActive }) =>
-                `mr-5 hover:text-red-700 font-semibold ${
-                  isActive ? "text-red-700" : "text-black"
+                `mr-5 hover:text-red-700 font-semibold ${isActive ? "text-red-700" : "text-black"
                 }`
               }
               onClick={handleLinkClick}

From 92f1911a6ce539f26476e058798947cf47728b4f Mon Sep 17 00:00:00 2001
From: Aman Gupta <amangupta0874@gmail.com>
Date: Sun, 10 Nov 2024 09:10:49 +0530
Subject: [PATCH 2/4] Some Changes

---
 frontend/src/App.jsx                          | 13 ++++++
 frontend/src/Components/Navbar.jsx            |  8 ++--
 frontend/src/Components/ScrollProgressBar.jsx | 40 +++++++++++++++++++
 3 files changed, 58 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/Components/ScrollProgressBar.jsx

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index c9b3992c..25df0d8b 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -7,6 +7,7 @@ import Navbar from "./Components/Navbar.jsx";
 import ScrollToTop from "./Components/Scrolltotop.jsx";
 import Landing from "./Pages/Landing.jsx";
 import Footer from "./Components/Footer.jsx";
+import ScrollProgressBar from "./components/ScrollProgressBar.jsx";
 import Login from "./Pages/Login.jsx";
 import Signup from "./Pages/Signup.jsx";
 import Recipes from "./Pages/Recipes.jsx";
@@ -24,6 +25,18 @@ import ForgotPassword from "./Pages/ForgotPassword.jsx";
 import RecipeSuggestions from "./Pages/RecipeSuggestions.jsx";
 import UserProfile from "./Pages/Profile.jsx";
 
+
+// function App() {
+//   return (
+//     <div>
+//       {/* Render ScrollProgressBar at the top */}
+//       <ScrollProgressBar />
+//       <Navbar />
+//       {/* Other components, routes, or layouts */}
+//     </div>
+//   );
+// };
+
 function App() {
   const [showScroll, setShowScroll] = useState(false);
 
diff --git a/frontend/src/Components/Navbar.jsx b/frontend/src/Components/Navbar.jsx
index 5a6f5b30..db6dc0f8 100644
--- a/frontend/src/Components/Navbar.jsx
+++ b/frontend/src/Components/Navbar.jsx
@@ -47,7 +47,7 @@ const Navbar = () => {
   useEffect(() => {
     const handleScroll = () => {
       console.log(window.scrollY);
-      if (window.scrollY > 0) {
+      if (window.scrollY > window.innerHeight) {
 
         setIsSticky(true);
       } else {
@@ -74,10 +74,12 @@ const Navbar = () => {
     //   className={`z-50 relative navbar ${isSticky ? "fixed top-0 left-0 w-full bg-white shadow-md" : ""
     //     }`}
     // >
+    
+
     <nav
       style={{
-        position: "sticky",
-        top: 0,
+        position: isSticky ? "sticky" : "relative",
+        top: isSticky ? 0 : "auto",
         zIndex: 1000,
         backgroundColor: isSticky ? "#fed4d4" : "#fed4d4",
         boxShadow: isSticky ? "0 4px 6px rgba(0, 0, 0, 0.3)" : "none",
diff --git a/frontend/src/Components/ScrollProgressBar.jsx b/frontend/src/Components/ScrollProgressBar.jsx
new file mode 100644
index 00000000..cedfe105
--- /dev/null
+++ b/frontend/src/Components/ScrollProgressBar.jsx
@@ -0,0 +1,40 @@
+import React, { useEffect, useState } from "react";
+
+const ScrollProgressBar = () => {
+  const [scrollPercentage, setScrollPercentage] = useState(0);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const scrollTop = window.scrollY; // How much user has scrolled
+      const windowHeight = window.innerHeight; // Height of the viewport
+      const docHeight = document.documentElement.scrollHeight; // Height of the document
+
+      const totalDocScrollLength = docHeight - windowHeight;
+      const scrollPosition = (scrollTop / totalDocScrollLength) * 100;
+
+      setScrollPercentage(scrollPosition);
+    };
+
+    window.addEventListener("scroll", handleScroll);
+
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  return (
+    <div
+      style={{
+        position: "fixed",
+        top: 0,
+        left: 0,
+        width: `${scrollPercentage}%`,
+        height: "5px",
+        color:red,
+        backgroundColor: "#ff4500",
+        zIndex: 1000,
+        transition: "width 0.25s ease-out",
+      }}
+    />
+  );
+};
+
+export default ScrollProgressBar;

From 1d7c20f15f4ac284038454f6b6b0092aa480fd83 Mon Sep 17 00:00:00 2001
From: Alfiya Siddique <86224794+AlfiyaSiddique@users.noreply.github.com>
Date: Sun, 10 Nov 2024 16:21:59 +0530
Subject: [PATCH 3/4] Update App.jsx

---
 frontend/src/App.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 25df0d8b..843c3d3b 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -7,7 +7,7 @@ import Navbar from "./Components/Navbar.jsx";
 import ScrollToTop from "./Components/Scrolltotop.jsx";
 import Landing from "./Pages/Landing.jsx";
 import Footer from "./Components/Footer.jsx";
-import ScrollProgressBar from "./components/ScrollProgressBar.jsx";
+import ScrollProgressBar from "./Components/ScrollProgressBar.jsx";
 import Login from "./Pages/Login.jsx";
 import Signup from "./Pages/Signup.jsx";
 import Recipes from "./Pages/Recipes.jsx";

From e1422b49cdbe450fa7de5db7956ede1cadee5caa Mon Sep 17 00:00:00 2001
From: Aman Gupta <amangupta0874@gmail.com>
Date: Sun, 10 Nov 2024 17:59:01 +0530
Subject: [PATCH 4/4] Fixes issues

---
 frontend/src/Components/Navbar.jsx | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/frontend/src/Components/Navbar.jsx b/frontend/src/Components/Navbar.jsx
index db6dc0f8..98687c0b 100644
--- a/frontend/src/Components/Navbar.jsx
+++ b/frontend/src/Components/Navbar.jsx
@@ -46,7 +46,7 @@ const Navbar = () => {
 
   useEffect(() => {
     const handleScroll = () => {
-      console.log(window.scrollY);
+      
       if (window.scrollY > window.innerHeight) {
 
         setIsSticky(true);
@@ -70,11 +70,7 @@ const Navbar = () => {
   };
 
   return (
-    // <nav
-    //   className={`z-50 relative navbar ${isSticky ? "fixed top-0 left-0 w-full bg-white shadow-md" : ""
-    //     }`}
-    // >
-    
+   
 
     <nav
       style={{