From 4e8fd7f5ae67f28c822a4c234c3c15081a5d1c2e Mon Sep 17 00:00:00 2001 From: Amrit Date: Wed, 12 Mar 2025 18:09:46 +0530 Subject: [PATCH 1/8] Added dropdown menu shown in navbar on hover Signed-off-by: Amrit fixed dropdown on hover --- src/components/Navbar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index cfc4eb59..b77bec98 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -148,7 +148,7 @@ function Navbar({ scrollToFooter }: { scrollToFooter: any }) { onMouseEnter={() => setHovered("help")} onMouseLeave={() => setHovered(null)} > - + From 8a5cc20818ef9677ea872842b7aa024fdd7a1115 Mon Sep 17 00:00:00 2001 From: Amrit Date: Thu, 13 Mar 2025 10:04:03 +0530 Subject: [PATCH 4/8] Removed Typescript Errors Signed-off-by: Amrit --- src/components/Navbar.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index abc88e3c..892d2e01 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -76,7 +76,7 @@ function Navbar({ scrollToFooter }: { scrollToFooter: any }) { ); - const menuItemStyle = (key: string, isLast: boolean) => ({ + const menuItemStyle = (key: string) => ({ display: "flex", alignItems: "center", padding: screens.md ? "0 20px" : "0", @@ -102,7 +102,7 @@ function Navbar({ scrollToFooter }: { scrollToFooter: any }) {
setHovered("home")} onMouseLeave={() => setHovered(null)} @@ -129,9 +129,10 @@ function Navbar({ scrollToFooter }: { scrollToFooter: any }) { <>
setHovered("explore")} onMouseLeave={() => setHovered(null)} @@ -140,7 +141,7 @@ function Navbar({ scrollToFooter }: { scrollToFooter: any }) {
setHovered("help")} From d19ed0550d65f3d3225e152994df78f5aae9ea6f Mon Sep 17 00:00:00 2001 From: Amrit Date: Sun, 16 Mar 2025 18:52:41 +0530 Subject: [PATCH 5/8] Added Responsivness to Navbar Signed-off-by: Amrit --- src/components/Content.tsx | 2 +- src/components/Navbar.tsx | 267 +++++++++++------- .../constants/content/footer.json | 0 .../constants/learningSteps/steps.ts | 0 4 files changed, 169 insertions(+), 100 deletions(-) rename src/{ => components}/constants/content/footer.json (100%) rename src/{ => components}/constants/learningSteps/steps.ts (100%) diff --git a/src/components/Content.tsx b/src/components/Content.tsx index d81d1231..85cad49a 100644 --- a/src/components/Content.tsx +++ b/src/components/Content.tsx @@ -44,7 +44,7 @@ const LearnContent: React.FC = ({ file }) => { } }; - loadContent(); + void loadContent(); }, [file]); const currentIndex = steps.findIndex((step) => diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 892d2e01..9f8254f8 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -9,19 +9,23 @@ import { InfoOutlined, BookOutlined, CaretDownFilled, + MenuOutlined, } from "@ant-design/icons"; import ToggleDarkMode from "./ToggleDarkMode"; const { useBreakpoint } = Grid; -function Navbar({ scrollToFooter }: { scrollToFooter: any }) { +function Navbar({ scrollToFooter }: { scrollToFooter: () => void }) { const [hovered, setHovered] = useState< null | "home" | "explore" | "help" | "github" | "join" >(null); + const screens = useBreakpoint(); const location = useLocation(); + const isLearnPage = location.pathname.startsWith("/learn"); - const props = useSpring({ + // Animation for the "Learn" button using React Spring + const learnButtonProps = useSpring({ loop: true, from: { opacity: 0.5, boxShadow: "0px 0px 0px rgba(255, 255, 255, 0)" }, to: [ @@ -31,6 +35,14 @@ function Navbar({ scrollToFooter }: { scrollToFooter: any }) { config: { duration: 1000 }, }); + // Animation for the Navbar entrance + const navbarProps = useSpring({ + from: { opacity: 0, transform: "translateY(-20px)" }, + to: { opacity: 1, transform: "translateY(0)" }, + config: { duration: 500 }, // Adjust duration as needed + }); + + // "Help" dropdown menu const helpMenu = ( @@ -76,6 +88,72 @@ function Navbar({ scrollToFooter }: { scrollToFooter: any }) { ); + // Hamburger menu for small screens + const hamburgerMenu = ( + + + Explore + + + + + + About + + + + + Community + + + + + Issues + + + + + + + Documentation + + + + + {!isLearnPage && ( + + Learn + + )} + + + GitHub + + + + ); + + // Reusable style for menu items const menuItemStyle = (key: string) => ({ display: "flex", alignItems: "center", @@ -85,11 +163,10 @@ function Navbar({ scrollToFooter }: { scrollToFooter: any }) { height: "65px", }); - const isLearnPage = location.pathname.startsWith("/learn"); - return ( -
+ {/* Logo Section */}
setHovered("home")} onMouseLeave={() => setHovered(null)} > - + Template Playground - Template Playground + {screens.md && Template Playground}
+ + {/* Menu Items for Medium and Larger Screens */} {screens.md && ( <>
setHovered("explore")} onMouseLeave={() => setHovered(null)} @@ -140,14 +210,11 @@ function Navbar({ scrollToFooter }: { scrollToFooter: any }) { Explore
setHovered("help")} onMouseLeave={() => setHovered(null)} > - +
)} + + {/* Right Side Content */}
-
- -
- {!isLearnPage && ( -
setHovered("join")} - onMouseLeave={() => setHovered(null)} - > - - + + {/* Medium and Larger Screens */} + {screens.md ? ( + <> + {!isLearnPage && ( +
setHovered("join")} + onMouseLeave={() => setHovered(null)} > - Learn - - -
- )} -
setHovered("github")} - onMouseLeave={() => setHovered(null)} - > - - + + Learn + + +
+ )} + + + ) : ( + /* Hamburger Menu for Small Screens */ + + - {screens.md && Github} - -
+ + )}
-
+ ); } -export default Navbar; +export default Navbar; \ No newline at end of file diff --git a/src/constants/content/footer.json b/src/components/constants/content/footer.json similarity index 100% rename from src/constants/content/footer.json rename to src/components/constants/content/footer.json diff --git a/src/constants/learningSteps/steps.ts b/src/components/constants/learningSteps/steps.ts similarity index 100% rename from src/constants/learningSteps/steps.ts rename to src/components/constants/learningSteps/steps.ts From 257e66ab4e27ae5d351b913f2f9f0e0a61a52101 Mon Sep 17 00:00:00 2001 From: Amrit Date: Sun, 16 Mar 2025 19:13:43 +0530 Subject: [PATCH 6/8] added Responsivness and animation to navbar Signed-off-by: Amrit --- src/components/Content.tsx | 1 + src/{components => }/constants/content/footer.json | 0 src/{components => }/constants/learningSteps/steps.ts | 0 tsconfig.json | 2 +- 4 files changed, 2 insertions(+), 1 deletion(-) rename src/{components => }/constants/content/footer.json (100%) rename src/{components => }/constants/learningSteps/steps.ts (100%) diff --git a/src/components/Content.tsx b/src/components/Content.tsx index 85cad49a..3f20da46 100644 --- a/src/components/Content.tsx +++ b/src/components/Content.tsx @@ -17,6 +17,7 @@ import { Spin } from "antd"; import fetchContent from "../utils/fetchContent"; import { steps } from "../constants/learningSteps/steps"; + // markdown syntax highlighting theme import "highlight.js/styles/github.css"; diff --git a/src/components/constants/content/footer.json b/src/constants/content/footer.json similarity index 100% rename from src/components/constants/content/footer.json rename to src/constants/content/footer.json diff --git a/src/components/constants/learningSteps/steps.ts b/src/constants/learningSteps/steps.ts similarity index 100% rename from src/components/constants/learningSteps/steps.ts rename to src/constants/learningSteps/steps.ts diff --git a/tsconfig.json b/tsconfig.json index 13e84906..48484244 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -21,6 +21,6 @@ "noFallthroughCasesInSwitch": true, "types": ["vitest/globals", "@testing-library/jest-dom"] }, - "include": ["src"], + "include": ["src", "src/constants"], "references": [{ "path": "./tsconfig.node.json" }] } From 2ae1cf2c0261f79b8c83c280ccea5111b37e9a63 Mon Sep 17 00:00:00 2001 From: Amrit Date: Tue, 18 Mar 2025 22:04:52 +0530 Subject: [PATCH 7/8] Refractored Footer Signed-off-by: Amrit --- src/components/Footer.tsx | 76 +++++++++++++++++++++++++++++++-------- 1 file changed, 62 insertions(+), 14 deletions(-) diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 1af1106f..3dbf738a 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useState, useMemo } from "react"; import { Layout, Row, Col, Typography, Space, Button, Image, Grid } from "antd"; import { GithubOutlined, @@ -9,17 +9,45 @@ import { UpOutlined, } from "@ant-design/icons"; import FOOTER_SECTION from "../constants/content/footer.json"; -import { FooterSection, FooterLink } from "../types/components/Footer.types"; const { Footer } = Layout; const { Text, Link } = Typography; const { useBreakpoint } = Grid; +// Add TypeScript interfaces +interface FooterLink { + title: string; + href: string; +} + +interface FooterSection { + title: string; + links: FooterLink[]; +} + +// Extract common styles +const styles = { + whiteText: { color: "rgba(255, 255, 255, 0.85)" }, + fadedWhiteText: { color: "rgba(255, 255, 255, 0.65)" }, + socialIcon: { fontSize: "17px" }, + joinButton: { + padding: "5px 30px", + backgroundColor: "#19c6c7", + borderRadius: "5px", + color: "#050c40", + textAlign: "center" as const, + border: "none", + }, +}; + const CustomFooter: React.FC = () => { const year = new Date().getFullYear(); const screens = useBreakpoint(); const [expanded, setExpanded] = useState(false); + // Memoize the sections data + const footerSections = useMemo(() => FOOTER_SECTION.sections as FooterSection[], []); + return (
{ {(screens.md || expanded) && ( - {FOOTER_SECTION.sections.map((section: FooterSection) => ( + {footerSections.map((section) => ( { > {section.title} - {section.links.map((link: FooterLink) => ( + {section.links.map((link) => ( { - copyright © {year} accord project •{" "} + Copyright © {year} accord project •{" "} { - - + + - - + + - - + + - - + + @@ -154,4 +202,4 @@ const CustomFooter: React.FC = () => { ); }; -export default CustomFooter; +export default CustomFooter; \ No newline at end of file From 2ee632f530157bd7483306a2326cd367dd09d4d8 Mon Sep 17 00:00:00 2001 From: Amrit Date: Tue, 18 Mar 2025 22:29:27 +0530 Subject: [PATCH 8/8] Resolved Merge conflicts Signed-off-by: Amrit --- src/components/Navbar.tsx | 24 +++--------------------- 1 file changed, 3 insertions(+), 21 deletions(-) diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index e72ad453..5a2f6c05 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -15,15 +15,11 @@ import ToggleDarkMode from "./ToggleDarkMode"; const { useBreakpoint } = Grid; -<<<<<<< HEAD interface NavbarProps { scrollToFooter: () => void; } function Navbar({ scrollToFooter }: NavbarProps) { -======= -function Navbar({ scrollToFooter }: { scrollToFooter: () => void }) { ->>>>>>> navre const [hovered, setHovered] = useState< null | "home" | "explore" | "help" | "github" | "join" >(null); @@ -182,7 +178,7 @@ function Navbar({ scrollToFooter }: { scrollToFooter: () => void }) { alignItems: "center", paddingLeft: screens.md ? 40 : 10, paddingRight: screens.md ? 40 : 10, - overflow: "hidden", // Prevent content from overflowing + overflow: "hidden", }} > {/* Logo Section */} @@ -191,14 +187,7 @@ function Navbar({ scrollToFooter }: { scrollToFooter: () => void }) { onMouseEnter={() => setHovered("home")} onMouseLeave={() => setHovered(null)} > -<<<<<<< HEAD - -======= - ->>>>>>> navre + Template Playground void }) { paddingRight: screens.md ? "24px" : "10px", }} /> -<<<<<<< HEAD - Template Playground - -======= {screens.md && Template Playground} - ->>>>>>> navre +
{/* Menu Items for Medium and Larger Screens */} @@ -263,7 +247,6 @@ function Navbar({ scrollToFooter }: { scrollToFooter: () => void }) { > - {/* Medium and Larger Screens */} {screens.md ? ( <> {!isLearnPage && ( @@ -330,7 +313,6 @@ function Navbar({ scrollToFooter }: { scrollToFooter: () => void }) {
) : ( - /* Hamburger Menu for Small Screens */