From c44e4e5a706f4b9a24ddc2d9360d2c5bf3276e34 Mon Sep 17 00:00:00 2001
From: Mohini <mohini.pandey@cockroachlabs.com>
Date: Tue, 21 Jan 2025 22:00:36 +0530
Subject: [PATCH] added responsiveness , image alignment and main text bold

---
 .../_includes/main-menu-serverless.html       | 289 ++++++++++++------
 1 file changed, 201 insertions(+), 88 deletions(-)

diff --git a/src/current/_includes/main-menu-serverless.html b/src/current/_includes/main-menu-serverless.html
index f5dcd2216bb..941527752fe 100644
--- a/src/current/_includes/main-menu-serverless.html
+++ b/src/current/_includes/main-menu-serverless.html
@@ -1,76 +1,150 @@
 {{ $currentPage := . }}
+<!-- Updated CSS -->
 <style>
   @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
-  .navbar-nav .nav-item .nav-link {
-  font-size: 16px;   /* Adjust this value if needed */
-  color: #0A2540;    /* This is the dark blue color used on the Cockroach Labs site */
-}
-
-.navbar-nav .nav-item .nav-link:hover {
-  color: rgb(105, 51, 255) /* This is the hover color used on the Cockroach Labs site */
-}
+  
+  .navbar {
+    max-height: 84px;
+    padding-left: 210px;
+  }
 
-/* For the "Start Instantly" button */
-.navbar-nav .nav-item .btn-primary {
-  font-size: 16px;   /* Adjust this value if needed */
-}
+  #crdb-icon-name{
+    padding-bottom: 10px;
+  }
+  .navbar-nav .nav-item .nav-link {
+    font-size: 16px;
+    color: #0A2540;
+  }
 
-/* For the dropdown items */
-.dropdown-menu a {
-  font-weight: 400;  /* Slightly less bold for dropdown items */
-  font-size: 16px;   /* Adjust this value if needed */
-  color: #0A2540;
-}
+  /* Dropdown styles */
+  .navbar .dropdown .dropdown-menu {
+    display: none;
+    opacity: 0;
+    transition: opacity 0.5s linear; /* Animate opacity */
+  }
 
-.dropdown-menu a:hover {
-  color:rgb(105, 51, 255);
-}
-  .navbar{
-    max-height: 84px;
-    padding-left: 210px;
+  .navbar .dropdown .dropdown-menu.dropdown-open {
+    display: block;
+    opacity: 1;
   }
-  @media (hover: hover) {
-    .navbar .dropdown:hover .dropdown-menu {
-        display: block;
-    }
-}
-.navbar .dropdown .dropdown-menu {
-  visibility: hidden; /* Hide dropdown */
-  opacity: 0;         /* Make dropdown transparent */
-  transition: opacity 0.5s linear; /* Animate opacity */
-}
 
-@media (hover: hover) {
+  @media (hover: hover) {
   .navbar .dropdown:hover .dropdown-menu {
     visibility: visible; /* Show dropdown on hover */
     opacity: 1;          /* Make dropdown fully visible */
   }
   .main-nav .navbar .dropdown-menu * {
     list-style: none !important;
+    background-color: #fff;
   }
 }
-@media (max-width: 991.98px) {
-  #navbarSupportedContent {
-    position: fixed;
-    top: 84px; /* Adjust this value to match your navbar height */
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: white;
-    z-index: 1040;
-    overflow-y: auto;
+
+  /* Desktop styles */
+  @media (min-width: 1450px) {
+    .nav-icon-md {
+      display: none !important;
+    }
+    .right-nav-text {
+      display: block !important;
+    }
   }
 
-  .navbar-collapse.show {
-    display: block;
+  /* Medium desktop styles */
+  @media (min-width: 993px) and (max-width: 1449px) {
+    .navbar {
+      padding-left: 20px;  /* Reduced left padding */
+      padding-right: 20px; /* Added right padding for balance */
+    }
+    #crdb-icon-name{
+    padding-bottom: 0px;
   }
+    /* Main nav adjustments */
+    .navbar-nav .nav-item {
+      padding: 0 !important;
+      margin:  0 !important;;
+    }
+
+    .navbar-nav .nav-item .nav-link {
+      font-size: 16px;
+      padding: 0.5rem 0.5rem;
+    }
 
-  body.mobile-menu-open {
-    overflow: hidden;
+    /* Right nav adjustments */
+    .right-nav-text {
+      display: none !important;
+    }
+    
+    .nav-icon-md {
+      display: block !important;
+      padding: 0.5rem !important;
+    }
+
+    .btn-primary {
+      padding: 4px 12px !important;
+      font-size: 13px !important;
+      margin-left: 0.5rem !important;
+    }
+
+    .navbar-brand img {
+      width: 140px;
+      height: auto;
+    }
+
+    .navbar-nav .mx-1 {
+      margin-left: 0 !important;
+      margin-right: 0 !important;
+    }
+
+    .navbar-nav .px-1 {
+      padding-left: 0 !important;
+      padding-right: 0 !important;
+    }
   }
-}
+
+  /* Tablet styles */
+  @media (max-width: 992px) {
+    .navbar {
+      padding-left: 15px;
+    }
+
+    #navbarSupportedContent {
+      position: fixed;
+      top: 84px;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: white;
+      z-index: 1040;
+      overflow-y: auto;
+    }
+
+    .navbar-collapse.show {
+      display: block;
+    }
+
+    body.mobile-menu-open {
+      overflow: hidden;
+    }
+
+    .nav-icon-md {
+      display: none !important;
+    }
+
+    .right-nav-text {
+      display: block !important;
+    }
+
+    .mobile-menu-wrapper .card-header {
+      padding: 1rem;
+    }
+  }
+
 </style>
+
+<!-- Updated JavaScript -->
 <script>
+document.addEventListener('DOMContentLoaded', function() {
+  // Navbar toggler functionality
   function toggleDropdown(element, isOpen) {
     const dropdownMenu = element.querySelector('.dropdown-menu');
     if (isOpen) {
@@ -82,29 +156,46 @@
     }
   }
 
-  document.addEventListener('DOMContentLoaded', function() {
-  var navbarToggler = document.querySelector('.navbar-toggler');
-  var navbarCollapse = document.querySelector('#navbarSupportedContent');
-
-  navbarToggler.addEventListener('click', function() {
-    if (navbarCollapse.classList.contains('show')) {
-      document.body.classList.remove('mobile-menu-open');
-    } else {
-      document.body.classList.add('mobile-menu-open');
+  // Desktop dropdown functionality
+  const dropdowns = document.querySelectorAll('.dropdown');
+  
+  dropdowns.forEach(dropdown => {
+    const dropdownMenu = dropdown.querySelector('.dropdown-menu');
+    
+    // Mouse enter event
+    dropdown.addEventListener('mouseenter', function() {
+      if (window.innerWidth >= 993) { // Only for desktop
+        dropdownMenu.classList.add('dropdown-open');
+      }
+    });
+    
+    // Mouse leave event
+    dropdown.addEventListener('mouseleave', function() {
+      if (window.innerWidth >= 993) { // Only for desktop
+        dropdownMenu.classList.remove('dropdown-open');
+      }
+    });
+    
+    // Click event for mobile
+    const dropdownToggle = dropdown.querySelector('.dropdown-toggle');
+    if (dropdownToggle) {
+      dropdownToggle.addEventListener('click', function(e) {
+        if (window.innerWidth < 993) { // Only for mobile
+          e.preventDefault();
+          dropdownMenu.classList.toggle('dropdown-open');
+        }
+      });
     }
   });
 });
-  
-    </script>
+</script>
 
   
 <div class="shadow-sm main-nav-wrapper position-relative" style="z-index: 1030;" >
 <div class="main-nav main-nav-contained-800">
   <nav class="navbar navbar-expand-lg navbar-light py-0 fixed-top">
     <div class="container-xl px-0">
-      <a class="navbar-brand mr-0 mr-md-2 d-xl-block" href="{{ '/' | relative_url }}" style="
-      padding-bottom: 10px;
-  ">
+      <a class="navbar-brand mr-0 mr-md-2 d-xl-block" href="{{ '/' | relative_url }}" id="crdb-icon-name">
         <img 
           width="170" 
           height="24" 
@@ -135,7 +226,7 @@
             <div class="card-header bg-white py-4" id="mobileProduct">
                 <h2 class="mb-0">
                     <button class="btn btn-link btn-block text-left d-flex justify-content-between align-items-center" type="button" data-toggle="collapse"
-                        data-target="#collapseProduct" aria-expanded="false" aria-controls="mobileProduct">
+                        data-target="#collapseProduct" aria-expanded="false" aria-controls="mobileProduct" style="font-weight: 450;">
                         Product
                     </button>
                 </h2>
@@ -152,7 +243,7 @@ <h2 class="mb-0">
             <div class="card-header bg-white py-4" id="mobileSolutions">
                 <h2 class="mb-0">
                     <button class="btn btn-link btn-block text-left d-flex justify-content-between align-items-center" type="button" data-toggle="collapse"
-                        data-target="#collapseSolutions" aria-expanded="false" aria-controls="mobileSolutions">
+                        data-target="#collapseSolutions" aria-expanded="false" aria-controls="mobileSolutions" style="font-weight: 450;">
                         Solutions
                     </button>
                 </h2>
@@ -170,7 +261,7 @@ <h2 class="mb-0">
             <div class="card-header bg-white py-4" id="mobileResources">
                 <h2 class="mb-0">
                     <button class="btn btn-link btn-block text-left d-flex justify-content-between align-items-center" type="button" data-toggle="collapse"
-                        data-target="#collapseResources" aria-expanded="false" aria-controls="mobileResources">
+                        data-target="#collapseResources" aria-expanded="false" aria-controls="mobileResources" style="font-weight: 450;">
                         Resources
                     </button>
                 </h2>
@@ -188,7 +279,7 @@ <h2 class="mb-0">
             <div class="card-header bg-white py-4" id="mobileDocs">
                 <h2 class="mb-0">
                     <button class="btn btn-link btn-block text-left d-flex justify-content-between align-items-center" type="button" data-toggle="collapse"
-                        data-target="#collapseDocs" aria-expanded="false" aria-controls="mobileDocs">
+                        data-target="#collapseDocs" aria-expanded="false" aria-controls="mobileDocs" style="font-weight: 450;">
                         Docs
                     </button>
                 </h2>
@@ -206,7 +297,7 @@ <h2 class="mb-0">
             <div class="card-header bg-white py-4" id="mobileCompany">
                 <h2 class="mb-0">
                     <button class="btn btn-link btn-block text-left d-flex justify-content-between align-items-center" type="button" data-toggle="collapse"
-                        data-target="#collapseCompany" aria-expanded="false" aria-controls="mobileCompany">
+                        data-target="#collapseCompany" aria-expanded="false" aria-controls="mobileCompany" style="font-weight: 450;">
                         Company
                     </button>
                 </h2>
@@ -224,7 +315,7 @@ <h2 class="mb-0">
             <div class="card-header bg-white py-4" id="mobileCustomers">
                 <h2 class="mb-0">
                     <button class="btn btn-link btn-block text-left d-flex justify-content-between align-items-center" type="button" data-toggle="collapse"
-                        data-target="#collapseCustomers" aria-expanded="false" aria-controls="mobileCustomers">
+                        data-target="#collapseCustomers" aria-expanded="false" aria-controls="mobileCustomers" style="font-weight: 450;">
                         Customers
                     </button>
                 </h2>
@@ -239,14 +330,14 @@ <h2 class="mb-0">
           <div class="card">
             <div class="card-header bg-white py-4" id="">
                 <h2 class="mb-0">
-                    <a class="btn btn-link btn-block text-left d-flex justify-content-between align-items-center" href="https://www.cockroachlabs.com/pricing/">Pricing</a>
+                    <a class="btn btn-link btn-block text-left d-flex justify-content-between align-items-center" href="https://www.cockroachlabs.com/pricing/" style="font-weight: 450;">Pricing</a>
                 </h2>
             </div>
           </div>
           <div class="card">
             <div class="card-header bg-white py-4" id="">
                 <h2 class="mb-0">
-                    <a class="btn btn-link btn-block text-left btn-link-chevron-right d-flex justify-content-between align-items-center" href="https://www.cockroachlabs.com/contact/">Contact us</a>
+                    <a class="btn btn-link btn-block text-left btn-link-chevron-right d-flex justify-content-between align-items-center" href="https://www.cockroachlabs.com/contact/" style="font-weight: 450;">Contact us</a>
                 </h2>
             </div>
           </div>
@@ -254,7 +345,7 @@ <h2 class="mb-0">
           <div class="card">
             <div class="card-header bg-white py-4" id="">
                 <h2 class="mb-0">
-                    <a class="btn btn-link btn-block text-left" href="https://cockroachlabs.cloud/">Sign In</a>
+                    <a class="btn btn-link btn-block text-left" href="https://cockroachlabs.cloud/" style="font-weight: 450;">Sign In</a>
                 </h2>
             </div>
           </div>
@@ -275,7 +366,9 @@ <h2 class="mb-0">
           role="button"
           data-toggle="dropdown"
           aria-haspopup="true"
-          aria-expanded="false">Product</a>
+          aria-expanded="false"
+          style="font-weight: 450;"
+          >Product</a>
           <div class="dropdown-menu w-100 p-45" aria-labelledby="navbarDropdown">
             {% include_cached nav-product.html %}
           </div>
@@ -288,7 +381,9 @@ <h2 class="mb-0">
           role="button"
           data-toggle="dropdown"
           aria-haspopup="true"
-          aria-expanded="false">Solutions</a>
+          aria-expanded="false"
+          style="font-weight: 450;"
+          >Solutions</a>
           <div class="dropdown-menu w-100 p-45" aria-labelledby="navbarDropdown">
             {% include_cached nav-solutions.html %}
           </div>
@@ -301,7 +396,9 @@ <h2 class="mb-0">
           role="button"
           data-toggle="dropdown"
           aria-haspopup="true"
-          aria-expanded="false">Resources</a>
+          aria-expanded="false"
+          style="font-weight: 450;"
+          >Resources</a>
           <div class="dropdown-menu w-100 p-45" aria-labelledby="navbarDropdown">
             {% include_cached nav-resources.html %}
           </div>
@@ -315,7 +412,9 @@ <h2 class="mb-0">
           role="button"
           data-toggle="dropdown"
           aria-haspopup="true"
-          aria-expanded="false">Docs</a>
+          aria-expanded="false"
+          style="font-weight: 450;"
+          >Docs</a>
           <div class="dropdown-menu w-100 p-45 docs" aria-labelledby="navbarDropdown">
             {% include_cached nav-docs.html %}
           </div>
@@ -326,6 +425,7 @@ <h2 class="mb-0">
           class="nav-link nav-link-border dropdown-toggle no-chevron"
           href="https://www.cockroachlabs.com/pricing/"
           id="navbarDropdown"
+          style="font-weight: 450;"
           >Pricing</a>
         </li>
 
@@ -336,7 +436,9 @@ <h2 class="mb-0">
           role="button"
           data-toggle="dropdown"
           aria-haspopup="true"
-          aria-expanded="false">Customers</a>
+          aria-expanded="false"
+          style="font-weight: 450;"
+          >Customers</a>
           <div class="dropdown-menu w-100 p-45 company" aria-labelledby="navbarDropdown">
             {% include_cached nav-customers.html %}
           </div>
@@ -349,7 +451,9 @@ <h2 class="mb-0">
           role="button"
           data-toggle="dropdown"
           aria-haspopup="true"
-          aria-expanded="false">Company</a>
+          aria-expanded="false"
+          style="font-weight: 450;"
+          >Company</a>
           <div class="dropdown-menu w-100 p-45 company" aria-labelledby="navbarDropdown">
             {% include_cached nav-company.html %}
           </div>
@@ -362,22 +466,31 @@ <h2 class="mb-0">
       <div class="ml-auto">
         <ul class="d-none d-lg-flex navbar-nav mr-auto mb-2 mb-lg-0 mt-auto">
           <li class="nav-item">
-            <a class="nav-link" href="https://www.cockroachlabs.com/contact/" role="button"> Contact us</a>
-            <a class="nav-link nav-icon-md" href="https://www.cockroachlabs.com/contact/" role="button"><img class="" width="32" src="{{ '/images/icons/icon-envelope.png' | relative_url }}" alt="Sign in"></a>
+            <!-- Contact link with text -->
+            <a class="nav-link right-nav-text" href="https://www.cockroachlabs.com/contact/" role="button" style="font-weight: 450;">
+              Contact us
+            </a>
+            <!-- Contact icon -->
+            <a class="nav-link nav-icon-md" href="https://www.cockroachlabs.com/contact/" role="button">
+              <img width="32" src="{{ '/images/icons/icon-envelope.png' | relative_url }}" alt="Contact">
+            </a>
           </li>
           <li class="nav-item">
-            <a href="https://cockroachlabs.cloud/" class="nav-link">Sign In</a>
+            <!-- Sign in link with text -->
+            <a href="https://cockroachlabs.cloud/" class="nav-link right-nav-text" style="font-weight: 450;">Sign In</a>
+            <!-- Sign in icon -->
             <a href="https://cockroachlabs.cloud/" class="nav-link nav-icon-md">
               <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <circle cx="11" cy="11" r="10.25" fill="white" stroke="black" stroke-width="1.5"/>
-              <circle cx="11" cy="9" r="2.25" stroke="black" stroke-width="1.5"/>
-              <path d="M6 16C6.47619 14.6667 8.14286 12 11 12C13.8571 12 15.5238 14.6667 16 16" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
+                <circle cx="11" cy="11" r="10.25" fill="white" style="fill: white" stroke="black" stroke-width="1.5"/>
+                <circle cx="11" cy="9" r="2.25" stroke="black" stroke-width="1.5"/>
+                <path d="M6 16C6.47619 14.6667 8.14286 12 11 12C13.8571 12 15.5238 14.6667 16 16" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
               </svg>
-              </a>
+            </a>
           </li>
           <li class="nav-item d-flex justify-content-center flex-column">
-            <a class="btn btn-primary rounded-pill px-3 font-family-poppins py-1 ml-2" href="https://cockroachlabs.cloud/signup" style="
-    color: #fff;">Get started free</a>
+            <a class="btn btn-primary rounded-pill px-3 font-family-poppins py-1 ml-2" href="https://cockroachlabs.cloud/signup" style="color: #fff;font-weight: 450;">
+              Get started free
+            </a>
           </li>
         </ul>
       </div>