Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make navbar sticky with conditional styling enhancements #442

Merged
merged 5 commits into from
Nov 10, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 0 additions & 13 deletions frontend/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

56 changes: 29 additions & 27 deletions frontend/src/App.css
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
#root {
max-width: 1366px;
margin: 0 auto;
overflow-x: hidden;
/* overflow-x: hidden; */
}

#Hero {
Expand All @@ -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 */
}
}

Expand All @@ -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;
}

Expand All @@ -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;
}

Expand All @@ -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\] {
Expand All @@ -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 */
}
13 changes: 13 additions & 0 deletions frontend/src/App.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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);
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove this comment @Aman-G-upta


Expand Down
50 changes: 24 additions & 26 deletions frontend/src/Components/Navbar.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,9 @@ const Navbar = () => {

useEffect(() => {
const handleScroll = () => {

if (window.scrollY > window.innerHeight) {
AlfiyaSiddique marked this conversation as resolved.
Show resolved Hide resolved

setIsSticky(true);
} else {
setIsSticky(false);
Expand All @@ -68,10 +70,17 @@ const Navbar = () => {
};

return (


AlfiyaSiddique marked this conversation as resolved.
Show resolved Hide resolved
<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">
Expand All @@ -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">
Expand All @@ -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}
Expand All @@ -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}
Expand All @@ -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}
Expand All @@ -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}
Expand All @@ -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}
Expand Down Expand Up @@ -181,8 +184,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"
}`
}
>
Expand All @@ -191,8 +193,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"
}`
}
>
Expand All @@ -201,8 +202,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"
}`
}
>
Expand All @@ -211,8 +211,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"
}`
}
>
Expand All @@ -221,8 +220,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}
Expand Down
40 changes: 40 additions & 0 deletions frontend/src/Components/ScrollProgressBar.jsx
Original file line number Diff line number Diff line change
@@ -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;