From bce89e7fd8275196882823641311cea5062eafdb Mon Sep 17 00:00:00 2001 From: codebox283 <87943295+codebox283@users.noreply.github.com> Date: Tue, 25 Feb 2025 08:58:35 +0530 Subject: [PATCH] navbar changes and product pages changed --- app/click-video/page.tsx | 2 +- app/series/page.tsx | 2 +- app/template/page.tsx | 2 +- app/writer/page.tsx | 2 +- components/Navbar/dropdowns.tsx | 105 ++++++++++++++++++++------ components/Navbar/navbar.tsx | 130 ++++++++++++++++++-------------- 6 files changed, 159 insertions(+), 84 deletions(-) diff --git a/app/click-video/page.tsx b/app/click-video/page.tsx index a8e9e14..0b1d8b6 100644 --- a/app/click-video/page.tsx +++ b/app/click-video/page.tsx @@ -88,7 +88,7 @@ export default function Series() { return (
-
+

{heading}

{description}

diff --git a/app/series/page.tsx b/app/series/page.tsx index 4015a19..02756f7 100644 --- a/app/series/page.tsx +++ b/app/series/page.tsx @@ -107,7 +107,7 @@ export default function Series() { return (
-
+

{heading}

{description}

diff --git a/app/template/page.tsx b/app/template/page.tsx index 9b9b0a5..d0acdb9 100644 --- a/app/template/page.tsx +++ b/app/template/page.tsx @@ -107,7 +107,7 @@ export default function Series() { return (
-
+

{heading}

{description}

diff --git a/app/writer/page.tsx b/app/writer/page.tsx index 8e3c34f..bd1f493 100644 --- a/app/writer/page.tsx +++ b/app/writer/page.tsx @@ -85,7 +85,7 @@ export default function Series() { return (
-
+

{heading}

{description}

diff --git a/components/Navbar/dropdowns.tsx b/components/Navbar/dropdowns.tsx index a1d1c5d..25a711d 100644 --- a/components/Navbar/dropdowns.tsx +++ b/components/Navbar/dropdowns.tsx @@ -3,7 +3,7 @@ import { CgWebsite } from 'react-icons/cg'; import { FaBook, FaBookmark, FaMicrophone, FaMoneyBillAlt, FaPen, FaServicestack, FaStore, FaUserCog, FaUserPlus, FaVideo } from 'react-icons/fa'; import { GiArtificialIntelligence } from 'react-icons/gi'; import { GoWorkflow } from 'react-icons/go'; -import { GrTemplate } from 'react-icons/gr'; +import { GrContactInfo, GrTemplate } from 'react-icons/gr'; import { IoIosApps, IoIosDocument, IoIosMail, IoMdAnalytics, IoMdArrowRoundForward } from 'react-icons/io'; import { IoFlash, IoText } from 'react-icons/io5'; import { LuWorkflow } from 'react-icons/lu'; @@ -432,7 +432,7 @@ const resourceItems: ResourceItem[] = [ { name: 'Enterprise Contact', description: 'Partner with us to scale your enterprise', - icon: undefined, // No Icon + icon: , link: '/enterprise-contact' // Add the correct link }, ], @@ -504,31 +504,86 @@ export const ResourcesDropdown: React.FC = () => {

Curated Resources to Get You Started.

-

Documents, videos, communities and lot more.

+

Documents, videos, communities and a lot more.

- {resourceItems.map((item) => ( -
-

{item.category}

- -
- ))} + {/* Mapping over resource items, ensuring Build & Services are in the same column */} + {resourceItems.map((item, index) => { + if (item.category === 'Build') { + return ( +
+ {/* Render Build category */} +

{item.category}

+ + + {/* Render Services category immediately after Build */} + {resourceItems + .filter((el) => el.category === 'Services') + .map((serviceItem) => ( +
+

{serviceItem.category}

+ +
+ ))} +
+ ); + } else if (item.category !== 'Services') { + return ( +
+

{item.category}

+ +
+ ); + } + })}
diff --git a/components/Navbar/navbar.tsx b/components/Navbar/navbar.tsx index 54b13f7..abafc48 100644 --- a/components/Navbar/navbar.tsx +++ b/components/Navbar/navbar.tsx @@ -1,59 +1,75 @@ "use client"; -import React, { useState } from 'react'; +import React, { useState, useRef, useEffect } from "react"; import { FaAngleDown } from "react-icons/fa"; -import { ProductDropdown, SolutionsDropdown, ResourcesDropdown } from './dropdowns'; -import MobileMenu from './MobileMenu'; // Import the MobileMenu component +import { ProductDropdown, SolutionsDropdown, ResourcesDropdown } from "./dropdowns"; +import MobileMenu from "./MobileMenu"; // Import the MobileMenu component const Navbar: React.FC = () => { const [showProduct, setShowProduct] = useState(false); const [showSolutions, setShowSolutions] = useState(false); const [showResources, setShowResources] = useState(false); - const [activeTab, setActiveTab] = useState(''); - const [mobileMenuOpen, setMobileMenuOpen] = useState(false); // State for mobile menu + const [activeTab, setActiveTab] = useState(null); + const [mobileMenuOpen, setMobileMenuOpen] = useState(false); - const toggleProduct = () => { - setShowProduct(!showProduct); - setShowSolutions(false); - setShowResources(false); - setActiveTab('product'); - }; + const navbarRef = useRef(null); // Reference for the navbar - const toggleSolutions = () => { - setShowSolutions(!showSolutions); - setShowProduct(false); - setShowResources(false); - setActiveTab('solutions'); - }; - - const toggleResources = () => { - setShowResources(!showResources); - setShowProduct(false); - setShowSolutions(false); - setActiveTab('resources'); + const toggleDropdown = (tab: string) => { + if (activeTab === tab) { + setActiveTab(null); + setShowProduct(false); + setShowSolutions(false); + setShowResources(false); + } else { + setActiveTab(tab); + setShowProduct(tab === "product"); + setShowSolutions(tab === "solutions"); + setShowResources(tab === "resources"); + } }; const toggleMobileMenu = () => { setMobileMenuOpen(!mobileMenuOpen); }; + // Close dropdowns when clicking outside the navbar + useEffect(() => { + const handleClickOutside = (event: MouseEvent) => { + if (navbarRef.current && !navbarRef.current.contains(event.target as Node)) { + setActiveTab(null); + setShowProduct(false); + setShowSolutions(false); + setShowResources(false); + } + }; + + document.addEventListener("mousedown", handleClickOutside); + return () => { + document.removeEventListener("mousedown", handleClickOutside); + }; + }, []); + return ( -
-
-
- - Logo +
+
+
+ + Logo + {/* Desktop Menu */} -
    +
      {/* Product Menu */} -
    • - Product - {activeTab === 'product' && ( +
    • toggleDropdown("product")} + > + Product + {activeTab === "product" && ( @@ -61,9 +77,12 @@ const Navbar: React.FC = () => {
      • {/* Solutions Menu */} -
    • - Solutions - {activeTab === 'solutions' && ( +
    • toggleDropdown("solutions")} + > + Solutions + {activeTab === "solutions" && ( @@ -71,19 +90,26 @@ const Navbar: React.FC = () => {
      • {/* Pricing */} -
    • Pricing
      •  + +
    • Pricing
      • +       {/* Resources Menu */} -
    • - Resources - {activeTab === 'resources' && ( +
    • toggleDropdown("resources")} + > + Resources + {activeTab === "resources" && ( )}
      • -
    • AI Agents
      •  + +
    • AI Agents
      • +
    {/* Hamburger Icon for Mobile View */} @@ -93,19 +119,15 @@ const Navbar: React.FC = () => {
{/* Action Buttons */} -
- +
+ - +
{/* Dropdowns for Desktop View */} -
+
{showProduct && (
@@ -124,9 +146,7 @@ const Navbar: React.FC = () => {
{/* Mobile Menu */} - {mobileMenuOpen && ( - - )} + {mobileMenuOpen && }
); };