Templatize sidebar

exampleSite/config.yaml

@@ -22,6 +22,40 @@ params:
     - kromo
     - infinite
     - gutwork
+  sidebar:
+    # Logo (from /images/logos/___.svg)
+    logo: fresh-square
+    sections:
+    - title: User
+      icon: user
+      links:
+      - text: Profile
+        url: /
+      - text: Account
+        url: /
+      - text: Settings
+        url: /
+    - title: Messages
+      icon: envelope
+      links:
+      - text: Inbox
+        url: /
+      - text: Compose
+        url: /
+    - title: Images
+      icon: image
+      links:
+      - text: Library
+        url: /
+      - text: Upload
+        url: /
+    - title: Settings
+      icon: cog
+      links:
+      - text: User settings
+        url: /
+      - text: App settings
+        url: /
   section1:
     title: Great power comes
     subtitle: with great responsibility
@@ -77,6 +111,19 @@ params:
   footer:
     # Logo (from /images/logos/___)
     logo: fresh-white-alt.svg
+    # Social media links (GitHub, Twitter, etc.). All are optional.
+    socialmedia:
+    - link: https://github.com/lucperkins/github-fresh
+      icon: github
+    - link: https://dribbble.com/#
+      icon: dribbble
+    - link: https://facebook.com/#
+      icon: facebook
+    - link: https://twitter.com/lucperkins
+      icon: twitter
+    - link: https://bitbucket.org/#
+      icon: bitbucket
+    bulmalogo: true
     product:
     - text: Discover features
       link: /

layouts/partials/footer.html

@@ -2,6 +2,8 @@
 {{- $logo         := index $footer "logo" }}
 {{- $productLinks := index $footer "product" }}
 {{- $docLinks     := index $footer "docs" }}
+{{- $socialMedia  := index $footer "socialmedia" }}
+{{- $bulmaLogo    := index $footer "bulmalogo" }}
 <footer class="footer footer-dark">
   <div class="container">
     <div class="columns">
@@ -64,27 +66,19 @@
             <h3>Follow Us</h3>
             <nav class="level is-mobile">
               <div class="level-left">
-                <a class="level-item" href="https://github.com/#">
+                {{- range $socialMedia }}
-                  <span class="icon"><i class="fa fa-github"></i></span>
+                <a class="level-item" href="{{ .link }}">
-                </a>
+                  <span class="icon"><i class="fa fa-{{ .icon }}"></i></span>
-                <a class="level-item" href="https://dribbble.com/#">
-                  <span class="icon"><i class="fa fa-dribbble"></i></span>
-                </a>
-                <a class="level-item" href="https://fb.com/#">
-                  <span class="icon"><i class="fa fa-facebook"></i></span>
-                </a>
-                <a class="level-item" href="https://twitter.com/#">
-                  <span class="icon"><i class="fa fa-twitter"></i></span>
-                </a>
-                <a class="level-item" href="https://bitbucket.org/#">
-                  <span class="icon"><i class="fa fa-bitbucket"></i></span>
                 </a>
+                {{- end }}
               </div>
             </nav>
 
+            {{- if $bulmaLogo }}
             <a href="https://bulma.io" target="_blank">
               <img src="{{ "/images/logos/made-with-bulma.png" | relURL }}" alt="Made with Bulma" width="128" height="24">
             </a>
+            {{- end }}
           </div>
         </div>
       </div>

layouts/partials/sidebar.html

@@ -1,36 +1,32 @@
+{{- $sidebar  := .Site.Params.sidebar }}
+{{- $logo     := index $sidebar "logo" }}
+{{- $sections := index $sidebar "sections" }}
 <div class="sidebar">
   <div class="sidebar-header">
-        <img src="{{ "/images/logos/fresh-square.svg" | relURL }}">
+    <img src="{{ printf "/images/logos/%s.svg" $logo | relURL }}">
-        <a class="sidebar-close" href="javascript:void(0);"><i data-feather="x"></i></a>
+    <a class="sidebar-close" href="javascript:void(0);">
+      <i data-feather="x"></i>
+    </a>
   </div>
   <div class="inner">
     <ul class="sidebar-menu">
-            <li><span class="nav-section-title"></span></li>
+      {{- range $sections }}
-            <li class="have-children"><a href="#"><span class="fa fa-user"></span>User</a>
+      <li class="have-children">
+        <a href="#">
+          <span class="fa fa-{{ .icon }}"></span>
+          {{ .title }}
+        </a>
         <ul>
-                    <li><a href="#">Profile</a></li>
+          {{- range .links }}
-                    <li><a href="#">Account</a></li>
+          <li>
-                    <li><a href="#">Settings</a></li>
+            <a href="{{ .url }}">
-                </ul>
+              {{ .text }}
-            </li>
+            </a>
-            <li class="have-children"><a href="#"><span class="fa fa-envelope"></span>Messages</a>
+          </li>
-                <ul>
+          {{- end }}
-                    <li><a href="#">Inbox</a></li>
-                    <li><a href="#">Compose</a></li>
-                </ul>
-            </li>
-            <li class="have-children"><a href="#"><span class="fa fa-image"></span>Images</a>
-                <ul>
-                    <li><a href="#">Library</a></li>
-                    <li><a href="#">Upload</a></li>
-                </ul>
-            </li>
-            <li class="have-children"><a href="#"><span class="fa fa-cog"></span>Settings</a>
-                <ul>
-                    <li><a href="#">User settings</a></li>
-                    <li><a href="#">App settings</a></li>
         </ul>
       </li>
+      {{- end }}
     </ul>
   </div>
 </div>