Fix small details based on Adi's feedback

components/Navbar.module.css

@@ -20,8 +20,9 @@
 }
 
 .logo {
-  margin: 0;
-  padding: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .logo:hover {
@@ -60,6 +61,16 @@
   font-weight: 600;
 }
 
+/* Prevents the menu items from shifting when made bold on hover */
+.navMenu > li > a::before {
+  display: block;
+  content: attr(title);
+  font-weight: 600;
+  height: 0;
+  overflow: hidden;
+  visibility: hidden;
+}
+
 .navMenu > li > a {
   padding: 1rem;
 }
@@ -107,12 +118,12 @@
   background-color: var(--blue-1-20);
 }
 
-.dropdown > li:nth-child(1) > a {
+.dropdown > li:first-child > a {
   padding-top: 1rem;
   border-radius: 0.5rem 0.5rem 0 0;
 }
 
-.dropdown > li:nth-last-child(1) > a {
+.dropdown > li:last-child > a {
   padding-bottom: 1rem;
   border-radius: 0 0 0.5rem 0.5rem;
 }

components/Navbar.tsx

@@ -60,6 +60,7 @@ function NavItem(props: NavLink) {
     <>
       <Link href={props.route}>
         <a
+          title={props.name}
           className={
             router.pathname === props.route ||
             ((props.submenu?.length ?? 0) > 0 &&
@@ -91,14 +92,13 @@ function NavItem(props: NavLink) {
   );
 }
 
-function Navbar() {
+export function Navbar() {
   return (
     <nav className={styles.navbar}>
       <div className={styles.navContent}>
         <Link href="/">
-          <a>
+          <a className={styles.logo}>
             <Image
-              className={styles.logo}
               src="/images/logo-icon.png"
               width={96}
               height={42}
@@ -123,5 +123,3 @@ function Navbar() {
     </nav>
   );
 }
-
-export default Navbar;

pages/_app.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { AppProps } from "next/app";
 import { MDXProvider } from "@mdx-js/react";
 import { ThemeProvider } from "../components/theme";
-import Navbar from "../components/Navbar";
+import { Navbar } from "../components/Navbar";
 import "./_app.css";
 import "./font.css";