From fe6723282688451877f40c84aa2505f23f72f432 Mon Sep 17 00:00:00 2001
From: Abdulrahman Goni <abdulrhmangoni@gmail.com>
Date: Tue, 7 May 2024 00:30:40 +0300
Subject: [PATCH] Change `Button` component in small screens sidebar to `a` tag

Change `Button` component in small screens sidebar to `a` tag to avoid
the an unnecessary nested ripple effect that `Button` component causes
because it is inside `MenuItem` component which has a ripple effect.

Give the `a` tag `classes.unstyledLink` class to overwrite its default styles.

Remove `.sidebarLink` class from `navbar` styles file because the only
component that uses this class has been changed.
---
 components/navbar/index.tsx        | 6 +++---
 components/navbar/style.module.css | 5 -----
 2 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/components/navbar/index.tsx b/components/navbar/index.tsx
index 84af81e4..7bd231fe 100644
--- a/components/navbar/index.tsx
+++ b/components/navbar/index.tsx
@@ -153,13 +153,13 @@ export default function Navbar({
           </ListItem>
           {menu.map((item) => (
             <MenuItem key={item.name}>
-              <Button
+              <a
                 href={item.href}
                 target={item.target}
-                className={classes.sidebarLink}
+                className={classes.unstyledLink}
               >
                 {item.name}
-              </Button>
+              </a>
             </MenuItem>
           ))}
           <MenuItem>
diff --git a/components/navbar/style.module.css b/components/navbar/style.module.css
index 4abca6f1..825dea34 100644
--- a/components/navbar/style.module.css
+++ b/components/navbar/style.module.css
@@ -65,11 +65,6 @@
   height: 1em;
 }
 
-.sidebarLink {
-  padding: 0px !important;
-  min-width: auto !important;
-}
-
 .unstyledLink {
   color: #fff;
   text-decoration: none;