From e54b9a287224e30911b3c8b4a99cde5cb6ef9162 Mon Sep 17 00:00:00 2001 From: Abhishek Date: Tue, 5 Nov 2024 17:57:22 +0530 Subject: [PATCH 1/3] feat: update navbar to dock Signed-off-by: Abhishek --- components/ui/header.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/components/ui/header.tsx b/components/ui/header.tsx index e0a0a597..5c1643d2 100644 --- a/components/ui/header.tsx +++ b/components/ui/header.tsx @@ -56,10 +56,16 @@ export default function Header() { return (
+{/* +
*/}
{/* Site branding */} @@ -151,7 +157,7 @@ export default function Header() { Sign In {/**/} From 9f36129a8625602eee48e3286fe285b1920f5fe7 Mon Sep 17 00:00:00 2001 From: Abhishek Date: Tue, 5 Nov 2024 17:57:44 +0530 Subject: [PATCH 2/3] feat: update colors in the dropdown Signed-off-by: Abhishek --- components/nav/navItemWithSmallDropdown.tsx | 135 ++++++++++---------- 1 file changed, 68 insertions(+), 67 deletions(-) diff --git a/components/nav/navItemWithSmallDropdown.tsx b/components/nav/navItemWithSmallDropdown.tsx index 4c4a8d8d..c1b2a53e 100644 --- a/components/nav/navItemWithSmallDropdown.tsx +++ b/components/nav/navItemWithSmallDropdown.tsx @@ -1,79 +1,80 @@ -import React, {useState} from "react"; +import React, { useState } from "react"; import Link from "next/link"; -import {UpIcon} from "./UpIcon" +import { UpIcon } from "./UpIcon" import DownIcon from "./DownIcon" import Image from "next/image"; export interface NavItemWithSmallDropdownProps { - heading: string; - dropdownData: DropdowndataInterface[]; - } + heading: string; + dropdownData: DropdowndataInterface[]; +} - export interface DropdowndataInterface{ - heading:string; - links:LinkDatainterface[] +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) } - export interface LinkDatainterface{ - pagelink:string; - pageName:string; + const toggleDropdown = () => { + setShowDropdown(!openDropdown) } -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( + return ( +
+
+
+ Resources +
+
+ {openDropdown ? : } +
+
+ {openDropdown && (
-
-
- Resources + className="absolute top-full pb-0 bg-[#F5F5F5] pb-8 z-10 border border-gray-300 rounded-lg" + >
+
+ {dropdownData.map((lists) => ( +
+ {" "} + + {lists.heading} + +
    + {lists.links.map((link) => ( +
  • + {" "} + {/* Ensure to add a key for list items when mapping */} + + {link.pageName} + +
    • + ))} +
-
- {openDropdown ? : } -
- {openDropdown && ( -
-
-
- {dropdownData.map((lists) => ( -
- {" "} - - {lists.heading} - -
    - {lists.links.map((link) => ( -
  • - {" "} - {/* Ensure to add a key for list items when mapping */} - - {link.pageName} - -
    • - ))} -
-
- ))} -
-
-
- )} -
- ) + ))} +
+
+
+ )} +
+ ) } \ No newline at end of file From 9c01584cb24052d99a904001cd8625c9b66d2bd7 Mon Sep 17 00:00:00 2001 From: Abhishek Date: Wed, 6 Nov 2024 15:56:25 +0530 Subject: [PATCH 3/3] feat: make the icons rounded Signed-off-by: Abhishek --- components/ui/header.tsx | 38 ++++++++++++++++++-------------------- 1 file changed, 18 insertions(+), 20 deletions(-) diff --git a/components/ui/header.tsx b/components/ui/header.tsx index 5c1643d2..e22b75b3 100644 --- a/components/ui/header.tsx +++ b/components/ui/header.tsx @@ -7,7 +7,7 @@ import Logo from "./logo"; import MobileMenu from "./mobile-menu"; import CountingNumbers from "../utils/countingNumbers"; import { isTypeOfExpression } from "typescript"; -import NavItemWithSmallDropdown, {DropdowndataInterface,LinkDatainterface} from "@/components/nav/navItemWithSmallDropdown"; +import NavItemWithSmallDropdown, { DropdowndataInterface, LinkDatainterface } from "@/components/nav/navItemWithSmallDropdown"; import { PillarPages } from "../utils/resources"; import { StarIcon } from "@heroicons/react/24/solid"; export default function Header() { @@ -56,11 +56,10 @@ export default function Header() { return (
-{/* + {/*
{/* Desktop privacy-policy in links */}
    -
  • +
  • -
    +
    {/* Sliding effect span */} -
    -
    - - Sign In - {/**/} - {/* */} - {/**/} - -
    +
    + + Sign In + {/**/} + {/* */} + {/**/} + +