-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feature/46 desktop-navigation with example (#50)
* feat: Create Desktop navigation with example in theme * chore: Add "use client" in nav-context.tsx
- Loading branch information
1 parent
363859a
commit 69cad1c
Showing
10 changed files
with
256 additions
and
38 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| "use client" | ||
| import React, { createContext, useState, useContext, ReactNode } from "react" | ||
|
|
||
| type NavState = { | ||
| navActive: boolean | ||
| setNavActive: React.Dispatch<React.SetStateAction<boolean>> | ||
| } | ||
|
|
||
| const NavContext = createContext<NavState | undefined>(undefined) | ||
|
|
||
| /** | ||
| * @description NavProvider is a context provider that has a single shared state about whether any desktop nav item is active or not. | ||
| */ | ||
| export const NavProvider = ({ children }: { children: ReactNode }) => { | ||
| const [navActive, setNavActive] = useState<boolean>(false) | ||
| return ( | ||
| <NavContext.Provider value={{ navActive, setNavActive }}> | ||
| {children} | ||
| </NavContext.Provider> | ||
| ) | ||
| } | ||
|
|
||
| export const useNavContext = () => { | ||
| const context = useContext(NavContext) | ||
| if (!context) { | ||
| throw new Error("useAppContext must be used within a NavProvider") | ||
| } | ||
| return context | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| import React, { useState } from "react" | ||
| import { Transition } from "@headlessui/react" | ||
| import { useNavContext } from "./nav-context" | ||
|
|
||
| import type { NavItem } from "./nav" | ||
| import Link from "next/link" | ||
|
|
||
| type NavDesktopItemsProps = { | ||
| navItem: NavItem | ||
| } | ||
| const NavDesktopItems: React.FC<NavDesktopItemsProps> = ({ navItem }) => { | ||
| const [isShowing, setIsShowing] = useState(false) | ||
| const { navActive, setNavActive } = useNavContext() | ||
|
|
||
| const showDesktopItems = () => { | ||
| setIsShowing(true) | ||
| setNavActive(true) | ||
| } | ||
|
|
||
| const hideDesktopItems = () => { | ||
| setIsShowing(false) | ||
| setNavActive(false) | ||
| } | ||
|
|
||
| return ( | ||
| <div className="isolate z-50 pr-8" onMouseLeave={hideDesktopItems}> | ||
| <div className="mx-auto max-w-7xl"> | ||
| <div | ||
| onMouseEnter={showDesktopItems} | ||
| className="cursor-pointer inline-flex items-center gap-x-1 text-sm/6 font-semibold text-neutral py-4" | ||
| > | ||
| {navItem.title} | ||
| </div> | ||
| </div> | ||
|
|
||
| <Transition | ||
| show={isShowing} | ||
| enter="transition delay-300 duration-300 ease-out" | ||
| enterFrom="opacity-0" | ||
| enterTo="translate-y-0 opacity-100" | ||
| leave="transition duration-75 ease-in" | ||
| leaveFrom="translate-y-0 opacity-100" | ||
| leaveTo="opacity-0" | ||
| > | ||
| <div className="absolute inset-x-0 top-14 -z-10 py-10"> | ||
| <div className="flex justify-start items-start gap-x-4 text-neutral"> | ||
| {navItem.items?.map((item, index) => ( | ||
| <div | ||
| className="grid grid-cols-1 content-start gap-4 pr-2 border-r min-h-72 border-neutral/30 w-1/6" | ||
| key={index} | ||
| > | ||
| <h3 className="text-16 leading-5 font-semibold"> | ||
| {item.title} | ||
| </h3> | ||
| {item.items?.map( | ||
| (subItem, subIndex) => | ||
| subItem.url && ( | ||
| <Link | ||
| className="font-normal" | ||
| key={subIndex} | ||
| href={subItem.url} | ||
| > | ||
| {subItem.title} | ||
| </Link> | ||
| ), | ||
| )} | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| </Transition> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default NavDesktopItems |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| export type NavItem = { | ||
| title: string | ||
| url?: string | ||
| items?: NavItem[] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.