Added active flag for navigation

hyde/layouts/basic/content/media/css/site.css

@@ -189,6 +189,14 @@ footer{
 .banner nav li a.button:hover{
     color: #000;
 }
+.banner nav li a.button.active{
+    color: #d7d7d7;
+    border: solid 1px #333;
+    background: #333;
+    background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));
+    background: -moz-linear-gradient(top,  #666,  #000);
+    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000');
+}
 
 .blog_excerpt{
     padding-bottom: 24px;

hyde/layouts/basic/layout/base.j2

@@ -60,30 +60,8 @@
             <h3>A hyde website</h3>
           {%- endblock %}
           {% block nav %}
-            <nav>
+          {% from "macros.j2" import render_nav with context %}
-                <ul>
+          {{ render_nav(menu, 'main_nav') }}
-                    <li>
-                        <a class="button white" href="{{ content_url('index.html') }}">
-                            Home
-                        </a>
-                    </li>
-                    <li>
-                        <a class="button white" href="{{ content_url('portfolio') }}">
-                            Portfolio
-                        </a>
-                    </li>
-                    <li>
-                        <a class="button white" href="{{ content_url('blog') }}">
-                            Blog
-                        </a>
-                    </li>
-                    <li>
-                        <a class="button white" href="{{ content_url('about.html') }}">
-                            About
-                        </a>
-                    </li>
-                </ul>
-            </nav>
           {% endblock %}
           </header>
           <section class="content">

hyde/layouts/basic/layout/macros.j2

@@ -8,4 +8,33 @@
     Posted: {{ res.meta.created.strftime('%a, %d %b %Y') }}
 </time>
 </article>
-{% endmacro %}
+{% endmacro %}
+
+{% macro render_nav(menu, cls=None) -%}
+{% if menu -%}
+<nav {{'class='~cls if cls }}>
+    <ul>
+        {% for item in menu -%}
+        {% set active = False -%}
+        {% if item.type == 'page' -%}
+            {% set active = (resource.url ==
+                site.content.resource_from_relative_path(item.url).url) -%}
+        {% else -%}
+            {% set active = (resource.node ==
+                site.content.node_from_relative_path(item.url)) -%}
+        {%- endif %}
+        {% set classes = ['button', 'white'] -%}
+        {% do classes.append('active') if active -%}
+        {% do classes.append(item.css_class) if item.css_class -%}
+        <li>
+            <a title="{{ item.description }}"
+                class="{{ classes|join(' ') }}"
+                href="{{ content_url(item.url) }}">
+                {{ item.name }}
+            </a>
+        </li>
+        {%- endfor %}
+    </ul>
+</nav>
+{%- endif %}
+{%- endmacro %}

hyde/layouts/basic/site.yaml

@@ -9,6 +9,33 @@ plugins:
     - hyde.ext.plugins.grouper.GrouperPlugin
     - hyde.ext.plugins.syntext.SyntextPlugin
     - hyde.ext.plugins.textlinks.TextlinksPlugin
+context:
+    data:
+        menu:
+            -
+                name: Home
+                description: Home Page
+                css_class: home
+                type: page
+                url: index.html
+            -
+                name: Portfolio
+                description: Portfolio
+                css_class: portfolio
+                type: node
+                url: portfolio
+            -
+                name: Blog
+                description: Blog
+                css_class: blog
+                type: node
+                url: blog
+            -
+                name: About
+                description: About
+                css_class: about
+                type: page
+                url: about.html
 meta:
     nodemeta: meta.yaml
     created: !!timestamp 2010-01-01 00:00:00