Merge pull request #307 from devcows/menu-sections

Support for menus with sections and optional image.

5 files changed, 526 insertions, 27 deletions

diff --git a/README.md b/README.md
index f450d27..eaeb41a 100644
--- a/README.md
+++ b/README.md
@@ -172,7 +172,113 @@ You can also define the menu items that will appear in the top bar. Edit the `[[
     weight = 4
 ```
 
-The `weight` key will determine the order of the menu entries.
+The `weight` parameter will determine the order of the menu entries. A top level menu item can contain a dropdown with 
+an optional image, sections and multiple columns of menu items.
+
+To create a single list of menu items in the dropdown, first give your top level menu item unique identifier:
+
+```toml
+[[menu.main]]
+    name       = "Home"
+    identifier = "menu.home"
+    url        = "/"
+    weight     = 1
+```
+
+Now create additional menu items and use the above unique identifier as the value for the parent attribute:
+
+```
+[[menu.main]]
+    name       = "Option 1: Default Page"
+    url        = "/"
+    weight     = 1
+    parent     = "menu.home"
+
+[[menu.main]]
+    name       = "Option 2: Application"
+    url        = "/"
+    weight     = 2
+    parent     = "menu.home"
+```
+
+It is also possible to display a dropdown menu with 4 columns. This theme supports 2 variations:
+* 4 columns of menu items with sections
+* 2 column wide image + 2 columns of menu items with sections
+
+To display 4 columns of menu items, start using sections. Sections are menu items threated special by this theme:
+
+```
+[[menu.main]]
+    name       = "All Pages"
+    identifier = "menu.allpages"
+    url        = ""
+    weight     = 4
+
+[[menu.main]]
+    name       = "Home"
+    identifier = "section.ap-home"
+    url        = ""
+    weight     = 1
+    parent     = "menu.allpages"
+    post       = 1
+
+[[menu.main]]
+    name       = "Portfolio"
+    identifier = "section.ap-portfolio"
+    url        = ""
+    weight     = 1
+    parent     = "menu.allpages"
+    post       = 2
+
+[[menu.main]]
+    name       = "Shop"
+    identifier = "section.ap-shop"
+    url        = ""
+    weight     = 1
+    parent     = "menu.allpages"
+    post       = 3
+
+[[menu.main]]
+    name       = "Blog"
+    identifier = "section.ap-blog"
+    url        = ""
+    weight     = 3
+    parent     = "menu.allpages"
+    post       = 4
+
+[[menu.main]]
+    name       = "Blog Listing Big"
+    url        = "/blog/"
+    weight     = 1
+    parent     = "section.ap-blog"
+
+```
+
+The above example shows a reduced version of the *All Pages* menu item from the example site. As you can see,
+we first create menu items with an identifier starting with `section.`. If you create entries like this, these
+will appear as section headers in your drop down. 
+
+Each of these entries contain values for both the `weight` and `post` attribute. The `post` attribute is hijacked
+to indicate in which column a section will be put in. Within a column, the `weight` value is respected to show the
+sections top to bottom.
+
+Use to the unique section identifier (e.g. `section.ap-blog`) as the `parent` value to add a menu item to a specific
+section. Using `weight` and `post` on the sections allow you to balance the columns with approximately the same
+amount of entries.
+
+To display a 2 column wide image and 2 columns of menu items, the process is similar as above. However, we hijack
+the `url` field of the top level menu item to link the image from our static assets:
+
+```
+[[menu.main]]
+    name       = "Portfolio"
+    identifier = "menu.portfolio"
+    url        = "/img/template-homepage.png"
+    weight     = 3
+```
+
+When a `url` is filled in, only column 1 and 2 (the `post` value in the section menu items) will be displayed.
+When using an image, don't configure section menu items in column 3 or 4. **These will not be rendered.**
 
 **Important:** Do not change the `identifier` key of existing menu entries!
 
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index c11f45c..1bd36b2 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -16,31 +16,338 @@ paginate = 10
 
 [menu]
 
+
 # Main menu
+[[menu.main]]
+    name       = "Home"
+    identifier = "menu.home"
+    url        = "/"
+    weight     = 1
 
 [[menu.main]]
-    identifier="home"
-    name = "Home"
-    url  = "/"
-    weight = 1
+    name       = "Option 1: Default Page"
+    url        = "/"
+    weight     = 1
+    parent     = "menu.home"
 
 [[menu.main]]
-    identifier="blog"
-    name = "Blog"
-    url  = "/blog/"
-    weight = 2
+    name       = "Option 2: Application"
+    url        = "/"
+    weight     = 2
+    parent     = "menu.home"
 
 [[menu.main]]
-    identifier = "faq"
-    name = "FAQ"
-    url  = "/faq/"
-    weight = 3
+    name       = "Option 3: Startup"
+    url        = "/"
+    weight     = 3
+    parent     = "menu.home"
+
+[[menu.main]]
+    name       = "Option 4: Agency"
+    url        = "/"
+    weight     = 4
+    parent     = "menu.home"
+
+[[menu.main]]
+    name       = "Option 5: Portfolio"
+    url        = "/"
+    weight     = 5
+    parent     = "menu.home"
+
+[[menu.main]]
+    name       = "Features"
+    identifier = "menu.features"
+    url        = "/img/template-easy-customize.png"
+    weight     = 3
+
+[[menu.main]]
+    name       = "Shortcodes"
+    identifier = "section.shortcodes"
+    url        = ""
+    weight     = 1
+    parent     = "menu.features"
+    post       = 1
+
+[[menu.main]]
+    name       = "Header variations"
+    identifier = "section.headervariations"
+    url        = ""
+    weight     = 2
+    parent     = "menu.features"
+    post       = 2
+
+[[menu.main]]
+    name       = "Accordions"
+    url        = ""
+    weight     = 1
+    parent     = "section.shortcodes"
+
+[[menu.main]]
+    name       = "Alerts"
+    url        = ""
+    weight     = 2
+    parent     = "section.shortcodes"
+
+[[menu.main]]
+    name       = "Buttons"
+    url        = ""
+    weight     = 3
+    parent     = "section.shortcodes"
+
+[[menu.main]]
+    name       = "Content Boxes"
+    url        = ""
+    weight     = 4
+    parent     = "section.shortcodes"
+
+[[menu.main]]
+    name       = "Horizontal Blocks"
+    url        = ""
+    weight     = 5
+    parent     = "section.shortcodes"
+
+[[menu.main]]
+    name       = "Pagination"
+    url        = ""
+    weight     = 6
+    parent     = "section.shortcodes"
+
+[[menu.main]]
+    name       = "Tabs"
+    url        = ""
+    weight     = 7
+    parent     = "section.shortcodes"
+
+[[menu.main]]
+    name       = "Typography"
+    url        = ""
+    weight     = 8
+    parent     = "section.shortcodes"
+
+[[menu.main]]
+    name       = "Default Sticky Header"
+    url        = ""
+    weight     = 1
+    parent     = "section.headervariations"
+
+[[menu.main]]
+    name       = "No Sticky Header"
+    url        = ""
+    weight     = 2
+    parent     = "section.headervariations"
+
+[[menu.main]]
+    name       = "Light Header"
+    url        = ""
+    weight     = 3
+    parent     = "section.headervariations"
+
+[[menu.main]]
+    name       = "Portfolio"
+    identifier = "menu.portfolio"
+    url        = "/img/template-homepage.png"
+    weight     = 3
+
+[[menu.main]]
+    name       = "Portfolio"
+    identifier = "section.portfolio"
+    url        = ""
+    weight     = 1
+    parent     = "menu.portfolio"
+    post       = 1
+
+[[menu.main]]
+    name       = "2 Columns"
+    url        = ""
+    weight     = 1
+    parent     = "section.portfolio"
+
+[[menu.main]]
+    name       = "2 Columns With Negative Space"
+    url        = ""
+    weight     = 2
+    parent     = "section.portfolio"
+
+[[menu.main]]
+    name       = "3 Columns"
+    url        = ""
+    weight     = 3
+    parent     = "section.portfolio"
+
+[[menu.main]]
+    name       = "3 Columns With Negative Space"
+    url        = ""
+    weight     = 4
+    parent     = "section.portfolio"
+
+[[menu.main]]
+    name       = "4 Columns"
+    url        = ""
+    weight     = 5
+    parent     = "section.portfolio"
+
+[[menu.main]]
+    name       = "4 Columns With Negative Space"
+    url        = ""
+    weight     = 6
+    parent     = "section.portfolio"
+
+[[menu.main]]
+    name       = "Portfolio - detail"
+    url        = ""
+    weight     = 7
+    parent     = "section.portfolio"
+
+[[menu.main]]
+    name       = "Portfolio - detail 2"
+    url        = ""
+    weight     = 8
+    parent     = "section.portfolio"
+
+[[menu.main]]
+    name       = "About"
+    identifier = "section.about"
+    url        = ""
+    weight     = 2
+    parent     = "menu.portfolio"
+    post       = 2
+
+[[menu.main]]
+    name       = "About Us"
+    url        = ""
+    weight     = 1
+    parent     = "section.about"
+
+[[menu.main]]
+    name       = "Our Team"
+    url        = ""
+    weight     = 2
+    parent     = "section.about"
+
+[[menu.main]]
+    name       = "Marketing"
+    identifier = "section.marketing"
+    url        = ""
+    weight     = 3
+    parent     = "menu.portfolio"
+    post       = 2
+
+[[menu.main]]
+    name       = "Packages"
+    url        = ""
+    weight     = 1
+    parent     = "section.marketing"
+
+[[menu.main]]
+    name       = "All Pages"
+    identifier = "menu.allpages"
+    url        = ""
+    weight     = 4
+
+[[menu.main]]
+    name       = "Home"
+    identifier = "section.ap-home"
+    url        = ""
+    weight     = 1
+    parent     = "menu.allpages"
+    post       = 1
+
+[[menu.main]]
+    name       = "About"
+    identifier = "section.ap-about"
+    url        = ""
+    weight     = 2
+    parent     = "menu.allpages"
+    post       = 1
+
+[[menu.main]]
+    name       = "Marketing"
+    identifier = "section.ap-marketing"
+    url        = ""
+    weight     = 3
+    parent     = "menu.allpages"
+    post       = 1
+
+[[menu.main]]
+    name       = "Portfolio"
+    identifier = "section.ap-portfolio"
+    url        = ""
+    weight     = 1
+    parent     = "menu.allpages"
+    post       = 2
+
+[[menu.main]]
+    name       = "User Pages"
+    identifier = "section.ap-userpages"
+    url        = ""
+    weight     = 2
+    parent     = "menu.allpages"
+    post       = 2
+
+[[menu.main]]
+    name       = "Shop"
+    identifier = "section.ap-shop"
+    url        = ""
+    weight     = 1
+    parent     = "menu.allpages"
+    post       = 3
+
+[[menu.main]]
+    name       = "Shop - Order Process"
+    identifier = "section.ap-shoporderprocess"
+    url        = ""
+    weight     = 2
+    parent     = "menu.allpages"
+    post       = 3
+
+[[menu.main]]
+    name       = "Contact"
+    identifier = "section.ap-contact"
+    url        = ""
+    weight     = 1
+    parent     = "menu.allpages"
+    post       = 4
+
+[[menu.main]]
+    name       = "Pages"
+    identifier = "section.ap-pages"
+    url        = ""
+    weight     = 2
+    parent     = "menu.allpages"
+    post       = 4
+
+[[menu.main]]
+    name       = "Blog"
+    identifier = "section.ap-blog"
+    url        = "/blog/"
+    weight     = 3
+    parent     = "menu.allpages"
+    post       = 4
+
+[[menu.main]]
+    name       = "Blog Listing Big"
+    url        = "/blog/"
+    weight     = 1
+    parent     = "section.ap-blog"
+
+[[menu.main]]
+    name       = "Blog"
+    identifier = "menu.blog"
+    url        = "/blog/"
+    weight     = 5
+
+[[menu.main]]
+    name       = "FAQ"
+    identifier = "menu.faq"
+    url        = "/faq/"
+    weight     = 6
 
 [[menu.main]]
     identifier = "contact"
-    name = "Contact"
-    url  = "/contact/"
-    weight = 4
+    name       = "Contact"
+    url        = "/contact/"
+    weight     = 7
+
 
 # Top bar social links menu
 
diff --git a/exampleSite/static/img/template-easy-customize.png b/exampleSite/static/img/template-easy-customize.png
new file mode 100644
index 0000000..6080be0
--- /dev/null
+++ b/exampleSite/static/img/template-easy-customize.png
diff --git a/exampleSite/static/img/template-homepage.png b/exampleSite/static/img/template-homepage.png
new file mode 100644
index 0000000..6541b60
--- /dev/null
+++ b/exampleSite/static/img/template-homepage.png
diff --git a/layouts/partials/nav.html b/layouts/partials/nav.html
index 05e9ce3..3b98707 100644
--- a/layouts/partials/nav.html
+++ b/layouts/partials/nav.html
@@ -19,21 +19,107 @@
             <div class="navbar-collapse collapse" id="navigation">
                 <ul class="nav navbar-nav navbar-right">
                   {{ $current := . }}
-                  {{ range .Site.Menus.main }}
                   {{ $topLevel := replace .URL "/" "" }}
-                  <li class="dropdown{{ if eq $current.RelPermalink .URL | or (eq $current.Type $topLevel) | or (and (eq (default (trim .URL "/") .Identifier) "blog") (in (slice "taxonomy" "taxonomyTerm") $current.Kind)) }} active{{ end }}">
-                    {{ if .HasChildren }}
-                      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{ .Name }} <span class="caret"></span></a>
-                    <ul class="dropdown-menu">
-                      {{ range .Children }}
-                        <li><a href="{{ .URL }}">{{ .Name }}</a></li>
-                      {{ end }}
-                    </ul>
-                    {{ else }}
+                  {{ range .Site.Menus.main.ByWeight }}
+                  {{ $active := "" }}
+                  {{ if eq $current.RelPermalink .URL | or (eq $current.Type $topLevel) | or (and (eq (default (trim .URL "/") .Identifier) "blog") (in (slice "taxonomy" "taxonomyTerm") $current.Kind)) }}
+                    {{ $active = "active" }}
+                  {{ end }}
+                  {{ if .HasChildren }}
+                    <!-- Check if the first child marks a menu section identifier -->
+                    {{ $hasSections := (hasPrefix (index .Children 0).Identifier "section.") }}
+                    <li class="dropdown{{ if $hasSections }} use-yamm yamm-fw{{end}} {{ $active }}">
+                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{ .Name }} <span class="caret"></span></a>
+                        {{ if $hasSections }}
+                        <ul class="dropdown-menu">
+                            <li>
+                            <div class="yamm-content">
+                            <div class="row">
+                                {{ if ne .URL "" }}
+                                <div class="col-sm-6">
+                                    <img src="{{ .URL }}" class="img-responsive hidden-xs"/>
+                                </div>
+                                {{ end }}
+                                <div class="col-sm-3">
+                                {{ range .Children.ByWeight }}
+                                    {{ $column := printf "%s" .Post }}
+                                    {{ if eq $column "1" }}
+                                    <h5>{{ .Name }}</h5>
+                                    {{ if .HasChildren }}
+                                    <ul>
+                                    {{ range .Children.ByWeight }}
+                                    <li><a href="{{ .URL }}">{{ .Name }}</a></li>                                
+                                    {{- end }}
+                                    </ul>
+                                    {{ end }}
+                                    {{ end }}
+                                {{ end }}
+                                </div>
+                                <div class="col-sm-3">
+                                {{ range .Children.ByWeight }}
+                                    {{ $column := printf "%s" .Post }}
+                                    {{ if eq $column "2" }}
+                                    <h5>{{ .Name }}</code></h5>
+                                    {{ if .HasChildren }}
+                                    <ul>
+                                    {{ range .Children.ByWeight }}
+                                    <li><a href="{{ .URL }}">{{ .Name }}</a></li>                                
+                                    {{ end }}
+                                    </ul>
+                                    {{ end }}
+                                    {{ end }}
+                                {{ end }}
+                                </div>
+                                {{ if eq .URL "" }}
+                                <div class="col-sm-3">
+                                {{ range .Children }}
+                                    {{ $column := printf "%s" .Post }}
+                                    {{ if eq $column "3" }}
+                                    <h5>{{ .Name }}</code></h5>
+                                    {{ if .HasChildren }}
+                                    <ul>
+                                    {{ range .Children.ByWeight }}
+                                    <li><a href="{{ .URL }}">{{ .Name }}</a></li>                                
+                                    {{ end }}
+                                    </ul>
+                                    {{ end }}
+                                    {{ end }}
+                                {{ end }}
+                                </div>
+                                <div class="col-sm-3">
+                                {{ range .Children }}
+                                    {{ $column := printf "%s" .Post }}
+                                    {{ if eq $column "4" }}
+                                    <h5>{{ .Name }}</code></h5>
+                                    {{ if .HasChildren }}
+                                    <ul>
+                                    {{ range .Children.ByWeight }}
+                                    <li><a href="{{ .URL }}">{{ .Name }}</a></li>                                
+                                    {{ end }}
+                                    </ul>
+                                    {{ end }}
+                                    {{ end }}
+                                {{ end }}
+                                </div>
+                                {{ end }}
+                            </div>
+                            </div>
+                            </li>
+                        </ul>
+                        {{ else }}
+                        <ul class="dropdown-menu">
+                            {{ range .Children.ByWeight }}
+                            <li><a href="{{ .URL }}">{{ .Name }}</a></li>
+                            {{ end }}
+                        </ul>
+                        {{ end }}
+                    </li>
+                  {{ else }}
+                  <li class="dropdown {{ $active }}">
                     <a href="{{ .URL }}">{{ .Name }}</a>
-                    {{ end  }}
                   </li>
                   {{ end }}
+                  {{ end }}
                 </ul>
             </div>
             <!--/.nav-collapse -->