From 7879cb7f3807e0f4d72be68714c040b3e852ca76 Mon Sep 17 00:00:00 2001 From: jency Date: Fri, 25 Apr 2025 01:17:15 +0530 Subject: [PATCH] Redesigned Navbar and Theme Toggler to Match Accord Project's Professional UI --- src/components/Navbar.tsx | 394 ++++++++++++++++-------------- src/components/ToggleDarkMode.tsx | 45 +++- 2 files changed, 250 insertions(+), 189 deletions(-) diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 35fe9fef..be93a320 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -9,7 +9,7 @@ import { InfoOutlined, BookOutlined, CaretDownFilled, - MenuOutlined + MenuOutlined, } from "@ant-design/icons"; import ToggleDarkMode from "./ToggleDarkMode"; @@ -20,9 +20,7 @@ interface NavbarProps { } function Navbar({ scrollToFooter }: NavbarProps) { - const [hovered, setHovered] = useState< - null | "home" | "explore" | "help" | "github" | "join" - >(null); + const [hovered, setHovered] = useState(null); const screens = useBreakpoint(); const location = useLocation(); @@ -39,110 +37,99 @@ function Navbar({ scrollToFooter }: NavbarProps) { const mobileMenu = ( - - Template Playground - + Template Playground + Explore + - About + - Community + Issues + - + Github + + + + + Documentation - - ); - const helpMenu = ( - - - - - About - - - - - Community - - - - - Issues - - - - - - - Documentation - - - ); const menuItemStyle = (key: string, isLast: boolean) => ({ display: "flex", alignItems: "center", - padding: screens.md ? "0 20px" : "0", - backgroundColor: - hovered === key ? "rgba(255, 255, 255, 0.1)" : "transparent", height: "65px", - borderRight: - screens.md && !isLast ? "1.5px solid rgba(255, 255, 255, 0.1)" : "none", + padding: screens.md ? "0 5px" : "0", + backgroundColor: "transparent", + transition: "background-color 0.3s ease", }); const isLearnPage = location.pathname.startsWith("/learn"); + const menuItemButtonStyle = (key: string): React.CSSProperties => ({ + background: 'transparent', + border: "none", + color: hovered === key ? "#19c6c7" : '#fff', + height: "65px", + alignItems: "center", + fontSize: "1rem", + fontWeight: "600", + fontStyle: "normal", + position: "relative", + display: "block", + lineHeight: "1", + textDecoration: "none", + transition: 'all 0.3s ease', + }); + + const iconStyle = { + color: "#19c6c7", + fontSize: "17px" + }; + + return (
setHovered("home")} onMouseLeave={() => setHovered(null)} > - Template Playground - Template Playground - + + Template Playground +
+ {screens.md ? ( <>
setHovered("explore")} + onMouseEnter={() => setHovered("about")} onMouseLeave={() => setHovered(null)} > - Explore + + +
-
setHovered("help")} + +
setHovered("community")} + onMouseLeave={() => setHovered(null)} + > + + + +
+ +
setHovered("issues")} + onMouseLeave={() => setHovered(null)} + > + + + +
+ +
setHovered("documentation")} + onMouseLeave={() => setHovered(null)} + > + + + +
+ +
setHovered("github")} onMouseLeave={() => setHovered(null)} > - - - +
) : ( -
+
-
)} -
-
- -
+ {!isLearnPage && (
setHovered("join")} onMouseLeave={() => setHovered(null)} > - - - Learn - + + Learn
)} -
setHovered("github")} - onMouseLeave={() => setHovered(null)} > - - - Github - +
+
); diff --git a/src/components/ToggleDarkMode.tsx b/src/components/ToggleDarkMode.tsx index d3bd390b..7fa77497 100644 --- a/src/components/ToggleDarkMode.tsx +++ b/src/components/ToggleDarkMode.tsx @@ -1,7 +1,6 @@ import React, { useEffect, useState } from "react"; -import { ToggleDarkModeContainer } from "../styles/components/ToggleDarkMode"; -import DarkModeToggle from "react-dark-mode-toggle"; import useAppStore from "../store/store"; +import { FaMoon, FaSun } from "react-icons/fa"; const ToggleDarkMode: React.FC = () => { const { backgroundColor, toggleDarkMode } = useAppStore(); @@ -13,20 +12,44 @@ const ToggleDarkMode: React.FC = () => { const handleChange = () => { toggleDarkMode(); - setIsDarkMode((prev) => !prev); const newTheme = !isDarkMode ? "dark" : "light"; document.documentElement.setAttribute("data-theme", newTheme); + setIsDarkMode(!isDarkMode); }; return ( - - - +
+
+ {isDarkMode ? : } +
+
); };