Make navbar sticky with conditional styling enhancements (#442)

* Maked navbar sticky * Some Changes * Update App.jsx * Fixes issues --------- Co-authored-by: Alfiya Siddique <86224794+AlfiyaSiddique@users.noreply.github.com>
AlfiyaSiddique · Nov 10, 2024 · c71813b · c71813b
1 parent 156032d
commit c71813b
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 53 deletions.
diff --git 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 */
+}
diff --git 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";
@@ -28,6 +29,18 @@ import ResendVerificationPage from "./Pages/ResendVerification.jsx";
 import UserProfile from "./Pages/Profile.jsx";
 import UserSearch from "./Pages/SearchPage.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
@@ -46,7 +46,9 @@ const Navbar = () => {
 
   useEffect(() => {
     const handleScroll = () => {
+
       if (window.scrollY > window.innerHeight) {
+
         setIsSticky(true);
       } else {
         setIsSticky(false);
@@ -68,10 +70,17 @@ const Navbar = () => {
   };
 
   return (
+
+
     <nav
-      className={`z-50 relative navbar ${
-        isSticky ? "fixed top-0 left-0 w-full bg-white shadow-md" : ""
-      }`}
+      style={{
+        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",
+        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 +93,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 +108,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 +118,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 +128,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 +138,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 +148,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}
@@ -192,8 +195,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"
                 }`
               }
             >
@@ -202,8 +204,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"
                 }`
               }
             >
@@ -212,8 +213,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"
                 }`
               }
             >
@@ -222,8 +222,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"
                 }`
               }
             >
@@ -232,8 +231,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}

diff --git a/frontend/src/Components/ScrollProgressBar.jsx 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;