diff --git a/components/nav/navItemWithSmallDropdown.tsx b/components/nav/navItemWithSmallDropdown.tsx index 4c4a8d8d..abda8d77 100644 --- a/components/nav/navItemWithSmallDropdown.tsx +++ b/components/nav/navItemWithSmallDropdown.tsx @@ -1,79 +1,274 @@ -import React, {useState} from "react"; +import React, { useState } from "react"; import Link from "next/link"; -import {UpIcon} from "./UpIcon" -import DownIcon from "./DownIcon" -import Image from "next/image"; +import { UpIcon } from "./UpIcon"; +import DownIcon from "./DownIcon"; +import Image from 'next/image'; +import illustration from "@/public/images/navbar/illustration.png"; +// Interface Definitions export interface NavItemWithSmallDropdownProps { - heading: string; - dropdownData: DropdowndataInterface[]; - } - - export interface DropdowndataInterface{ - heading:string; - links:LinkDatainterface[] - } - export interface LinkDatainterface{ - pagelink:string; - pageName:string; - } -export default function NavItemWithSmallDropdown({heading,dropdownData}:NavItemWithSmallDropdownProps){ - const [openDropdown,setShowDropdown] = useState(false) - const showDropdown = ()=>{ - setShowDropdown(true) - } - const hideDropdown = ()=>{ - setShowDropdown(false) - } - const toggleDropdown =()=>{ - setShowDropdown(!openDropdown) - } - - return( -
-
-
- Resources + heading: string; + dropdownData: DropdowndataInterface[]; + openDropdown: string | null; + handleDropdownToggle: (dropdownName: string) => void; +} + +export interface DropdowndataInterface { + heading: string; + links: LinkDatainterface[]; + icons: string; +} + +export interface LinkDatainterface { + pagelink: string; + pageName: string; + icon?: string; // Optional icon property + icons: string; +} + +export default function NavItemWithSmallDropdown({ + heading, + dropdownData, + openDropdown, + handleDropdownToggle, +}: NavItemWithSmallDropdownProps) { + const [activeTab, setActiveTab] = useState(0); // Track active tab index + + // Handle tab switching + const handleTabClick = (index: number) => { + setActiveTab(index); + }; + + return ( +
+ {/* Dropdown Heading */} +
handleDropdownToggle(heading.toLowerCase())} + role="button" + tabIndex={0} // Make it keyboard accessible + onKeyDown={(e) => e.key === "Enter" && handleDropdownToggle(heading.toLowerCase())} // Handle keyboard interaction + > + {heading} + + {openDropdown === heading.toLowerCase() ? ( + + ) : ( + + )} + +
+ + {/* Dropdown Content */} + {openDropdown === heading.toLowerCase() && ( +
+ {heading.toLowerCase() === "resources" && ( +
+ {dropdownData.map((section, sectionIndex) => ( +
+

+ {section.heading} +

+
    + {section.links.map((link, linkIndex) => ( +
  • + {link.icon && ( + + )} + + {link.pageName} + {link.pageName} {/* Ensures text is part of flex layout */} + +
    • + ))} +
-
- {openDropdown ? : } -
- {openDropdown && ( -
-
-
- {dropdownData.map((lists) => ( -
- {" "} - - {lists.heading} - -
    - {lists.links.map((link) => ( -
  • - {" "} - {/* Ensure to add a key for list items when mapping */} - - {link.pageName} - -
    • - ))} -
-
- ))} -
-
+ ))} + +
+ )} + + {heading.toLowerCase() === "solutions" && ( +
+
+ + {/* First Column for Heading 1 */} +
+

{dropdownData[0]?.heading}

+
    + {dropdownData[0]?.links.slice(0, 4).map((solution, index) => ( +
  • + + {solution.pageName} + {solution.pageName} + +
    • + ))} +
+
+ + {/* Second Column for Next 4 Links */} +
+

+ +
    + {dropdownData[0]?.links.slice(4, 8).map((solution, index) => ( +
  • + + {solution.pageName} + {solution.pageName} + +
    • + ))} +
+
+ + {/* Third Column for Heading 2 */} + {dropdownData[1] && ( +
+

{dropdownData[1]?.heading}

+
    + {dropdownData[1]?.links.map((solution, index) => ( +
  • + + {solution.pageName} + {solution.pageName} + +
    • + ))} +
)}
- ) -} \ No newline at end of file +
+ )} + + + + + + + {/* Dropdown Content */} + {openDropdown === "products" && ( +
+
+ + {/* Left Section: "Open Source" and "Enterprise Solution" buttons */} +
+ {dropdownData.map((section, index) => ( + + ))} +
+ + {/* Right Section: "About Product" and "Features" */} +
+ + {/* About Product Section */} +
+

About Product

+
    + {dropdownData[0]?.links.map((link, linkIndex) => ( +
  • + + {link.pageName} + {link.pageName} + +
    • + ))} +
+
+ + {/* Features Section */} +
+ + {activeTab === 0 ? ( +
+

Features

+
    + {dropdownData[1]?.links.map((link, linkIndex) => ( +
  • + + {link.pageName} + {link.pageName} + +
    • + ))} +
+
+ + ) : ( +
+

Want to achieve 95% coverage by making API calls of all possible permutations?

+ +
+ )} +
+ +
+
+
+ )} + +
+ )} +
+ ); +} diff --git a/components/ui/header.tsx b/components/ui/header.tsx index e0a0a597..77655144 100644 --- a/components/ui/header.tsx +++ b/components/ui/header.tsx @@ -8,11 +8,13 @@ import MobileMenu from "./mobile-menu"; import CountingNumbers from "../utils/countingNumbers"; import { isTypeOfExpression } from "typescript"; import NavItemWithSmallDropdown, {DropdowndataInterface,LinkDatainterface} from "@/components/nav/navItemWithSmallDropdown"; -import { PillarPages } from "../utils/resources"; +import { PillarPages,PillarPages1,PillarPages2 } from "../utils/resources"; import { StarIcon } from "@heroicons/react/24/solid"; export default function Header() { const [top, setTop] = useState(true); const [starsCount, setStarsCount] = useState(1000); + const [activeDropdown, setActiveDropdown] = useState(null); // State for active dropdown + // detect whether user has scrolled the page down by 10px const scrollHandler = () => { window.pageYOffset > 10 ? setTop(false) : setTop(true); @@ -53,6 +55,9 @@ export default function Header() { fetchStarsCount(); }, []); + const handleDropdownToggle = (dropdownName: string) => { + setActiveDropdown(activeDropdown === dropdownName ? null : dropdownName); + }; return (
{/* Desktop navigation */} -