From 3884ca17a67cb123b490b427dd861a19b91e035f Mon Sep 17 00:00:00 2001
From: Vojtech Mares <iam@vojtechmares.com>
Date: Sun, 25 Jun 2023 10:28:07 +0200
Subject: [PATCH] refactor(Sidebar): use Next's <Link /> instead of <a />

---
 src/components/Sidebar.tsx | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 1ddf1ca..7b554c1 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -1,3 +1,4 @@
+import Link from 'next/link';
 import { Fragment, useState } from 'react';
 import { Dialog, Transition } from '@headlessui/react';
 import {
@@ -82,7 +83,7 @@ export function Sidebar() {
                         <ul role="list" className="-mx-2 space-y-1">
                           {navigation.map((item) => (
                             <li key={item.name}>
-                              <a
+                              <Link
                                 href={item.href}
                                 className={classNames(
                                   item.current
@@ -93,7 +94,7 @@ export function Sidebar() {
                               >
                                 <item.icon className="h-6 w-6 shrink-0" aria-hidden="true" />
                                 {item.name}
-                              </a>
+                              </Link>
                             </li>
                           ))}
                         </ul>
@@ -120,7 +121,7 @@ export function Sidebar() {
                 <ul role="list" className="-mx-2 space-y-1">
                   {navigation.map((item) => (
                     <li key={item.name}>
-                      <a
+                      <Link
                         href={item.href}
                         className={classNames(
                           item.current
@@ -131,19 +132,19 @@ export function Sidebar() {
                       >
                         <item.icon className="h-6 w-6 shrink-0" aria-hidden="true" />
                         {item.name}
-                      </a>
+                      </Link>
                     </li>
                   ))}
                 </ul>
               </li>
               <li className="-mx-6 mt-auto">
-                <a
+                <Link
                   href="#"
                   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" />
                   <span>Sign out</span>
-                </a>
+                </Link>
               </li>
             </ul>
           </nav>
@@ -156,10 +157,10 @@ export function Sidebar() {
           <Bars3Icon className="h-6 w-6" aria-hidden="true" />
         </button>
         <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>
           <ArrowRightOnRectangleIcon className="h-6 w-6 text-white" />
-        </a>
+        </Link>
       </div>
     </>
   )