✨ Added secondary navigation (#664)

refs https://github.com/TryGhost/Ghost/pull/11409

- Adds secondary navigation to the main menu
- Updated secondary nav mobile styles
- Updated cover for the scrollable main navigation

assets/css/screen.css

@@ -285,6 +285,28 @@ body {
     font-size: 1.3rem;
 }
 
+.site-nav-left-wrapper {
+    position: relative;
+    flex: 1 0 auto;
+    display: flex;
+}
+
+.site-header-background:not(.responsive-header-img) .site-nav-left-wrapper:after,
+.site-nav-main .site-nav-left-wrapper:after {
+    content: "";
+    position: absolute;
+    top: 0;
+    z-index: 1000;
+    width: 40px;
+    height: 100%;
+}
+
+.site-header-background:not(.responsive-header-img) .site-nav-left-wrapper:after,
+.site-nav-main .site-nav-left-wrapper:after {
+    right: 0;
+    background: linear-gradient(to right, color(var(--darkgrey) l(-5%) a(0)) 0%,color(var(--darkgrey) l(-5%)) 100%);
+}
+
 .site-nav-left {
     flex: 1 0 auto;
     display: flex;
@@ -302,26 +324,8 @@ body {
     -ms-overflow-scrolling: touch;
 }
 
-@media (max-width: 700px) {
+.site-nav-left .nav li:last-of-type {
-    .site-header-background:not(.responsive-header-img) .site-nav:after,
+    padding-right: 20px;
-    .site-nav-main .site-nav:after {
-        content: "";
-        position: absolute;
-        top: 0;
-        z-index: 1000;
-        width: 40px;
-        height: 100%;
-    }
-
-    .site-header-background:not(.responsive-header-img) .site-nav:after,
-    .site-nav-main .site-nav:after {
-        right: 0;
-        background: linear-gradient(to right, color(var(--darkgrey) l(-5%) a(0)) 0%,color(var(--darkgrey) l(-5%)) 100%);
-    }
-
-    .nav li:last-of-type {
-        padding-right: 20px;
-    }
 }
 
 /* Site Nav Hack Explanation (above):
@@ -448,24 +452,37 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
 }
 
 .site-nav-right {
-    flex-shrink: 0;
+    flex: 0 1 auto;
     display: flex;
     align-items: center;
+    justify-content: flex-end;
     padding: 10px 0;
     height: 64px;
 }
 
+.site-nav-right .nav {
+    position: relative;
+    margin: 0;
+}
+
+.site-nav-right .nav a {
+    white-space: nowrap;
+}
+
+.site-nav-right .nav a:before {
+    display: none;
+}
+
+.site-nav-right .nav li:last-of-type a {
+    margin-right: -12px;
+}
+
 .social-links {
     flex-shrink: 0;
     display: flex;
     align-items: center;
 }
 
-.social-links a:last-of-type {
-    padding-right: 20px;
-}
-
-
 .social-link {
     display: inline-block;
     margin: 0;
@@ -501,9 +518,9 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
 .subscribe-button {
     display: block;
     padding: 4px 10px;
+    margin: 0 0 0 10px;
     border: #fff 1px solid;
     color: #fff;
-    font-size: 1.2rem;
     line-height: 1em;
     border-radius: 10px;
     opacity: 0.8;
@@ -514,7 +531,12 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
     opacity: 1;
 }
 
+.site-nav-right .nav + .subscribe-button {
+    margin-left: 24px;
+}
+
 .rss-button {
+    padding: 10px 8px;
     opacity: 0.8;
 }
 

partials/site-nav.hbs

@@ -1,32 +1,40 @@
 <nav class="site-nav">
-    <div class="site-nav-left">
+    <div class="site-nav-left-wrapper">
-        {{#if @site.logo}}
+        <div class="site-nav-left">
-            <a class="site-nav-logo" href="{{@site.url}}"><img src="{{@site.logo}}" alt="{{@site.title}}" /></a>
+            {{#if @site.logo}}
-        {{else}}
+                <a class="site-nav-logo" href="{{@site.url}}"><img src="{{@site.logo}}" alt="{{@site.title}}" /></a>
-            <a class="site-nav-logo" href="{{@site.url}}">{{@site.title}}</a>
+            {{else}}
-        {{/if}}
+                <a class="site-nav-logo" href="{{@site.url}}">{{@site.title}}</a>
-        <div class="site-nav-content">
-            {{#if @site.navigation}}
-                {{navigation}}
             {{/if}}
-            {{#is "post"}}
+            <div class="site-nav-content">
-                <span class="nav-post-title {{#unless @site.logo}}dash{{/unless}}">{{post.title}}</span>
+                {{#if @site.navigation}}
-            {{/is}}
+                    {{navigation}}
+                {{/if}}
+                {{#is "post"}}
+                    <span class="nav-post-title {{#unless @site.logo}}dash{{/unless}}">{{post.title}}</span>
+                {{/is}}
+            </div>
         </div>
     </div>
     <div class="site-nav-right">
-        <div class="social-links">
+        {{#if @site.secondary_navigation}}
-            {{#if @site.facebook}}
+            {{navigation type="secondary"}}
-                <a class="social-link social-link-fb" href="{{facebook_url @site.facebook}}" title="Facebook" target="_blank" rel="noopener">{{> "icons/facebook"}}</a>
+        {{else}}
-            {{/if}}
+            <div class="social-links">
-            {{#if @site.twitter}}
+                {{#if @site.facebook}}
-                <a class="social-link social-link-tw" href="{{twitter_url @site.twitter}}" title="Twitter" target="_blank" rel="noopener">{{> "icons/twitter"}}</a>
+                    <a class="social-link social-link-fb" href="{{facebook_url @site.facebook}}" title="Facebook" target="_blank" rel="noopener">{{> "icons/facebook"}}</a>
-            {{/if}}
+                {{/if}}
-        </div>
+                {{#if @site.twitter}}
+                    <a class="social-link social-link-tw" href="{{twitter_url @site.twitter}}" title="Twitter" target="_blank" rel="noopener">{{> "icons/twitter"}}</a>
+                {{/if}}
+            </div>
+            {{#unless @labs.members}}
+                <a class="rss-button" href="https://feedly.com/i/subscription/feed/{{@site.url}}/rss/" title="RSS" target="_blank" rel="noopener">{{> "icons/rss"}}</a>
+            {{/unless}}
+        {{/if}}
+
         {{#if @labs.members}}
             <a class="subscribe-button" href="#subscribe">Subscribe</a>
-        {{else}}
-            <a class="rss-button" href="https://feedly.com/i/subscription/feed/{{@site.url}}/rss/" title="RSS" target="_blank" rel="noopener">{{> "icons/rss"}}</a>
         {{/if}}
     </div>
 </nav>