Fix: nav menu mobile design

apps/website/src/components/Menu.astro

@@ -12,12 +12,12 @@ const { className, title } = Astro.props;
 
 <div class={classNames("relative group flex gap-2 items-center", className)}>
   <div class="hidden group-hover:grid z-10 absolute">
-    <div class="bg-[#3C3843E5] min-w-56 mt-[214px] p-4 gap-2.5 grid rounded-lg">
+    <div class="bg-[#3C3843E5] mt-[214px] p-4 gap-2.5 grid rounded-lg">
       <slot />
     </div>
   </div>
   <button
-    class="whitespace-nowrap font-medium text-2xl md:text-lg text-[#E8E8E8] hover:text-white"
+    class="whitespace-nowrap font-medium text-2xl md:text-lg text-light-gray hover:text-white"
   >
     {title}
   </button>

apps/website/src/components/MenuItem.astro

@@ -1,3 +1,5 @@
-<div class="whitespace-nowrap font-medium text-2xl md:text-lg text-[#E8E8E8] hover:text-white">
+<div
+  class="whitespace-nowrap font-medium text-2xl md:text-lg text-light-gray hover:text-white"
+>
   <slot />
 </div>

apps/website/src/components/navigation.astro

@@ -10,6 +10,21 @@ const optimizedLogo = await getImage({
   height: 51,
   format: "webp",
 });
+
+const caseStudies = [
+  {
+    title: "Refactoring Legacy UI",
+    href: "/blog/how-we-rebuilt-a-legacy-ui-with-zero-downtime",
+  },
+  {
+    title: "Implementing billing system",
+    href: "/blog/using-lago-to-create-a-flexible-billing-system",
+  },
+  {
+    title: "Empowering Frontend Migration",
+    href: "/blog/migrating-an-enterprise-app-from-angularjs-to-react",
+  },
+];
 ---
 
 <header
@@ -85,25 +100,29 @@ const optimizedLogo = await getImage({
     <ul class="hidden items-center md:flex">
       <li id="for-ctos" data-navhidden="true" class="m-2">
         <a
-          class="whitespace-nowrap font-medium text-2xl md:text-lg text-[#E8E8E8] hover:text-white"
+          class="whitespace-nowrap font-medium text-2xl md:text-lg text-light-gray hover:text-white"
           href="/for-ctos"
         >
           For CTOs
         </a>
       </li>
       <li id="blog" data-navhidden="true" class="m-2">
         <a
-          class="whitespace-nowrap font-medium text-2xl md:text-lg text-[#E8E8E8] hover:text-white"
+          class="whitespace-nowrap font-medium text-2xl md:text-lg text-light-gray hover:text-white"
           href="/blog"
         >
           Blog
         </a>
       </li>
       <li id="case-study" data-navhidden="true" class="m-2">
         <Menu title={"Case Studies"}>
-          <MenuItem><a href="/blog/how-we-rebuilt-a-legacy-ui-with-zero-downtime">Legacy UI</a></MenuItem>
-          <MenuItem><a href="/blog/using-lago-to-create-a-flexible-billing-system">Billing System</a></MenuItem>
-          <MenuItem><a href="/blog/migrating-an-enterprise-app-from-angularjs-to-react">Frontend Migration</a></MenuItem>
+          {
+            caseStudies.map((item) => (
+              <MenuItem>
+                <a href={item.href}>{item.title}</a>
+              </MenuItem>
+            ))
+          }
         </Menu>
       </li>
       <li id="book-a-call-container" class="ml-auto pr-2">
@@ -131,25 +150,32 @@ const optimizedLogo = await getImage({
   </nav>
   <div
     id="mobile-list"
-    class="relative px-7 py-4 gap-5 bg-secondary hidden flex-col items-center h-full peer/menu-toggle"
+    class="relative px-7 py-4 gap-5 bg-secondary hidden flex-col h-full peer/menu-toggle text-left"
   >
     <a
-      class="whitespace-nowrap font-medium text-2xl md:text-lg text-[#E8E8E8] hover:text-white min-h-10"
+      class="whitespace-nowrap font-medium text-2xl md:text-lg text-light-gray hover:text-white min-h-10"
       href="/for-ctos"
     >
       For CTOs
     </a>
     <a
-      class="whitespace-nowrap font-medium text-2xl md:text-lg text-[#E8E8E8] hover:text-white min-h-10"
+      class="whitespace-nowrap font-medium text-2xl md:text-lg text-light-gray hover:text-white min-h-10"
       href="/blog"
     >
       Blog
     </a>
-    <div class="whitespace-nowrap flex flex-col gap-3 font-medium text-2xl md:text-lg text-[#E8E8E8] hover:text-white min-h-10 items-center">
-      Case Studies
-        <a class="text-xl" href="/blog/how-we-rebuilt-a-legacy-ui-with-zero-downtime">Legacy UI</a>
-        <a class="text-xl" href="/blog/using-lago-to-create-a-flexible-billing-system">Billing System</a>
-        <a class="text-xl" href="/blog/migrating-an-enterprise-app-from-angularjs-to-react">Frontend Migration</a>
+    <div
+      class="whitespace-nowrap flex flex-col gap-3 font-medium text-light-gray"
+    >
+      <span class="uppercase text-lg">Case Studies</span>
+
+      {
+        caseStudies.map((item) => (
+          <a class="text-xl hover:text-white text-wrap min-h-8" href={item.href}>
+            {item.title}
+          </a>
+        ))
+      }
     </div>
     <a
       data-navhidden="true"
@@ -166,7 +192,7 @@ const optimizedLogo = await getImage({
     </a>
     <a
       class="font-medium
-          w-full !h-[40px] items-center px-4 py-2 rounded-md
+          w-full !h-[40px] items-center px-4 py-2 rounded-md mb-5 md:mb-0
           text-base text-center whitespace-nowrap bg-crocoder-yellow text-contrast hover:opacity-90
           inline-block"
       href="/contact"

apps/website/src/layouts/header.astro

@@ -100,15 +100,15 @@ const optimizedLogo = await getImage({
       >
         <li>
           <a
-            class="font-medium text-2xl md:text-lg text-[#E8E8E8] hover:text-white"
+            class="font-medium text-2xl md:text-lg text-light-gray hover:text-white"
             href="/for-ctos"
           >
             For CTOs
           </a>
         </li>
         <li>
           <a
-            class="font-medium text-2xl md:text-lg text-[#E8E8E8] hover:text-white"
+            class="font-medium text-2xl md:text-lg text-light-gray hover:text-white"
             href="/blog"
           >
             Blog

apps/website/tailwind.config.js

@@ -52,6 +52,7 @@ module.exports = {
         contrast: theme.colors.default.theme_color.contrast,
         "crocoder-green": theme.colors.default.theme_color.crocoder_green,
         "crocoder-orange": theme.colors.default.theme_color.crocoder_orange,
+        "light-gray": theme.colors.default.text_color.gray,
       },
       fontSize: {
         base: font_base + "px",

apps/website/theme.json

@@ -16,7 +16,8 @@
       "text_color": {
         "default": "#747577",
         "dark": "#152035",
-        "light": "#a1a5ae"
+        "light": "#a1a5ae",
+        "gray": "#E8E8E8"
       }
     }
   },
@@ -31,4 +32,4 @@
       "base": "16"
     }
   }
-}
+}