Merge pull request #88 from couchbase/sandbox-header-update

Header update

Author: amarantha-k

src/css/header.css

@@ -8,11 +8,34 @@
   padding-right: 0;
 }
 
+.navbar-brand-list {
+  list-style: none;
+  display: flex;
+  margin: 0;
+  padding: 0;
+}
+
+.navbar-brand-list .brand-logo {
+  margin-right: 10px;
+}
+
 .navbar-brand img {
   height: 32px;
   transition: height 0.5s ease;
 }
 
+.cb-documentation:hover .cb-docs {
+  display: none;
+}
+
+.cb-documentation {
+  display: block;
+}
+
+.cb-documentation:hover .cb-hover-docs {
+  display: block;
+}
+
 .navbar {
   position: relative;
   display: flex;

src/css/landing-page.css

@@ -208,6 +208,7 @@
 .doc.landing-page-doc h2 {
   margin: 0;
   color: var(--color-brand-black);
+  padding: 0;
 }
 
 .doc.landing-page-doc h2::after {

src/img/cb-docs-hover.svg

@@ -2,10 +2,19 @@
   <div class="header-top-row">
       <div class="container">
           <nav class="navbar navbar-expand-md flex-nowrap justify-content-between navbar-new-top">
-
-              <a class="navbar-brand" href="{{#with (and site.url site.homeUrl)}}{{@root.site.url}}{{this}}{{else}}{{siteRootPath}}{{/with}}">
-                <img src="{{{uiRootPath}}}/img/couchbase-documentation-logo.svg" alt="Couchbase" />
-              </a>
+              <ul class="navbar-brand-list">
+                <li class="brand-logo">
+                  <a class="navbar-brand" href="https://www.couchbase.com">
+                    <img src="{{{uiRootPath}}}/img/couchbase-logo.svg" alt="Couchbase" />
+                  </a>
+                </li>
+                <li>
+                  <a class="navbar-brand cb-documentation" href="https://docs.couchbase.com">
+                    <img src="{{{uiRootPath}}}/img/cb-documentation.svg" alt="Couchbase Documentation" class="cb-docs" />
+                    <img src="{{{uiRootPath}}}/img/cb-docs-hover.svg" alt="Couchbase Documentation" class="hide cb-hover-docs" />
+                  </a>
+                </li>
+              </ul>
               {{! <ul class="nav navbar-nav mr-auto"></ul> }}
               <button class="navbar-burger" data-target="topbar-menu">
                 <span></span>