Merge pull request #82 from postmanlabs/markeng-3271

[markeng-3271] update navbar

Author: ch264

build/navbarDev.json

@@ -1,74 +1,59 @@
 {
   "type": "header",
-  "media": "https://voyager.postman.com/logo/postman-logo-white-horiz.svg",
+  "media": "https://voyager.postman.com/logo/postman-logo-icon-orange.svg",
   "items": [
     {
       "title": "Product",
       "dropdown": "true",
+      "isWidthShort": true,
       "columns": [
         {
           "title": "Getting Started",
+          "colSize": "short",
           "subItemsCol": [
-            {
-              "title": "What is Postman?",
-              "link": "",
-              "url": "https://www.postman.com/product/what-is-postman/"
-            },
-            {
-              "title": "Customer Stories",
-              "link": "",
-              "url": "https://www.postman.com/customers/"
-            },
-            {
-              "title": "Download Postman →",
-              "link": "app-cta",
-              "url": "https://www.postman.com/downloads/"
-            }
+              {
+                  "title": "What is Postman?",
+                  "link": "",
+                  "url": "https://www.postman.com/product/what-is-postman/",
+                  "width:" : "true"
+              },
+              {
+                  "title": "Customer Stories",
+                  "link": "",
+                  "url": "https://www.postman.com/customers/",
+                  "width:" : "true"
+              },
+              {
+                  "title": "Download Postman →",
+                  "className": "blue-link",
+                  "link": "app-cta",
+                  "url": "https://www.postman.com/downloads/",
+                  "width:" : "true"
+              }
           ]
-        },
-        {
-          "title": "API Platform",
+      },
+      {
+          "title": "API Platform Features",
           "subItemsCol": [
             {
-              "title": "Collaborate in Workspaces",
-              "url": "https://www.postman.com/product/workspaces/"
-            },
-            {
-              "title": "Organize with Collections",
+              "title": "Collections",
               "url": "https://www.postman.com/collection/"
             },
             {
-              "title": "Explore the API Client",
-              "url": "https://www.postman.com/product/api-client/"
+                "title": "Workspaces",
+                "url": "https://www.postman.com/product/workspaces/"
             },
             {
-              "title": "Build Postman Flows",
-              "url": "https://www.postman.com/product/flows/"
-            },
-            {
-              "title": "Work smarter with Postbot",
+              "title": "Postbot",
               "url": "https://www.postman.com/product/postbot/"
             },
             {
-              "title": "Browse API Tools",
-              "url": "https://www.postman.com/product/tools/"
-            }
-          ]
-        },
-        {
-          "title": "Enterprise Solutions",
-          "subItemsCol": [
-            {
-              "title": "Enterprise Essentials",
-              "url": "https://www.postman.com/solutions/enterprise-essentials/"
-            },
-            {
-              "title": "API Test Automation",
-              "url": "https://www.postman.com/solutions/api-test-automation/"
+                "title": "API Client",
+                "url": "https://www.postman.com/product/api-client/"
             },
             {
-              "title": "Internal API Management",
-              "url": "https://www.postman.com/solutions/internal-api-management/"
+                "title": "Browse API Tools",
+                "url": "https://www.postman.com/product/tools/"
             }
           ]
         }

src/components/Header/Header.jsx

@@ -321,14 +321,12 @@ const Header = (props) => {
                           aria-labelledby="navbarDropdownMenuLink"
                         >
                           { item.columns && item.columns &&
-                          <div className="row dropdown-col-menu">
+                          <div className={item.isWidthShort ? `row row__short` : `row dropdown-col-menu`}>
                             { item.columns.map((col) => (
                               <div
-                              className={
-                                item.isWidthShort
-                                  ? 'col-sm-6 col-md-6 dropdown-col'
-                                  : 'col-sm-6 col-md-4 dropdown-col'
-                              } key={col.title}>
+                                className={item.columns.length <= 2 ? 'col col-sm-6 col-md-6 dropdown-col' : 'col-sm-7 col-md-4 dropdown-col'}
+                                key={col.title}
+                              >
                                 <h6 className="dropdown-header">{col.title}</h6>
                                 {col.subItemsCol.map((link) => (
                                   <a

src/components/Header/HeaderStyles.jsx

@@ -651,15 +651,20 @@ export const DropdownStyles = styled.div`
       width: 64rem;
     }
   }
+
+  .row__short {
+      width: 52rem;
+    }
+    
    .dropdown-col {
-    padding: 0 12px;
+    /* padding: 0 12px; */
     @media screen and (max-width: 991px) {
       margin-bottom: 2rem;
     }
   }
-  .dropdown-col:first-child {
+  /* .dropdown-col:first-child {
     max-width: 30%;
-  }
+  } */
 
   .dropdown-header {
     padding: 5px;