style upgrades

src/features/core/components/nav-link/nav-link.tsx

@@ -35,6 +35,8 @@ export const NavLink = ({
       to={href}
       className={styles.navLinkBox}
       p={{ base: 0, sm: 8 }}
+      aria-label={label}
+      aria-current={isActive ? "page" : undefined}
     >
       <Flex
         direction={{ base: "column", md: "row" }}

src/features/core/components/nav-link/styles.module.css

@@ -2,5 +2,26 @@
     text-decoration: none;
     border-radius: var(--mantine-radius-md);
     color: unset;
+    min-width: 2.75rem;
+    min-height: 2.75rem;
     width: fit-content;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.navLinkBox svg,
+.navLinkBox p {
+    transition: color 150ms ease-out;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    .navLinkBox {
+        transition: transform 150ms cubic-bezier(0.32, 0.72, 0, 1);
+    }
+
+    .navLinkBox:active {
+        transform: scale(0.92);
+    }
 }