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

@@ -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>

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;