diff --git a/frontend/src/Components/DashBoard/PomodoroTimer.jsx b/frontend/src/Components/DashBoard/PomodoroTimer.jsx index ef889d9..a5961af 100644 --- a/frontend/src/Components/DashBoard/PomodoroTimer.jsx +++ b/frontend/src/Components/DashBoard/PomodoroTimer.jsx @@ -1,7 +1,7 @@ import { useContext } from "react"; -import Navbar from "../Navbar/Navbar"; import ThemeContext from "../ui/theme-provider.jsx"; import { useTimer } from "../../context/TimerContext.jsx"; +import Topbar from './Topbar'; // Circular Timer Component function CircularTimer({ value, max, label, size = 140, isDarkMode }) { @@ -88,7 +88,7 @@ export default function PomodoroTimer() { return (
- +

{sessionLabels[sessionType]} diff --git a/frontend/src/Components/Navbar/Navbar.jsx b/frontend/src/Components/Navbar/Navbar.jsx index 7460ab6..c2be143 100644 --- a/frontend/src/Components/Navbar/Navbar.jsx +++ b/frontend/src/Components/Navbar/Navbar.jsx @@ -9,6 +9,7 @@ import { Phone, HelpCircle, X, + LayoutDashboard, // Make sure this is imported } from "lucide-react"; import { Link, useNavigate } from "react-router-dom"; import { FloatingNav } from "../ui/floating-navbar"; @@ -19,73 +20,85 @@ const publicNavItems = [ { name: "Home", link: "/", icon: }, { name: "Features", link: "#features", icon: }, { name: "About us", link: "#about", icon: }, - { name: "Github", link: "https://github.com/DevSyncx/DevSync.git", icon: }, + { + name: "Github", + link: "https://github.com/DevSyncx/DevSync.git", + icon: , + }, { name: "Contact Us", link: "#contact", icon: }, { name: "FAQ", link: "#faq", icon: }, ]; +const authenticatedNavItems = [ + { name: "Dashboard", link: "/dashboard", icon: }, + { name: "Profile", link: "/profile", icon: }, + { name: "Timer", link: "/pomodoro", icon: }, +]; + + // --- Mobile Navigation Overlay Component (defined in the same file) --- const MobileNavOverlay = ({ isOpen, onClose, navItems, isAuthenticated, handleLogout }) => { - const overlayClasses = `mobile-nav-overlay ${isOpen ? "open" : ""}`; + const overlayClasses = `mobile-nav-overlay ${isOpen ? "open" : ""}`; - const handleLinkClick = () => { - onClose(); - }; - - const handleLogoutClick = () => { - handleLogout(); - onClose(); - } - - return ( -
- - + const handleLinkClick = () => { + onClose(); + }; + + const handleLogoutClick = () => { + handleLogout(); + onClose(); + } -
+ return ( +
+ +
+ + + +
+ {!isAuthenticated ? ( + <> + + + + + + ) : ( + <> + + + + )}
- ); +
+ ); }; @@ -162,57 +175,70 @@ const Navbar = () => {
@@ -244,17 +270,21 @@ const Navbar = () => { setMenuOpen(false)} - navItems={publicNavItems} + navItems={publicNavItems} // This is correct, MobileNavOverlay handles auth logic internally isAuthenticated={isAuthenticated} handleLogout={handleLogout} /> + {/* This part was already correct from our last change */} {showFloating && ( - + )}
); }; -export default Navbar; - +export default Navbar; \ No newline at end of file diff --git a/frontend/src/Components/profile/Profile.jsx b/frontend/src/Components/profile/Profile.jsx index a485f2c..f8143af 100644 --- a/frontend/src/Components/profile/Profile.jsx +++ b/frontend/src/Components/profile/Profile.jsx @@ -164,8 +164,8 @@ const SuccessPopup = ({ isVisible, onClose, userName }) => {

Success!

- **{userName || "Your profile"}** has been **updated - successfully**. + {userName || "Your profile"} has been{" "} + updated successfully.

Your changes are now live and visible to the community. @@ -590,7 +590,7 @@ const Profile = () => { return ( // Outer Container: Full Viewport Height

-
+
{/* Success Popup */} @@ -1162,4 +1162,4 @@ const Profile = () => { ); }; -export default Profile; \ No newline at end of file +export default Profile; diff --git a/frontend/src/Components/ui/floating-navbar.tsx b/frontend/src/Components/ui/floating-navbar.tsx index 6be4f25..b25b4dc 100644 --- a/frontend/src/Components/ui/floating-navbar.tsx +++ b/frontend/src/Components/ui/floating-navbar.tsx @@ -1,6 +1,7 @@ "use client"; import React, { JSX, useState } from "react"; -import { useNavigate } from "react-router-dom"; +// Import Link to handle internal routing +import { useNavigate, Link } from "react-router-dom"; import { motion, AnimatePresence, @@ -12,6 +13,8 @@ import { cn } from "@/lib/utils"; export const FloatingNav = ({ navItems, className, + isAuthenticated, // <-- ADDED PROP + handleLogout, // <-- ADDED PROP }: { navItems: { name: string; @@ -19,9 +22,10 @@ export const FloatingNav = ({ icon?: JSX.Element; }[]; className?: string; + isAuthenticated?: boolean; // <-- ADDED PROP TYPE + handleLogout?: () => void; // <-- ADDED PROP TYPE }) => { const { scrollYProgress } = useScroll(); - const [visible, setVisible] = useState(false); const navigate = useNavigate(); @@ -57,30 +61,67 @@ export const FloatingNav = ({ duration: 0.2, }} className={cn( - "flex max-w-fit fixed top-10 inset-x-0 mx-auto border border-transparent dark:border-white/[0.2] rounded-full dark:bg-black bg-white shadow-[0px_2px_3px_-1px_RGBA(0,0,0,0.1),0px_1px_0px_0px_RGBA(25,28,33,0.02),0px_0px_0px_1px_RGBA(25,28,33,0.08)] z-[5000] pr-2 pl-8 py-2 items-center justify-center space-x-4", + "flex max-w-fit fixed top-10 inset-x-0 mx-auto border border-transparent dark:border-white/[0.2] rounded-full dark:bg-black bg-white shadow-[0px_2px_3px_-1px_RGBA(0,0,0,0.1),0px_1px_0px_0px_RGBA(25,28,33,0.02),0px_0px_0px_1px_RGBA(25,28,33,0.08)] z-[5000] pr-2 pl-8 py-2 items-center justify-center space-x-4", className )} > - {navItems.map((navItem: any, idx: number) => ( - { + // Check if link is external or an anchor + const isExternal = + navItem.link.startsWith("http") || navItem.link.startsWith("#"); + + const content = ( + <> + {navItem.icon} + {navItem.name} + + + ); + + const itemClassName = "relative text-[15px] md:text-[16px] lg:text-[17px] font-medium transition-all duration-300 group flex items-center gap-2 hover:pb-1"; + + // Use for external/anchor links, for internal links + return isExternal ? ( + + {content} + + ) : ( + + {content} + + ); + })} + + {/* --- MODIFIED SECTION: Conditional Login/Logout Button --- */} + {isAuthenticated ? ( + + Logout + + + ) : ( + + )} + {/* --- END OF MODIFIED SECTION --- */} ); -}; +}; \ No newline at end of file