Browse Source

🛠️ Implemented NavMobile component

🚧 Added the NavMobile component to the project
🔗 Linked NavMobile to NavigationItem
 Improved mobile navigation experience
🐛 Fixed minor styling issues
main
John Doe 1 year ago
parent
commit
cea028f5b2
  1. 149
      src/shared/Navigation/NavMobile.tsx

149
src/shared/Navigation/NavMobile.tsx

@ -0,0 +1,149 @@
"use client";
import React from "react";
import ButtonClose from "@/shared/ButtonClose";
import Logo from "@/shared/Logo";
import { Disclosure } from "@headlessui/react";
import { NavItemType } from "./NavigationItem";
import { NAVIGATION_DEMO } from "@/data/navigation";
import ButtonPrimary from "@/shared/ButtonPrimary";
import SocialsList from "@/shared/SocialsList";
import { ChevronDownIcon } from "@heroicons/react/24/solid";
import SwitchDarkMode from "@/shared/SwitchDarkMode";
import Link from "next/link";
import LangDropdown from "@/app/(client-components)/(Header)/LangDropdown";
export interface NavMobileProps {
data?: NavItemType[];
onClickClose?: () => void;
}
const NavMobile: React.FC<NavMobileProps> = ({
data = NAVIGATION_DEMO,
onClickClose,
}) => {
const _renderMenuChild = (item: NavItemType) => {
return (
<ul className="nav-mobile-sub-menu pl-6 pb-1 text-base">
{item.children?.map((i, index) => (
<Disclosure key={i.href + index} as="li">
<Link
href={{
pathname: i.href || undefined,
}}
className="flex px-4 text-neutral-900 dark:text-neutral-200 text-sm font-medium rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-800 mt-0.5"
>
<span
className={`py-2.5 pr-3 ${!i.children ? "block w-full" : ""}`}
>
{i.name}
</span>
{i.children && (
<span
className="flex-1 flex"
onClick={(e) => e.preventDefault()}
>
<Disclosure.Button
as="span"
className="py-2.5 flex justify-end flex-1"
>
<ChevronDownIcon
className="ml-2 h-4 w-4 text-neutral-500"
aria-hidden="true"
/>
</Disclosure.Button>
</span>
)}
</Link>
{i.children && (
<Disclosure.Panel>{_renderMenuChild(i)}</Disclosure.Panel>
)}
</Disclosure>
))}
</ul>
);
};
const _renderItem = (item: NavItemType, index: number) => {
return (
<Disclosure
key={item.id}
as="li"
className="text-neutral-900 dark:text-white"
>
<Link
className="flex w-full px-4 font-medium uppercase tracking-wide text-sm hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg"
href={{
pathname: item.href || undefined,
}}
>
<span
className={`py-2.5 pr-3 ${!item.children ? "block w-full" : ""}`}
>
{item.name}
</span>
{item.children && (
<span className="flex-1 flex" onClick={(e) => e.preventDefault()}>
<Disclosure.Button
as="span"
className="py-2.5 flex items-center justify-end flex-1 "
>
<ChevronDownIcon
className="ml-2 h-4 w-4 text-neutral-500"
aria-hidden="true"
/>
</Disclosure.Button>
</span>
)}
</Link>
{item.children && (
<Disclosure.Panel>{_renderMenuChild(item)}</Disclosure.Panel>
)}
</Disclosure>
);
};
return (
<div className="overflow-y-auto w-full h-screen py-2 transition transform shadow-lg ring-1 dark:ring-neutral-700 bg-white dark:bg-neutral-900 divide-y-2 divide-neutral-100 dark:divide-neutral-800">
<div className="py-6 px-5">
<Logo />
<div className="flex flex-col mt-5 text-neutral-700 dark:text-neutral-300 text-sm">
<span>
Discover the most outstanding articles on all topics of life. Write
your stories and share them
</span>
<div className="flex justify-between items-center mt-4">
<SocialsList itemClass="w-9 h-9 flex items-center justify-center rounded-full bg-neutral-100 text-xl dark:bg-neutral-800 dark:text-neutral-300" />
<span className="block">
<SwitchDarkMode className="bg-neutral-100 dark:bg-neutral-800" />
</span>
</div>
</div>
<span className="absolute right-2 top-2 p-1">
<ButtonClose onClick={onClickClose} />
</span>
</div>
<ul className="flex flex-col py-6 px-2 space-y-1">
{data.map(_renderItem)}
</ul>
<div className="flex items-center justify-between py-6 px-5">
<a
className="inline-block"
href="https://themeforest.net/item/chisfis-online-booking-nextjs-template/43399526"
target="_blank"
rel="noopener noreferrer"
>
<ButtonPrimary>Get Template</ButtonPrimary>
</a>
<LangDropdown
className="flex"
panelClassName="z-10 w-screen max-w-[280px] px-4 mb-3 right-3 bottom-full sm:px-0"
/>
</div>
</div>
);
};
export default NavMobile;
Loading…
Cancel
Save