From 1d5dbd65ed3e48a8cbf11f592975b4266e815590 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Je=CC=81re=CC=81my=20Fabre?= <blackmagik88@gmail.com>
Date: Thu, 21 Jul 2016 11:22:50 +0200
Subject: [PATCH] Basicpage submenu implementation and style

---
 app/static/src/sass/config/_colors.scss       |  1 +
 app/static/src/sass/modules/_all.scss         |  1 +
 .../src/sass/modules/navs/_nav-tree.scss      | 40 +++++++++++++++++
 app/templates/pages/basicpage.html            |  7 ++-
 app/templates/pages/menus/current_tree.html   | 43 +++++++++++++++++++
 5 files changed, 90 insertions(+), 2 deletions(-)
 create mode 100644 app/static/src/sass/modules/navs/_nav-tree.scss
 create mode 100644 app/templates/pages/menus/current_tree.html

diff --git a/app/static/src/sass/config/_colors.scss b/app/static/src/sass/config/_colors.scss
index a6ec95a5..06a1cf2c 100755
--- a/app/static/src/sass/config/_colors.scss
+++ b/app/static/src/sass/config/_colors.scss
@@ -14,3 +14,4 @@ $color-white: #FFFFFF;
 $color-main: #F8E71C;
 $color-gray: #C3C3C3;
 $color-black: #1D1D1B;
+$color-black-light: #343432;
diff --git a/app/static/src/sass/modules/_all.scss b/app/static/src/sass/modules/_all.scss
index 1cec1332..cca25cef 100755
--- a/app/static/src/sass/modules/_all.scss
+++ b/app/static/src/sass/modules/_all.scss
@@ -2,6 +2,7 @@
 @import "navs/nav-actions";
 @import "navs/nav-header";
 @import "navs/nav-footer";
+@import "navs/nav-tree";
 
 // Page modules
 @import 'breadcrumb';
diff --git a/app/static/src/sass/modules/navs/_nav-tree.scss b/app/static/src/sass/modules/navs/_nav-tree.scss
new file mode 100644
index 00000000..2184e159
--- /dev/null
+++ b/app/static/src/sass/modules/navs/_nav-tree.scss
@@ -0,0 +1,40 @@
+$module: ".nav-tree";
+
+#{$module} {
+
+    padding: 0;
+    margin: 0;
+    list-style-type: none;
+
+    &__item {
+
+        margin-top: 2px;
+
+    }
+
+    &__link {
+
+        display: block;
+        color: white;
+        background: $color-black-light;
+        padding: 4px 20px;
+
+        @include font-size(xs);
+        @include typeface(sans-serif);
+
+        &.active {
+            background: $color-main;
+            color: $color-black-light;
+            padding: 8px 20px;
+            @include font-size(s);
+        }
+
+        &--sub {
+            @include padding-left(2);
+            background: rgba($color_main, 0.6);
+            color: $color-black-light;
+        }
+
+    }
+
+}
diff --git a/app/templates/pages/basicpage.html b/app/templates/pages/basicpage.html
index bf987c9c..2940f958 100644
--- a/app/templates/pages/basicpage.html
+++ b/app/templates/pages/basicpage.html
@@ -1,5 +1,5 @@
 {% extends "base.html" %}
-{% load i18n mezzanine_tags keyword_tags featured_tags %}
+{% load i18n mezzanine_tags keyword_tags featured_tags pages_tags %}
 
 {% block meta_title %}{{ page.meta_title }}{% endblock %}
 
@@ -36,7 +36,10 @@
     </div>
 
     <div class="row">
-        <div class="col-lg-8 col-lg-push-2">
+        <div class="col-lg-2">
+            {% page_menu "pages/menus/current_tree.html" %}
+        </div>
+        <div class="col-lg-8">
             {% editable page.basicpage.content %}
                 {{ page.basicpage.content|richtext_filters|safe }}
             {% endeditable %}
diff --git a/app/templates/pages/menus/current_tree.html b/app/templates/pages/menus/current_tree.html
new file mode 100644
index 00000000..cacfbed5
--- /dev/null
+++ b/app/templates/pages/menus/current_tree.html
@@ -0,0 +1,43 @@
+{% load i18n pages_tags %}
+
+{% spaceless %}
+{% if page_branch_in_menu %}
+<ul class="nav-tree nav-tree--level-{{ branch_level }}">
+    {% if branch_level == 0 %}
+        {% for page in page_branch %}
+            {% if page.in_menu %}
+                {% if page.is_primary and page.is_current_or_ascendant %}
+                    <li class="nav-tree__item">
+                        <a class="nav-tree__link{% if page.is_current %} active{% endif %}" href="{{ page.get_absolute_url }}">Accueil</a>
+                    </li>
+                {% endif %}
+                {% if page.is_current_or_ascendant %}
+                    {% if page.has_children_in_menu %}
+                        {% page_menu page %}
+                    {% endif %}
+                {% endif %}
+            {% endif %}
+        {% endfor %}
+    {% endif %}
+    {% if branch_level == 1 %}
+        {% for page in page_branch %}
+            <li class="nav-tree__item">
+                <a class="nav-tree__link{% if page.is_current or page.is_current_or_ascendant %} active{% endif %}" href="{{ page.get_absolute_url }}">{{ page.title }}</a>
+                {% if page.is_current_or_ascendant and page.has_children_in_menu %}
+                    <ul class="nav-tree nav-tree--level-{{ branch_level }}">
+                        {% page_menu page %}
+                    </ul>
+                {% endif %}
+            </li>
+        {% endfor %}
+    {% endif %}
+    {% if branch_level == 2 %}
+        {% for page in page_branch %}
+            <li class="nav-tree__item nav-tree__item--sub">
+                <a class="nav-tree__link nav-tree__link--sub" href="{{ page.get_absolute_url }}">{{ page.title }}</a>
+            </li>
+        {% endfor %}
+    {% endif %}
+</ul>
+{% endif %}
+{% endspaceless %}
-- 
2.39.5