Add optional sidebar menu. Fixes #7

4 files changed, 74 insertions, 6 deletions

diff --git a/README.md b/README.md
index aa0d474..c8b4d7b 100644
--- a/README.md
+++ b/README.md
@@ -181,15 +181,24 @@ The search engine can also be customized in the `config.toml` file as follows:
       search_engine_url = "https://www.google.com/search"
 
 ## <a name="sidebarlinks"></a>Sidebar
+Sidebar has four parts from top to bottom:
+
+* Sidebar header and text (optional).
+* Social network icons (optional): These are links to Github, Bitbucket, etc accompanied by icons.
+* Sidebar menu (optional): Optional links (usually used for categories).
+* Recent posts: Displays last X (default is 5) published posts.
+
 The sidebar is generated using the partial template at `hugo-octopress/layouts/partials/sidebar.html`.
 
-Sidebar has two parts and both can be configured in the config file. Both values are passed to `markdownify`. For example you can add links and new lines.
+### <a name="sidebartext"></a>Sidebar text
+Sidebar text has two parts and both can be configured in the config file. Both values are passed to `markdownify`. For example you can add links and new lines.
 
 * Sidebar header which appear on top in a `<h1>` tag. Can be configured in the config file through the `sidebar_header` tag.
 * Sidebar text appears under the header and can be configured by modifying the `sidebar_text` tag in the config file.
 
 New lines can be added with `</br>` or normal markdown (two spaces at the end of line or two new lines). When adding two new lines, remember to remove the indentation in the config file otherwise the new line will be treated as a codeblock
 
+### <a name="sidebarsocial"></a>Social network icons
 Sidebar links are read from the config file as follows:
 
     [params]
@@ -207,6 +216,25 @@ If more than links are added, then add a `</br>` between the first four and the
 
 Icons are from [http://fontawesome.io](http://fontawesome.io) by Dave Gandy. To use icons with square dark backgrounds add `-square`. For example `<i class="fa fa-twitter-square fa-3x"></i>`. Size can be from 1 to 5 or `fa-lg` to be adaptive.
 
+### <a name="sidebarmenu"></a>Sidebar menu
+This menu can be enabled by setting the `sidebar_menu_enabled` to `true` in config file. It has two main parts:
+
+* A header that appears inside the `<h1>` at the top. It can bset in the config file using the `sidebar_menu_header`. This part only supports text.
+* A series of links. They can be set in the config file similar to navigation menus using the `[[menu.sidebar]]` tag as follows:
+
+    [[menu.sidebar]]
+      Name = "Google"
+      URL = "https://www.google.com"
+      weight = 0
+
+    [[menu.sidebar]]
+      Name = "Hugo"
+      URL = "/categories/hugo/"
+      weight = 1
+
+### <a name="sidebarrecent"></a>Recent posts
+Last x recent posts can be displayed in the sidebar. This number can be set in the config file using the `SidebarRecentLimit`. If this number is not set, last five posts will be displayed.
+
 ## <a name="shortcodes"></a>Shortcodes
 Creating [shortcodes](https://gohugo.io/extras/shortcodes/) in Hugo was surprisingly easy. I used two plugins in Octopress that I re-created in Hugo using shortcodes. They add captions to code blocks and images. These shortcodes are located at `hugo-octopress/layouts/shortcodes/`.
 
diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html
index 4ecd4dc..51085dd 100644
--- a/layouts/partials/sidebar.html
+++ b/layouts/partials/sidebar.html
@@ -48,6 +48,22 @@
     </li>
   </ul>
 
+  <!-- sidebar menu
+       first we check if it is enabled in config file and then start adding the items -->
+
+  {{ if eq .Site.Params.sidebar_menu_enabled true }}
+    <section class="odd">
+      {{ if isset .Site.Params "sidebar_menu_header" }}
+        <h1>{{ .Site.Params.sidebar_menu_header }}</h1>
+      {{ end }}
+      {{ range .Site.Menus.sidebar }}
+        <li>
+          <a href="{{ .URL | absURL }}" title="{{ .Name }}">{{ .Name }}</a>
+        </li>
+      {{ end }}
+    </section>
+  {{ end }}
+
   <!-- add recent posts - limit is .Site.Params.SidebarRecentLimit - example copied from https://gohugo.io/templates/go-templates/ -->
   <section class="even">
     <h1>Recent Posts</h1>
@@ -59,9 +75,9 @@
         {{ $.Scratch.Set "numberofrecentposts" .Site.Params.SidebarRecentLimit }}
       {{ end }}
       {{ range first ($.Scratch.Get "numberofrecentposts") .Site.Pages }}
-      <li class="post">
-        <a href="{{ .RelPermalink }}">{{ .Title }}</a>
-      </li>
+        <li class="post">
+          <a href="{{ .RelPermalink }}">{{ .Title }}</a>
+        </li>
       {{ end }}
     </ul>
   </section>
diff --git a/sample-config.toml b/sample-config.toml
index ba66db2..a90c66a 100644
--- a/sample-config.toml
+++ b/sample-config.toml
@@ -44,6 +44,25 @@ post = "/blog/:year-:month-:day-:title/" # change the post URL to look like the
 	Name = "This theme on Github"
 	URL = "https://www.github.com/parsiya/hugo-octopress"
 
+
+# sidebar menus
+# enable with "sidebar_menu_enabled = true" in [oarams]
+# header text is "sidebar_menu_header" in [params]
+[[menu.sidebar]]
+	Name = "Google"
+	URL = "https://www.google.com"
+	weight = 0
+
+[[menu.sidebar]]
+	Name = "Hugo"
+	URL = "/categories/hugo/"
+	weight = 1
+
+[[menu.sidebar]]
+	Name = "Homepage"
+	URL = "/"
+	weight = 2
+
 [params]
 
 	# number of recent posts that will be shown in the sidebar - default is 5
@@ -52,6 +71,11 @@ post = "/blog/:year-:month-:day-:title/" # change the post URL to look like the
 	# sidebar customization - passed to markdownify
 	sidebar_header = "Sidebar Header"
 
+	# sidebar menu
+	# if true will add a sidebar menu between sidebar text and recent posts
+	sidebar_menu_enabled = true
+	sidebar_menu_header = "Sidebar Links"
+
 	# sidebar text supports markdown
 	# new lines can be added with </br> or normal markdown (two spaces at the end of line or two new lines).
 	# when adding two new lines, remember to remove the indentation otherwise the new line will be treated as a codeblock
diff --git a/static/css/hugo-octopress.css b/static/css/hugo-octopress.css
index 1163bf0..1862bf5 100644
--- a/static/css/hugo-octopress.css
+++ b/static/css/hugo-octopress.css
@@ -1930,10 +1930,10 @@ aside.sidebar {
 aside.sidebar section {
     font-size: 0.9em;
     line-height: 1.4em;
-    margin-bottom: 1.5em
+    margin-bottom: 0.5em
 }
 aside.sidebar section h1 {
-    margin: 1.5em 0 0;
+    margin: 0.5em 0 0;
     padding-bottom: .2em;
     border-bottom: 1px solid #e0e0e0
 }