Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature #13

Merged
merged 4 commits into from
Jun 7, 2024
Merged

Feature #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
bb92bb0
Created dummy dropdown component
IMISSHER99 Jun 7, 2024
9c00456
Changed Font to lato
IMISSHER99 Jun 7, 2024
28003d3
Changed Font added Navigation Drodown
IMISSHER99 Jun 7, 2024
c077054
Added Missing Key
IMISSHER99 Jun 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/_common/button/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export type ButtonProps = {

const Button:React.FC<ButtonProps> = ({ text, type }) => {
return (
<Link href={"/"} className={`min-w-[42px] h-[42px] px-5 flex items-center justify-between text-white cursor-pointer border-0 bg-black rounded-lg text-base font-normal button ${type === ButtonType.BUTTON_OUTLINE ? 'button__outline !font-thin' : ''}`}>{ text }</Link>
<Link href={"/"} className={`min-w-[42px] h-[42px] px-5 flex items-center justify-between text-white cursor-pointer border-0 bg-black rounded-lg text-base font-normal button ${type === ButtonType.BUTTON_OUTLINE ? 'button__outline !font-normal' : ''}`}>{ text }</Link>
)
}

Expand Down
35 changes: 35 additions & 0 deletions app/_common/icons/Icons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
export const TrendingIcon:React.FC<{}> = () => {
return <svg width={11} height={15} viewBox="0 0 11 15">
<path d="M3.9929 0.625939C4.13088 0.54352 4.2886 0.5 4.44931 0.5C4.59954 0.5 4.74714 0.538023 4.87845 0.610295C8.87544 2.46727 11.1385 6.32323 10.9988 9.54683L10.9988 9.54716C10.9392 10.902 10.4542 12.1551 9.51453 13.0708C8.57487 13.9865 7.2248 14.5218 5.51533 14.5252C4.82872 14.5675 4.14047 14.4731 3.49048 14.2476C2.83534 14.0202 2.2323 13.6641 1.71685 13.2001C1.20139 12.7362 0.783938 12.1739 0.489046 11.5463C0.194154 10.9186 0.027783 10.2383 -0.000275804 9.54542L-0.000578149 9.53795L-0.000522329 9.53795C-0.0209942 8.73621 0.178555 7.94417 0.57646 7.24784C0.974365 6.55151 1.55542 5.97748 2.25655 5.58808C2.37945 5.51982 2.52542 5.50645 2.65867 5.55126C2.79193 5.59607 2.90017 5.69491 2.95686 5.82356C3.20152 6.37877 3.54425 6.88378 3.96732 7.31498C4.46391 6.66783 4.69233 5.83147 4.68558 4.91261C4.67754 3.81878 4.33395 2.64717 3.75882 1.64956C3.66486 1.49271 3.63053 1.30715 3.66234 1.1269C3.69467 0.943739 3.79303 0.77879 3.93881 0.663287C3.956 0.649664 3.97407 0.637188 3.9929 0.625939ZM4.94165 1.7577C5.40397 2.74496 5.67775 3.84365 5.68555 4.90526C5.69502 6.19406 5.31016 7.46724 4.34414 8.38726C4.15969 8.56293 3.87265 8.57185 3.67764 8.40797C3.12295 7.94184 2.65822 7.38047 2.30441 6.75183C1.95725 7.02235 1.66472 7.35895 1.4447 7.74398C1.13805 8.28062 0.98396 8.89087 0.999059 9.50871C1.02217 10.0671 1.15648 10.6152 1.39413 11.121C1.63231 11.628 1.96949 12.0822 2.38581 12.4569C2.80214 12.8315 3.28921 13.1192 3.81836 13.3028C4.34751 13.4865 4.90805 13.5624 5.46699 13.5262C5.47775 13.5255 5.48853 13.5252 5.49931 13.5252C7.00226 13.5252 8.09169 13.061 8.8166 12.3546C9.54444 11.6453 9.94941 10.6483 9.9998 9.50321C10.1142 6.86049 8.3102 3.53981 4.94165 1.7577ZM7.99932 9.02519C8.27546 9.02519 8.49932 9.24904 8.49932 9.52519C8.49932 10.1882 8.23592 10.8241 7.76708 11.293C7.29824 11.7618 6.66236 12.0252 5.99931 12.0252C5.72317 12.0252 5.49931 11.8013 5.49931 11.5252C5.49931 11.249 5.72317 11.0252 5.99931 11.0252C6.39714 11.0252 6.77867 10.8672 7.05997 10.5858C7.34128 10.3045 7.49931 9.92301 7.49931 9.52519C7.49931 9.24904 7.72317 9.02519 7.99932 9.02519Z"></path>
</svg>
}

export const WebsitesIcon:React.FC<{}> = () => {
return <svg width={11} height={15} viewBox="0 0 11 15">
<path d="M11 0.5C11 0.223858 11.2239 0 11.5 0H12.5C12.8978 0 13.2794 0.158035 13.5607 0.43934C13.842 0.720644 14 1.10217 14 1.5V2.5C14 2.77614 13.7761 3 13.5 3C13.2239 3 13 2.77614 13 2.5V1.5C13 1.36739 12.9473 1.24022 12.8536 1.14645C12.7598 1.05268 12.6326 1 12.5 1H11.5C11.2239 1 11 0.776142 11 0.5Z M13.5 5C13.7761 5 14 5.22386 14 5.5V8.5C14 8.77614 13.7761 9 13.5 9C13.2239 9 13 8.77614 13 8.5V5.5C13 5.22386 13.2239 5 13.5 5Z M13.5 11C13.7761 11 14 11.2239 14 11.5V12.5C14 12.8978 13.842 13.2794 13.5607 13.5607C13.2794 13.842 12.8978 14 12.5 14H11.5C11.2239 14 11 13.7761 11 13.5C11 13.2239 11.2239 13 11.5 13H12.5C12.6326 13 12.7598 12.9473 12.8536 12.8536C12.9473 12.7598 13 12.6326 13 12.5V11.5C13 11.2239 13.2239 11 13.5 11Z M1.5 1C1.36739 1 1.24021 1.05268 1.14645 1.14645C1.05268 1.24021 1 1.36739 1 1.5V12.5C1 12.6326 1.05268 12.7598 1.14645 12.8536C1.24022 12.9473 1.36739 13 1.5 13H4.5C4.77614 13 5 13.2239 5 13.5C5 13.7761 4.77614 14 4.5 14H1.5C1.10217 14 0.720644 13.842 0.43934 13.5607C0.158035 13.2794 0 12.8978 0 12.5V1.5C0 1.10218 0.158035 0.720644 0.43934 0.43934C0.720644 0.158035 1.10218 0 1.5 0H4.5C4.77614 0 5 0.223858 5 0.5C5 0.776142 4.77614 1 4.5 1H1.5Z M6.5 0.5C6.5 0.223858 6.72386 0 7 0H8.5C8.77614 0 9 0.223858 9 0.5C9 0.776142 8.77614 1 8.5 1H7.5V13H8.5C8.77614 13 9 13.2239 9 13.5C9 13.7761 8.77614 14 8.5 14H7C6.72386 14 6.5 13.7761 6.5 13.5V0.5Z"></path>
</svg>
}

export const TechnologiesIcon:React.FC<{}> = () => {
return <svg width={11} height={15} viewBox="0 0 11 15">
<path d="M0.5 8C0.776142 8 1 8.22386 1 8.5C1 8.63261 1.05268 8.75978 1.14645 8.85355C1.24022 8.94732 1.36739 9 1.5 9C1.77614 9 2 9.22386 2 9.5C2 9.77614 1.77614 10 1.5 10C1.10217 10 0.720644 9.84196 0.43934 9.56066C0.158035 9.27936 0 8.89782 0 8.5C0 8.22386 0.223858 8 0.5 8Z M0.43934 0.43934C0.720644 0.158035 1.10218 0 1.5 0C1.77614 0 2 0.223858 2 0.5C2 0.776142 1.77614 1 1.5 1C1.36739 1 1.24021 1.05268 1.14645 1.14645C1.05268 1.24021 1 1.36739 1 1.5C1 1.77614 0.776142 2 0.5 2C0.223858 2 0 1.77614 0 1.5C0 1.10218 0.158035 0.720644 0.43934 0.43934Z M8 0.5C8 0.223858 8.22386 0 8.5 0C8.89782 0 9.27936 0.158035 9.56066 0.43934C9.84196 0.720644 10 1.10217 10 1.5C10 1.77614 9.77614 2 9.5 2C9.22386 2 9 1.77614 9 1.5C9 1.36739 8.94732 1.24022 8.85355 1.14645C8.75978 1.05268 8.63261 1 8.5 1C8.22386 1 8 0.776142 8 0.5Z M3.5 0.5C3.5 0.223858 3.72386 0 4 0H6C6.27614 0 6.5 0.223858 6.5 0.5C6.5 0.776142 6.27614 1 6 1H4C3.72386 1 3.5 0.776142 3.5 0.5Z M0.5 3.5C0.776142 3.5 1 3.72386 1 4V6C1 6.27614 0.776142 6.5 0.5 6.5C0.223858 6.5 0 6.27614 0 6V4C0 3.72386 0.223858 3.5 0.5 3.5Z M9 4.5C9 4.22386 9.22386 4 9.5 4H12.5C12.8978 4 13.2794 4.15804 13.5607 4.43934C13.842 4.72064 14 5.10217 14 5.5V12.5C14 12.8978 13.842 13.2794 13.5607 13.5607C13.2794 13.842 12.8978 14 12.5 14H5.5C5.10217 14 4.72064 13.842 4.43934 13.5607C4.15804 13.2794 4 12.8978 4 12.5V9.5C4 9.22386 4.22386 9 4.5 9H8.5C8.63261 9 8.75979 8.94732 8.85355 8.85355C8.94732 8.75979 9 8.63261 9 8.5V4.5ZM10 5V8.5C10 8.89783 9.84196 9.27936 9.56066 9.56066C9.27936 9.84196 8.89783 10 8.5 10H5V12.5C5 12.6326 5.05268 12.7598 5.14645 12.8536C5.24022 12.9473 5.36739 13 5.5 13H12.5C12.6326 13 12.7598 12.9473 12.8536 12.8536C12.9473 12.7598 13 12.6326 13 12.5V5.5C13 5.36739 12.9473 5.24022 12.8536 5.14645C12.7598 5.05268 12.6326 5 12.5 5H10Z"></path>
</svg>
}

export const CollectionsIcon:React.FC<{}> = () => {
return <svg width={11} height={15} viewBox="0 0 11 15">
<path d="M7 1C3.68629 1 1 3.68629 1 7C1 10.3137 3.68629 13 7 13C7.27614 13 7.5 13.2239 7.5 13.5C7.5 13.7761 7.27614 14 7 14C3.13401 14 0 10.866 0 7C0 3.13401 3.13401 0 7 0C10.866 0 14 3.13401 14 7C14 7.27614 13.7761 7.5 13.5 7.5C13.2239 7.5 13 7.27614 13 7C13 3.68629 10.3137 1 7 1Z M13.3237 8.59131C13.5856 8.679 13.7268 8.96235 13.6391 9.2242C13.5505 9.48866 13.4466 9.74606 13.3284 9.99533C13.2101 10.2449 12.912 10.3512 12.6624 10.2329C12.4129 10.1146 12.3065 9.81647 12.4248 9.56695C12.5261 9.35345 12.615 9.13305 12.6908 8.90666C12.7785 8.64481 13.0619 8.50362 13.3237 8.59131ZM12.3707 10.6962C12.5854 10.8699 12.6186 11.1847 12.445 11.3994C12.0963 11.8305 11.6975 12.2192 11.2574 12.5569C11.0383 12.725 10.7244 12.6837 10.5563 12.4646C10.3882 12.2455 10.4296 11.9316 10.6487 11.7635C11.0262 11.4739 11.3684 11.1403 11.6675 10.7705C11.8412 10.5558 12.156 10.5226 12.3707 10.6962ZM10.0856 12.7443C10.1974 12.9968 10.0833 13.2921 9.83081 13.4038C9.57865 13.5155 9.31864 13.6127 9.05183 13.6943C8.78778 13.7752 8.5082 13.6267 8.42736 13.3626C8.34652 13.0986 8.49504 12.819 8.75908 12.7381C8.98748 12.6682 9.2101 12.585 9.42604 12.4894C9.67855 12.3777 9.97386 12.4917 10.0856 12.7443Z"></path>
</svg>
}

export const UIElementsIcon:React.FC<{}> = () => {
return <svg width={11} height={15} viewBox="0 0 11 15">
<path d="M0 1.5C0 0.947715 0.447715 0.5 1 0.5H5C5.55228 0.5 6 0.947715 6 1.5V4.5C6 5.05228 5.55228 5.5 5 5.5H1C0.447715 5.5 0 5.05228 0 4.5V1.5ZM5 1.5H1V4.5H5V1.5Z M7.5 1.5C7.5 0.947715 7.94772 0.5 8.5 0.5H10.5C11.0523 0.5 11.5 0.947715 11.5 1.5V4.5C11.5 5.05228 11.0523 5.5 10.5 5.5H8.5C7.94772 5.5 7.5 5.05228 7.5 4.5V1.5ZM10.5 1.5H8.5V4.5H10.5V1.5Z M13.5 0.5C13.7761 0.5 14 0.723858 14 1V5C14 5.27614 13.7761 5.5 13.5 5.5C13.2239 5.5 13 5.27614 13 5V1C13 0.723858 13.2239 0.5 13.5 0.5Z"></path>
</svg>
}

export const BlogIcon:React.FC<{}> = () => {
return <svg width={11} height={15} viewBox="0 0 11 15">
<path d="M13.5 11C13.7761 11 14 11.2239 14 11.5V12.5C14 12.8978 13.842 13.2794 13.5607 13.5607C13.2794 13.842 12.8978 14 12.5 14H11.5C11.2239 14 11 13.7761 11 13.5C11 13.2239 11.2239 13 11.5 13H12.5C12.6326 13 12.7598 12.9473 12.8536 12.8536C12.9473 12.7598 13 12.6326 13 12.5V11.5C13 11.2239 13.2239 11 13.5 11Z M13.5 4C13.7761 4 14 4.22386 14 4.5V8.5C14 8.77614 13.7761 9 13.5 9C13.2239 9 13 8.77614 13 8.5V4.5C13 4.22386 13.2239 4 13.5 4Z M5 13.5C5 13.2239 5.22386 13 5.5 13H8.5C8.77614 13 9 13.2239 9 13.5C9 13.7761 8.77614 14 8.5 14H5.5C5.22386 14 5 13.7761 5 13.5Z M1.5 1C1.36739 1 1.24021 1.05268 1.14645 1.14645C1.05268 1.24021 1 1.36739 1 1.5V12.5C1 12.7761 0.776142 13 0.5 13C0.223858 13 0 12.7761 0 12.5V1.5C0 1.10218 0.158035 0.720644 0.43934 0.43934C0.720644 0.158035 1.10218 0 1.5 0H12.5C12.7761 0 13 0.223858 13 0.5C13 0.776142 12.7761 1 12.5 1H1.5Z"></path>
</svg>
}
58 changes: 29 additions & 29 deletions app/_components/header/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,37 +23,37 @@ const Header:React.FC<HeaderProps> = ({}) => {
return (
<header className="fixed w-full h-full mt-2">
<div className={`inner rounded-lg h-fit flex flex-col items-center transition ${active ? 'active' : ''}`}>
<div className="flex h-[54px] w-full items-center ps-1.5 pe-1.5 ">
<div className="flex h-[54px] w-full bg-transparent items-center ps-1.5 pe-1.5 ">
{/* Hamburger menu */}
<svg width={16} viewBox="0 0 20 20" className="block xl:hidden mr-3">
<path d="M19.5,17.6H0.5c-0.3,0-0.5-0.2-0.5-0.5c0-0.3,0.2-0.5,0.5-0.5h18.9c0.3,0,0.5,0.2,0.5,0.5C20,17.4,19.8,17.6,19.5,17.6z M19.5,10.5H0.5C0.2,10.5,0,10.3,0,10s0.2-0.5,0.5-0.5h18.9c0.3,0,0.5,0.2,0.5,0.5S19.8,10.5,19.5,10.5z M19.5,3.4H0.5C0.2,3.4,0,3.2,0,2.9s0.2-0.5,0.5-0.5h18.9c0.3,0,0.5,0.2,0.5,0.5S19.8,3.4,19.5,3.4z"></path>
</svg>
{/* Logo */}
<div className="flex items-center justify-between">
<Link href={"/"}>
<svg width="30" height="16" viewBox="0 0 30 16">
<path d="m18.4 0-2.803 10.855L12.951 0H9.34L6.693 10.855 3.892 0H0l5.012 15.812h3.425l2.708-10.228 2.709 10.228h3.425L22.29 0h-3.892ZM24.77 13.365c0 1.506 1.12 2.635 2.615 2.635C28.879 16 30 14.87 30 13.365c0-1.506-1.12-2.636-2.615-2.636s-2.615 1.13-2.615 2.636Z"></path>
</svg>
</Link>
</div>
{/* Navigation */}
<Navigation display={active} handleToggle={handleToggle}/>
{/* Search Bar */}
<SearchBar handleToggle={handleToggle} state={active}/>
{/* Login / Signup */}
<div className="flex items-center justify-between h-full gap-4 ml-5">
<Link href={"/"} className="hidden sm:flex items-center justify-between font-bold text-base">Log in</Link>
<Link href={"/"} className="hidden sm:flex items-center justify-between font-bold text-base">Sign Up</Link>
<svg width={20} viewBox="0 0 20 20" className="block sm:hidden">
<path d="M18.5,13.5L15.7,17l-1.9-1.7l-1.4,1.5l3.4,3.2l4.1-5.2L18.5,13.5z"></path>
<path d="M14.2,11c-0.9-0.4-1.8-0.7-2.8-0.8c2.1-0.6,3.7-2.6,3.7-5C15.2,2.3,12.8,0,10,0C7.1,0,4.8,2.3,4.8,5.2 c0,2.3,1.6,4.3,3.7,5C3.7,10.9,0,15,0,20h2c0-4.4,3.6-8,8-8c1.3,0,2.6,0.3,3.6,0.9L14.2,11L14.2,11z M6.8,5.2C6.8,3.4,8.2,2,10,2 c1.7,0,3.2,1.4,3.2,3.2c0,1.7-1.4,3.2-3.2,3.2C8.2,8.3,6.8,6.9,6.8,5.2z"></path>
<svg width={16} viewBox="0 0 20 20" className="block xl:hidden mr-3">
<path d="M19.5,17.6H0.5c-0.3,0-0.5-0.2-0.5-0.5c0-0.3,0.2-0.5,0.5-0.5h18.9c0.3,0,0.5,0.2,0.5,0.5C20,17.4,19.8,17.6,19.5,17.6z M19.5,10.5H0.5C0.2,10.5,0,10.3,0,10s0.2-0.5,0.5-0.5h18.9c0.3,0,0.5,0.2,0.5,0.5S19.8,10.5,19.5,10.5z M19.5,3.4H0.5C0.2,3.4,0,3.2,0,2.9s0.2-0.5,0.5-0.5h18.9c0.3,0,0.5,0.2,0.5,0.5S19.8,3.4,19.5,3.4z"></path>
</svg>
</div>
{/* Additional Buttons */}
<div className="hidden lg:flex items-center justify-between gap-4 ml-5">
<Button text="Be Pro" type={ButtonType.DEFAULT} />
<Button text="Submit Website" type={ButtonType.BUTTON_OUTLINE} />
</div>
{/* Logo */}
<div className="flex items-center justify-between">
<Link href={"/"}>
<svg width="30" height="16" viewBox="0 0 30 16">
<path d="m18.4 0-2.803 10.855L12.951 0H9.34L6.693 10.855 3.892 0H0l5.012 15.812h3.425l2.708-10.228 2.709 10.228h3.425L22.29 0h-3.892ZM24.77 13.365c0 1.506 1.12 2.635 2.615 2.635C28.879 16 30 14.87 30 13.365c0-1.506-1.12-2.636-2.615-2.636s-2.615 1.13-2.615 2.636Z"></path>
</svg>
</Link>
</div>
{/* Navigation */}
<Navigation display={active} handleToggle={handleToggle}/>
{/* Search Bar */}
<SearchBar handleToggle={handleToggle} state={active}/>
{/* Login / Signup */}
<div className="flex items-center justify-between h-full gap-4 ml-5">
<Link href={"/"} className="hidden sm:flex items-center justify-between font-bold text-base">Log in</Link>
<Link href={"/"} className="hidden sm:flex items-center justify-between font-bold text-base">Sign Up</Link>
<svg width={20} viewBox="0 0 20 20" className="block sm:hidden">
<path d="M18.5,13.5L15.7,17l-1.9-1.7l-1.4,1.5l3.4,3.2l4.1-5.2L18.5,13.5z"></path>
<path d="M14.2,11c-0.9-0.4-1.8-0.7-2.8-0.8c2.1-0.6,3.7-2.6,3.7-5C15.2,2.3,12.8,0,10,0C7.1,0,4.8,2.3,4.8,5.2 c0,2.3,1.6,4.3,3.7,5C3.7,10.9,0,15,0,20h2c0-4.4,3.6-8,8-8c1.3,0,2.6,0.3,3.6,0.9L14.2,11L14.2,11z M6.8,5.2C6.8,3.4,8.2,2,10,2 c1.7,0,3.2,1.4,3.2,3.2c0,1.7-1.4,3.2-3.2,3.2C8.2,8.3,6.8,6.9,6.8,5.2z"></path>
</svg>
</div>
{/* Additional Buttons */}
<div className="hidden lg:flex items-center justify-between gap-4 ml-5">
<Button text="Be Pro" type={ButtonType.DEFAULT} />
<Button text="Submit Website" type={ButtonType.BUTTON_OUTLINE} />
</div>
</div>
{/* Navigation Dropdown */}
<NavigationDropdown display={active}/>
Expand Down
2 changes: 1 addition & 1 deletion app/_components/navigation/Navigation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export type NavigationProps = {
const Navigation:React.FC<NavigationProps> = ({ display, handleToggle }) => {
return (
// Navigation Wrapper
<nav className={`hidden xl:flex items-center justify-between ms-[60px] gap-5 transition ${display ? 'hidden' : ''}`}>
<nav className={`hidden xl:flex items-center justify-between ms-[60px] gap-5 transition ${display ? '!hidden' : ''}`}>
{
defaultNavigationLinks.map(({routeTo, name, dropdown}, index) => {
return (
Expand Down
120 changes: 118 additions & 2 deletions app/_components/navigationDropdown/NavigationDropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,127 @@
import { BlogIcon, CollectionsIcon, TechnologiesIcon, TrendingIcon, UIElementsIcon, WebsitesIcon } from "@/app/_common/icons/Icons"
import Link from "next/link"
import { useState } from "react"

export const navigationData = [
{
name: "Trending",
Icon: TrendingIcon,
subLinks: [
{
name: "Portfolio Websites",
count: 8657
},
{
name: "Free Fonts",
count: 288
},
{
name: "Animated Websites",
count: 10351
},
{
name: "Sites of the Day",
count: 6137
},
{
name: "Scrolling",
count: 5135
},
{
name: "Portfolio Websites",
count: 5071
},
{
name: "One Page Design",
count: 6223
},
{
name: "E-commerce layouts",
count: 5583
},
{
name: "Architecture Websites",
count: 2383
},
{
name: "Photography Websites",
count: 1027
}
]
},
{
name: "Websites",
Icon: WebsitesIcon
},
{
name: "Technologies",
Icon: TechnologiesIcon
},
{
name: "Collections",
Icon: CollectionsIcon
},
{
name: "UI Elements",
Icon: UIElementsIcon
},
{
name: "Blog",
Icon: BlogIcon
}
]

export type NavigationDropdownProps = {
display: boolean
}

const NavigationDropdown:React.FC<NavigationDropdownProps> = ({ display }) => {
return (
<div className={`w-full min-h-[450px] bg-grey rounded-lg transition opacity-0 ${display ? 'flex opacity-1': ''}`}>

const [header, setActiveHeader] = useState<string>(navigationData[0].name);

const changeActiveHeader = (name: string) => {
setActiveHeader(name)
}

const activeHeader = navigationData.find((item) => item.name === header)

return (
<div className={`w-full h-full ${display ? 'opacity-100 visible' : 'opacity-0 invisible'}`}>
<div className="min-h-[450px] pt-0 pr-[424px] pb-[12px] pl-[57px]">
<nav className="flex justify-between w-full h-full">
<ul>
{
navigationData.map(({ name, Icon }, index) => {
return (
<li key={index} className={`${index===0 ? '' : 'mt-1'}`} onClick={() => changeActiveHeader(name)}>
<Link href={"/"}>
<span className={`flex font-normal items-center gap-3 bg-transparent transparent hover:bg-white h-[40px] min-w-[180px] px-4 rounded-lg ${activeHeader?.name === name ? 'bg-white' : 'bg-transparent'}`}>
<Icon />
{ name }
</span>
</Link>
</li>
)
})
}
</ul>
<ul className="flex justify-center items-between flex-1 flex-col">
{
activeHeader?.subLinks?.map((item, index) => {
return (
<li key={index}>
<span className="flex items-center justify-between gap-3 bg-transparent transparent hover:bg-white h-[40px] min-w-[180px] px-4 rounded-lg">
<p className="flex items-center font-light">{item.name}</p>
<p className="flex items-center font-light">{item.count}</p>
</span>
</li>
)
})
}
</ul>
</nav>

</div>
</div>
)
}
Expand Down
Loading