freezer/mareshq-backoffice-v1-monolith
Archived
1
0
Fork 0
Code Activity

refactor(Sidebar.tsx): use current path to determine current page

Browse source
This commit is contained in:
Vojtěch Mareš 2023-06-25 15:52:17 +02:00
parent 5cb95a96fa
commit abc85211f4
Signed by: vojtech.mares
GPG key ID: C6827B976F17240D
1 changed files with 4 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/components/Sidebar.tsx
View file

@ -1,4 +1,5 @@
import Link from 'next/link'; import Link from 'next/link';
import { useRouter } from 'next/router';
import { Fragment, useState } from 'react'; import { Fragment, useState } from 'react';
import { Dialog, Transition } from '@headlessui/react'; import { Dialog, Transition } from '@headlessui/react';
import { import {
@ -28,6 +29,7 @@ function classNames(...classes: any) {
export function Sidebar() { export function Sidebar() {
const [sidebarOpen, setSidebarOpen] = useState(false) const [sidebarOpen, setSidebarOpen] = useState(false)
const router = useRouter();
return ( return (
<> <>
@ -86,7 +88,7 @@ export function Sidebar() {
<Link <Link
href={item.href} href={item.href}
className={classNames( className={classNames(
item.current router.pathname === item.href
? 'bg-gray-800 text-white' ? 'bg-gray-800 text-white'
: 'text-gray-400 hover:text-white hover:bg-gray-800', : 'text-gray-400 hover:text-white hover:bg-gray-800',
'group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold' 'group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold'
@ -124,7 +126,7 @@ export function Sidebar() {
<Link <Link
href={item.href} href={item.href}
className={classNames( className={classNames(
item.current router.pathname === item.href
? 'bg-gray-800 text-white' ? 'bg-gray-800 text-white'
: 'text-gray-400 hover:text-white hover:bg-gray-800', : 'text-gray-400 hover:text-white hover:bg-gray-800',
'group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold' 'group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold'