2 files changed, 12 insertions, 5 deletions
diff --git a/src/components/MainNav/MainNav.module.scss b/src/components/MainNav/MainNav.module.scss
index 21c5b9d..3cfb727 100644
--- a/src/components/MainNav/MainNav.module.scss
+++ b/src/components/MainNav/MainNav.module.scss
@@ -99,10 +99,17 @@
   @extend %reset-list;
 
   @include mix.media("screen") {
+    @include mix.dimensions(null, "2xs", "height") {
+      display: grid;
+      grid-template-columns: min-content min-content;
+      max-height: calc(100vh - var(--toolbar-size));
+    }
+
     @include mix.dimensions("md") {
       display: flex;
       flex-flow: row wrap;
       align-items: center;
+      gap: var(--spacing-2xs);
     }
   }
 }
@@ -111,6 +118,7 @@
   --draw-border-width: #{fun.convert-px(4)};
 
   display: block;
+  min-width: fun.convert-px(85);
   padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-2xs);
   background: var(--color-bg);
   background-repeat: no-repeat;
@@ -120,12 +128,8 @@
   text-decoration: none;
 
   @include mix.media("screen") {
-    @include mix.dimensions(null, "2xs", "height") {
-      padding: var(--spacing-2xs) var(--spacing-sm) 0;
-    }
-
     @include mix.dimensions("md") {
-      margin: 0 var(--spacing-2xs);
+      margin: 0;
       background-color: inherit;
       border-radius: 8%;
     }
diff --git a/src/components/MainNav/MainNav.tsx b/src/components/MainNav/MainNav.tsx
index 0339a35..afc4193 100644
--- a/src/components/MainNav/MainNav.tsx
+++ b/src/components/MainNav/MainNav.tsx
@@ -7,6 +7,7 @@ import {
   CVIcon,
   HamburgerIcon,
   HomeIcon,
+  ProjectsIcon,
 } from '@components/Icons';
 import { mainNav } from '@config/nav';
 import styles from './MainNav.module.scss';
@@ -31,6 +32,8 @@ const MainNav = ({
         return <ContactIcon />;
       case 'cv':
         return <CVIcon />;
+      case 'projects':
+        return <ProjectsIcon />;
       default:
         break;
     }