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

refactor(Sidebar): use Next's <Link /> instead of <a />

Browse source
This commit is contained in:
Vojtěch Mareš 2023-06-25 10:28:07 +02:00
parent 349b73a992
commit 3884ca17a6
Signed by: vojtech.mares
GPG key ID: C6827B976F17240D
1 changed files with 9 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/components/Sidebar.tsx
View file

@ -1,3 +1,4 @@
import Link from 'next/link';
import { Fragment, useState } from 'react'; import { Fragment, useState } from 'react';
import { Dialog, Transition } from '@headlessui/react'; import { Dialog, Transition } from '@headlessui/react';
import { import {
@ -82,7 +83,7 @@ export function Sidebar() {
<ul role="list" className="-mx-2 space-y-1"> <ul role="list" className="-mx-2 space-y-1">
{navigation.map((item) => ( {navigation.map((item) => (
<li key={item.name}> <li key={item.name}>
<a <Link
href={item.href} href={item.href}
className={classNames( className={classNames(
item.current item.current
@ -93,7 +94,7 @@ export function Sidebar() {
> >
<item.icon className="h-6 w-6 shrink-0" aria-hidden="true" /> <item.icon className="h-6 w-6 shrink-0" aria-hidden="true" />
{item.name} {item.name}
</a> </Link>
</li> </li>
))} ))}
</ul> </ul>
@ -120,7 +121,7 @@ export function Sidebar() {
<ul role="list" className="-mx-2 space-y-1"> <ul role="list" className="-mx-2 space-y-1">
{navigation.map((item) => ( {navigation.map((item) => (
<li key={item.name}> <li key={item.name}>
<a <Link
href={item.href} href={item.href}
className={classNames( className={classNames(
item.current item.current
@ -131,19 +132,19 @@ export function Sidebar() {
> >
<item.icon className="h-6 w-6 shrink-0" aria-hidden="true" /> <item.icon className="h-6 w-6 shrink-0" aria-hidden="true" />
{item.name} {item.name}
</a> </Link>
</li> </li>
))} ))}
</ul> </ul>
</li> </li>
<li className="-mx-6 mt-auto"> <li className="-mx-6 mt-auto">
<a <Link
href="#" href="#"
className="flex items-center gap-x-4 px-6 py-3 text-sm font-semibold leading-6 text-white hover:bg-gray-800" className="flex items-center gap-x-4 px-6 py-3 text-sm font-semibold leading-6 text-white hover:bg-gray-800"
> >
<ArrowRightOnRectangleIcon className="h-6 w-6" /> <ArrowRightOnRectangleIcon className="h-6 w-6" />
<span>Sign out</span> <span>Sign out</span>
</a> </Link>
</li> </li>
</ul> </ul>
</nav> </nav>
@ -156,10 +157,10 @@ export function Sidebar() {
<Bars3Icon className="h-6 w-6" aria-hidden="true" /> <Bars3Icon className="h-6 w-6" aria-hidden="true" />
</button> </button>
<div className="flex-1 text-sm font-semibold leading-6 text-white">Dashboard</div> <div className="flex-1 text-sm font-semibold leading-6 text-white">Dashboard</div>
<a href="#"> <Link href="#">
<span className="sr-only">Sign out</span> <span className="sr-only">Sign out</span>
<ArrowRightOnRectangleIcon className="h-6 w-6 text-white" /> <ArrowRightOnRectangleIcon className="h-6 w-6 text-white" />
</a> </Link>
</div> </div>
</> </>
) )