Adds Dropdown Global Nav

themes/navy/layout/index.swig

@@ -6,12 +6,48 @@
                 <span class="logo-span"><a class="logo-text" href="/">nimbus</a></span>
             </div>
 
-            <ul class="main-nav">
+            <header class="dropdown">
-                <li><a href="/docs/nimbus.html">Docs</a></li>
+                <nav>
-                <li><a href="/docs/contributor_guide.html">Contribute</a></li>
+                    <ul>
-                <li><a href="#team">Team</a></li>
+                    <li><a href="#">Status App</a>
-                <li><a href="https://our.status.im/tag/research" target="_blank">Blog</a></li>
+                        <ul>
-            </ul>
+                        <li><a href="#">About</a></li>
+                        <li><a href="#">Features</a></li>
+                        <li><a href="#">Desktop</a></li>
+                        <li><a href="#">Docs</a></li>
+                        <li><a href="#">Blog</a></li>
+                        <li><a href="#">Contribute</a></li>
+                        </ul>
+                    </li>
+
+                    <li><a href="#">Embark</a>
+                        <ul>
+                        <li><a href="https://embark.status.im">About</a></li>
+                        <li><a href="https://embark.status.im/docs">Docs</a></li>
+                        <li><a href="https://our.status.im/tag/embark">Blog</a></li>
+                        <li><a href="https://gitter.im/embark-framework/Lobby">Contribute</a></li>
+                        </ul>
+                    </li>
+
+                    <li><a href="https://our.status.im/tag/studio">Studio</a></li>
+
+                    <li><a href="https://status.im/incubate">Incubate</a></li>
+
+                    <li class="current"><a href="/">Nimbus</a>
+                        <ul>
+                        <li><a href="#">About</a></li>
+                        <li><a href="/docs/">Docs</a></li>
+                        <li><a href="https://our.status.im/tag/research">Blog</a></li>
+                        <li><a href="https://gitter.im/status-im/nimbus">Contribute</a></li>
+                        </ul>
+                    </li>
+
+                    <li><a href="https://our.status.im/tag/hardwallet">Hardwallet</a></li>
+
+                    <li><a href="https://our.status.im">Community</a></li>
+                    </ul>
+                </nav>
+            </header>
         </div>
 
         <div class="secondary-nav">

themes/navy/source/css/_partial/main.styl

@@ -187,11 +187,11 @@ select[multiple] {
   position: absolute;
   display: flex;
   justify-content: space-between;
-  width: 1024px;
+  width: 1280px;
   height: 56px;
   left: 50%;
   top: 0;
-  margin: 24px 0 0 -512px;
+  margin: 24px 0 0 -598px;
 }
 
 .header-left {
@@ -245,34 +245,80 @@ select[multiple] {
   color: white;
 }
 
-.main-nav {
+.dropdown {
   display: flex;
   align-items: center;
   margin-left: 32px;  
 }
 
-.main-nav li {
+.dropdown:before,
-  margin: 16px;
+.dropdown:after {
+  clear: both;
+  content: "";
+  display: table;  
 }
 
-.main-nav li:first-child {
+.dropdown nav ul li {
-  margin-left: 0;
+  float: left;
+  margin: 8px;
+  position: relative;
 }
 
-.main-nav li:last-child {
+.dropdown nav ul li a {
-  margin-right: 0;
-}
-
-.main-nav a {
   color: #FFFFFF;
   text-decoration: none;
   font-weight: bold;
 }
 
-.main-nav a:hover {
+.dropdown nav ul li a:hover {
   opacity: .7;
 }
 
+.dropdown nav ul li a:focus {
+  color: rgba(255, 255,255,1);
+}
+
+.dropdown nav ul li.current {
+  text-decoration: underline;
+}
+
+.dropdown nav ul li.current a {
+  color: rgba(255,255,255,0.7);
+}
+
+.dropdown nav ul li:hover > ul {
+  display: block;
+}
+
+.dropdown nav ul li ul {
+  background: #ffffff;
+  border-radius: 5px
+  display: none;
+  left: 0;
+  padding: 10px 5px 5px 5px;
+  position: absolute;
+  top: 100%;
+  border-top: 5px solid #ff9c00;
+}
+
+.dropdown nav ul li ul li {
+  float: none;
+  width: 8.125em;
+}
+
+.dropdown nav ul li ul li a:link,
+.dropdown nav ul li ul li a:visited {
+  color: #8d99a4;
+}
+
+.dropdown nav ul li ul li a:hover {
+  color: #000;
+}
+
+
+
+
+
 .secondary-nav {
   display: flex;
   align-items: center;