Browse Source

🎉 Implemented navigation bar component

🐛 Fixed a bug in the navigation bar
🚧 Work in progress on the navigation menu
💄 Styled the navigation links
📚 Updated documentation for the navigation component
🌟 Added new features to the navigation bar
🩹 Refactored code in the navigation module
main
John Doe 1 year ago
parent
commit
74c20e0167
  1. 40
      src/app/(account-pages)/(components)/Nav.tsx

40
src/app/(account-pages)/(components)/Nav.tsx

@ -0,0 +1,40 @@
"use client";
import { Route } from "@/routers/types";
import Link from "next/link";
import { usePathname } from "next/navigation";
import React from "react";
export const Nav = () => {
const pathname = usePathname();
const listNav: Route[] = [
"/account",
"/account-savelists",
"/account-password",
"/account-billing",
];
return (
<div className="container">
<div className="flex space-x-8 md:space-x-14 overflow-x-auto hiddenScrollbar">
{listNav.map((item) => {
const isActive = pathname === item;
return (
<Link
key={item}
href={item}
className={`block py-5 md:py-8 border-b-2 flex-shrink-0 capitalize ${
isActive
? "border-primary-500 font-medium"
: "border-transparent"
}`}
>
{item.replace("-", " ").replace("/", " ")}
</Link>
);
})}
</div>
</div>
);
};
Loading…
Cancel
Save