Adjust the navbar to match the new landing page (#238)

* adjust the navbar style/colors to match the new landing page * Update navbar content
luxonis · Aug 9, 2021 · fa6d68b · fa6d68b
1 parent 04888c0
commit fa6d68b
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 25 deletions.
diff --git a/source/_static/css/navbar.css b/source/_static/css/navbar.css
@@ -5,12 +5,12 @@
 
 #lux-global-navbar {
     top: 0px;
-    background: #434c6b;
+    background: #000;
 }
 
 #lux-doc-navbar {
     top: 78px;
-    background: #7d86a8;
+    background: #555;
 }
 
 .lux-navbar-container {
@@ -32,7 +32,7 @@
 
 .lux-navbar a {
     padding: 8px 13px;
-    color: #b4b7c4;
+    color: #fff;
 }
 
 .lux-navbar a > img {
@@ -42,7 +42,7 @@
 }
 
 .lux-navbar .lux-navbar-active {
-    color: white;
+    color: #ebd900;
     font-weight: bold;
 }
 

diff --git a/source/_static/js/navbar.js b/source/_static/js/navbar.js
@@ -21,21 +21,22 @@ function addNavbar() {
     "        <li><a href=\"https://luxonis.com\">\n" +
     "          <img src=\"https://discuss.luxonis.com/assets/logo-fuhmgk6r.png\" alt=\"Luxonis\">\n" +
     "        </a></li>\n" +
-    "        <li><a href=\"https://luxonis.com/depthai\">Solutions</a></li>\n" +
-    "        <li><a href=\"https://luxonis.com/about\">About</a></li>\n" +
-    "        <li><a href=\"https://discuss.luxonis.com/\">Discuss</a></li>\n" +
-    "        <li><a href=\"https://luxonis.com/jobs\">Jobs</a></li>\n" +
-    "        <li><a href=\"https://docs.luxonis.com/\" class=\"lux-navbar-active\">Docs</a></li>\n" +
+    "        <li><a target=\"_blank\" href=\"https://docs.luxonis.com/\" class=\"lux-navbar-active\">Documentation</a></li>\n" +
+    "        <li><a target=\"_blank\" href=\"https://discuss.luxonis.com/\">Discuss</a></li>\n" +
+    "        <li><a target=\"_blank\" href=\"https://luxonis.com/careers\">Careers</a></li>\n" +
+    "        <li><a target=\"_blank\" href=\"https://luxonis.com/team\">Team</a></li>\n" +
+    "        <li><a target=\"_blank\" href=\"https://luxonis.com/contact\">Contact</a></li>\n" +
+    "        <li><a target=\"_blank\" href=\"http://shop.luxonis.com\">Shop</a></li>\n" +
     "      </ul>\n" +
     "    </div>\n" +
     "  </div>\n" +
     "  <div id=\"lux-doc-navbar\" class=\"lux-navbar-container\">\n" +
     "    <div class=\"lux-navbar\">\n" +
     "      <ul>\n" +
-    "        <li><a href=\"/en/latest/\">Main</a></li>\n" +
-    "        <li><a href=\"/projects/api/\">API</a></li>\n" +
-    "        <li><a href=\"/projects/gui/\">GUI</a></li>\n" +
-    "        <li><a href=\"/projects/hardware/\">Hardware</a></li>\n" +
+    "        <li><a target=\"_blank\" href=\"/en/latest/\">Main</a></li>\n" +
+    "        <li><a target=\"_blank\" href=\"/projects/api/\">API</a></li>\n" +
+    "        <li><a target=\"_blank\" href=\"/projects/gui/\">GUI</a></li>\n" +
+    "        <li><a target=\"_blank\" href=\"/projects/hardware/\">Hardware</a></li>\n" +
     "      </ul>\n" +
     "    </div>\n" +
     "  </div>"
@@ -54,19 +55,21 @@ function adjustNavbarPosition() {
 
 window.onscroll = adjustNavbarPosition
 
-window.onload = function(){
-  addNavbar()
-  adjustNavbarPosition()
-  document.getElementsByClassName("wy-side-scroll")[0].scrollTop = 0;
-  if (location.pathname.startsWith("/projects")) {
-    var links = document.querySelectorAll("#lux-doc-navbar a[href^='/projects']");
-    for (var i = 0; i < links.length; i++) {
-      if(location.pathname.includes(links[i].pathname)) {
-        links[i].classList.add('lux-navbar-active')
+document.onreadystatechange = function(e) {
+  if (document.readyState === 'interactive') {
+    addNavbar()
+    adjustNavbarPosition()
+    document.getElementsByClassName("wy-side-scroll")[0].scrollTop = 0;
+    if (location.pathname.startsWith("/projects")) {
+      var links = document.querySelectorAll("#lux-doc-navbar a[href^='/projects']");
+      for (var i = 0; i < links.length; i++) {
+        if (location.pathname.includes(links[i].pathname)) {
+          links[i].classList.add('lux-navbar-active')
+        }
       }
+    } else {
+      var main = document.querySelector("#lux-doc-navbar a:not([href^='/projects'])")
+      main.classList.add('lux-navbar-active')
     }
-  } else {
-    var main = document.querySelector("#lux-doc-navbar a:not([href^='/projects'])")
-    main.classList.add('lux-navbar-active')
   }
 }