admin-aaw/snapify-authentik
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

add activeLink indicator in header

Browse source
This commit is contained in:
MarconLP 2023-05-01 22:32:34 +02:00
parent acced8589d
commit 5404c173bf
No known key found for this signature in database
GPG key ID: A08A9C8B623F5EA5
1 changed files with 8 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/components/Header.tsx
View file

@ -1,9 +1,10 @@
import Link from "next/link";
import { useEffect, useState } from "react";
import { Bars3Icon } from "@heroicons/react/24/outline";
import { useRouter } from "next/router";
const navigation = [
{ name: "Features", href: "/#features" },
{ name: "Overview", href: "/" },
{ name: "Pricing", href: "/pricing" },
{ name: "Discord", href: "https://discord.com/invite/invalid" },
];
@ -11,6 +12,7 @@ const navigation = [
export default function Header() {
const [attop, setAtTop] = useState(true);
const [navbarOpen, setNavbarOpen] = useState(false);
const router = useRouter();
const closeNav = () => {
setNavbarOpen(false);
@ -42,7 +44,11 @@ export default function Header() {
<div className="hidden md:block">
{navigation.map(({ href, name }) => (
<Link key={name} href={href}>
<span className="mx-[6px] cursor-pointer p-2 text-sm text-[#666] hover:text-black">
<span
className={`mx-[6px] cursor-pointer rounded-full p-2 text-sm text-[#666] hover:text-black ${
router.asPath === href ? "bg-[#00000014]" : ""
}`}
>
{name}
</span>
</Link>