Refactor site navigation

TryGhost · Jun 13, 2017 · eeb8b24 · eeb8b24
1 parent 7f4d581
commit eeb8b24
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 136 deletions.
diff --git a/author.hbs b/author.hbs
@@ -7,32 +7,7 @@
 {{#author}}
 <header class="site-header outer {{#if cover_image}}" style="background-image: url({{cover_image}}){{else}}no-cover{{/if}}">
     <div class="inner">
-        <nav class="site-nav">
-            <div class="site-nav-left">
-                {{#if @blog.logo}}
-                    <a class="site-nav-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>
-                {{/if}}
-                {{#if @blog.navigation}}
-                    {{!-- The blog navigation links from /ghost/settings/design --}}
-                    {{navigation}}
-                {{/if}}
-            </div>
-            <div class="site-nav-right">
-                <div class="social-links">
-                    {{#if @blog.facebook}}
-                        <a class="social-link social-link-fb" href="{{facebook_url @blog.facebook}}" target="_blank">{{> "icons/facebook"}}</a>
-                    {{/if}}
-                    {{#if @blog.twitter}}
-                        <a class="social-link social-link-tw" href="{{twitter_url @blog.twitter}}" target="_blank">{{> "icons/twitter"}}</a>
-                    {{/if}}
-                </div>
-                {{#if @labs.subscribers}}
-                    <a class="subscribe-button" href="{{@blog.url}}/subscribe/">Subscribe</a>
-                {{else}}
-                    <a class="rss-button" href="http://cloud.feedly.com/#subscription/feed/{{@blog.url}}/rss/" target="_blank">{{> "icons/rss"}}</a>
-                {{/if}}
-            </div>
-        </nav>
+        {{> "site-nav"}}
         <div class="site-header-content">
             {{#if profile_image}}
                 <img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" />

diff --git a/index.hbs b/index.hbs
@@ -15,29 +15,7 @@ into the {body} of the default.hbs template --}}
             </h1>
             <h2 class="site-description">{{@blog.description}}</h2>
         </div>
-        <nav class="site-nav">
-            <div class="site-nav-left">
-                {{#if @blog.navigation}}
-                    {{!-- The blog navigation links from /ghost/settings/design --}}
-                    {{navigation}}
-                {{/if}}
-            </div>
-            <div class="site-nav-right">
-                <div class="social-links">
-                    {{#if @blog.facebook}}
-                        <a class="social-link social-link-fb" href="{{facebook_url @blog.facebook}}" target="_blank">{{> "icons/facebook"}}</a>
-                    {{/if}}
-                    {{#if @blog.twitter}}
-                        <a class="social-link social-link-tw" href="{{twitter_url @blog.twitter}}" target="_blank">{{> "icons/twitter"}}</a>
-                    {{/if}}
-                </div>
-                {{#if @labs.subscribers}}
-                    <a class="subscribe-button" href="{{@blog.url}}/subscribe/">Subscribe</a>
-                {{else}}
-                    <a class="rss-button" href="http://cloud.feedly.com/#subscription/feed/{{@blog.url}}/rss/" target="_blank">{{> "icons/rss"}}</a>
-                {{/if}}
-            </div>
-        </nav>
+        {{> "site-nav"}}
     </div>
 </header>
 

diff --git a/page.hbs b/page.hbs
@@ -5,32 +5,7 @@ into the {body} of the default.hbs template --}}
 {{!-- The big featured header, it uses blog cover image as a BG if available --}}
 <header class="site-header outer">
     <div class="inner">
-        <nav class="site-nav">
-            <div class="site-nav-left">
-                {{#if @blog.logo}}
-                    <a class="site-nav-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>
-                {{/if}}
-                {{#if @blog.navigation}}
-                    {{!-- The blog navigation links from /ghost/settings/design --}}
-                    {{navigation}}
-                {{/if}}
-            </div>
-            <div class="site-nav-right">
-                <div class="social-links">
-                    {{#if @blog.facebook}}
-                        <a class="social-link social-link-fb" href="{{facebook_url @blog.facebook}}">{{> "icons/facebook"}}</a>
-                    {{/if}}
-                    {{#if @blog.twitter}}
-                        <a class="social-link social-link-tw" href="{{twitter_url @blog.twitter}}">{{> "icons/twitter"}}</a>
-                    {{/if}}
-                </div>
-                {{#if @labs.subscribers}}
-                    <a class="subscribe-button" href="{{@blog.url}}/subscribe/">Subscribe</a>
-                {{else}}
-                    <a class="rss-button" href="http://cloud.feedly.com/#subscription/feed/{{@blog.url}}/rss/" target="_blank">{{> "icons/rss"}}</a>
-                {{/if}}
-            </div>
-        </nav>
+        {{> "site-nav"}}
     </div>
 </header>
 

diff --git a/partials/navigation.hbs b/partials/navigation.hbs
diff --git a/partials/site-nav.hbs b/partials/site-nav.hbs
@@ -0,0 +1,38 @@
+<nav class="site-nav">
+    <div class="site-nav-left">
+        {{^is "home"}}
+            {{#if @blog.logo}}
+                <a class="site-nav-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>
+            {{else}}
+                <a class="site-nav-logo" href="{{@blog.url}}">{{@blog.title}}</a>
+            {{/if}}
+        {{/is}}
+        {{#if @blog.navigation}}
+            {{#navigation}}
+            {{!-- Outputting nav links from Ghost admin settings/design --}}
+            <div class="nav-menu">
+                <ul>
+                    {{#foreach navigation}}
+                        <li class="nav-item nav-item-{{slug}}{{#if current}} nav-item-current{{/if}}"><a href="{{url absolute="true"}}">{{label}}</a></li>
+                    {{/foreach}}
+                </ul>
+            </div>
+            {{/navigation}}
+        {{/if}}
+    </div>
+    <div class="site-nav-right">
+        <div class="social-links">
+            {{#if @blog.facebook}}
+                <a class="social-link social-link-fb" href="{{facebook_url @blog.facebook}}" target="_blank">{{> "icons/facebook"}}</a>
+            {{/if}}
+            {{#if @blog.twitter}}
+                <a class="social-link social-link-tw" href="{{twitter_url @blog.twitter}}" target="_blank">{{> "icons/twitter"}}</a>
+            {{/if}}
+        </div>
+        {{#if @labs.subscribers}}
+            <a class="subscribe-button" href="{{@blog.url}}/subscribe/">Subscribe</a>
+        {{else}}
+            <a class="rss-button" href="http://cloud.feedly.com/#subscription/feed/{{@blog.url}}/rss/" target="_blank">{{> "icons/rss"}}</a>
+        {{/if}}
+    </div>
+</nav>
diff --git a/post.hbs b/post.hbs
@@ -5,34 +5,7 @@ into the {body} of the default.hbs template --}}
 {{!-- The big featured header, it uses blog cover image as a BG if available --}}
 <header class="site-header outer">
     <div class="inner">
-        <nav class="site-nav">
-            <div class="site-nav-left">
-                {{#if @blog.logo}}
-                    <a class="site-nav-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>
-                {{else}}
-                    <a class="site-nav-logo" href="{{@blog.url}}">{{@blog.title}}</a>
-                {{/if}}
-                {{#if @blog.navigation}}
-                    {{!-- The blog navigation links from /ghost/settings/design --}}
-                    {{navigation}}
-                {{/if}}
-            </div>
-            <div class="site-nav-right">
-                <div class="social-links">
-                    {{#if @blog.facebook}}
-                        <a class="social-link social-link-fb" href="{{facebook_url @blog.facebook}}">{{> "icons/facebook"}}</a>
-                    {{/if}}
-                    {{#if @blog.twitter}}
-                        <a class="social-link social-link-tw" href="{{twitter_url @blog.twitter}}">{{> "icons/twitter"}}</a>
-                    {{/if}}
-                </div>
-                {{#if @labs.subscribers}}
-                    <a class="subscribe-button" href="{{@blog.url}}/subscribe/">Subscribe</a>
-                {{else}}
-                    <a class="rss-button" href="http://cloud.feedly.com/#subscription/feed/{{@blog.url}}/rss/" target="_blank">{{> "icons/rss"}}</a>
-                {{/if}}
-            </div>
-        </nav>
+        {{> "site-nav"}}
     </div>
 </header>
 

diff --git a/tag.hbs b/tag.hbs
@@ -5,32 +5,7 @@
 {{#tag}}
 <header class="site-header outer {{#if feature_image}}" style="background-image: url({{feature_image}}){{else}}no-cover{{/if}}">
     <div class="inner">
-        <nav class="site-nav">
-            <div class="site-nav-left">
-                {{#if @blog.logo}}
-                    <a class="site-nav-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>
-                {{/if}}
-                {{#if @blog.navigation}}
-                    {{!-- The blog navigation links from /ghost/settings/design --}}
-                    {{navigation}}
-                {{/if}}
-            </div>
-            <div class="site-nav-right">
-                <div class="social-links">
-                    {{#if @blog.facebook}}
-                        <a class="social-link social-link-fb" href="{{facebook_url @blog.facebook}}" target="_blank">{{> "icons/facebook"}}</a>
-                    {{/if}}
-                    {{#if @blog.twitter}}
-                        <a class="social-link social-link-tw" href="{{twitter_url @blog.twitter}}" target="_blank">{{> "icons/twitter"}}</a>
-                    {{/if}}
-                </div>
-                {{#if @labs.subscribers}}
-                    <a class="subscribe-button" href="{{@blog.url}}/subscribe/">Subscribe</a>
-                {{else}}
-                    <a class="rss-button" href="http://cloud.feedly.com/#subscription/feed/{{@blog.url}}/rss/" target="_blank">{{> "icons/rss"}}</a>
-                {{/if}}
-            </div>
-        </nav>
+        {{> "site-nav"}}
         <div class="site-header-content">
             <h1 class="site-title">{{name}}</h1>
             <h2 class="site-description">