From: Jérémy Fabre <blackmagik88@gmail.com>
Date: Tue, 6 Sep 2016 15:19:01 +0000 (+0200)
Subject: Tablet & mobile navigation implementation
X-Git-Url: https://git.parisson.com/?a=commitdiff_plain;h=7b867cdde2bc7ec39ae5fcfb79584c69473ef909;p=mezzo.git

Tablet & mobile navigation implementation
---

diff --git a/app/static/src/sass/config/_config.scss b/app/static/src/sass/config/_config.scss
index 11d703c0..7811f550 100644
--- a/app/static/src/sass/config/_config.scss
+++ b/app/static/src/sass/config/_config.scss
@@ -2,6 +2,10 @@
 
 $header-pre-height: 34px;
 $header-height: 78px;
+$header-height-tablet: 70px;
+$header-height-mobile: 70px;
+$sidenav-width-tablet: 450px;
+$sidenav-width-mobile: 300px;
 
 // Home
 
diff --git a/app/static/src/sass/layout/_global.scss b/app/static/src/sass/layout/_global.scss
index a10beeff..50eaf24b 100755
--- a/app/static/src/sass/layout/_global.scss
+++ b/app/static/src/sass/layout/_global.scss
@@ -1,9 +1,25 @@
-.banner {
-    position: relative;
-    z-index: 2;
-}
-
 .main {
     @include margin(3 0 0 0);
     @include padding(1 0 0 0);
 }
+
+#container {
+    @include mq($until: sm) {
+        margin-top: $header-height-tablet;
+    }
+    @include mq($until: xs) {
+        margin-top: $header-height-mobile;
+    }
+}
+
+html, body {
+
+    @include mq($until: sm) {
+
+        overflow-x: hidden;
+        height: 100%;
+        -webkit-overflow-scrolling: touch;
+
+    }
+
+}
diff --git a/app/static/src/sass/layout/_header.scss b/app/static/src/sass/layout/_header.scss
index c53e71bf..a0dda2d5 100755
--- a/app/static/src/sass/layout/_header.scss
+++ b/app/static/src/sass/layout/_header.scss
@@ -2,12 +2,31 @@ $module: ".header";
 
 #{$module} {
 
+    z-index: 100;
+    position: relative;
+
+    @include mq($until: sm) {
+        position: fixed;
+        width: 100%;
+        top: 0;
+        left: 0;
+        z-index: 100;
+        height: $header-height-tablet;
+        @include mq($until: xs) {
+            height: $header-height-mobile;
+        }
+    }
+
     &__pre {
 
         background: $color-black;
         height: $header-pre-height;
         color: white;
 
+        @include mq($until: sm) {
+            display: none;
+        }
+
     }
 
     &__nav {
diff --git a/app/static/src/sass/modules/_all.scss b/app/static/src/sass/modules/_all.scss
index 48d5e0d7..6e3f15db 100755
--- a/app/static/src/sass/modules/_all.scss
+++ b/app/static/src/sass/modules/_all.scss
@@ -3,6 +3,7 @@
 @import "navs/nav-header";
 @import "navs/nav-footer";
 @import "navs/nav-tree";
+@import "sidebar";
 
 // Boxes
 @import 'boxes/article-box';
diff --git a/app/static/src/sass/modules/_search.scss b/app/static/src/sass/modules/_search.scss
index 82c533f5..ac838e7d 100644
--- a/app/static/src/sass/modules/_search.scss
+++ b/app/static/src/sass/modules/_search.scss
@@ -6,7 +6,7 @@ $module: ".search";
     top: 0;
     left: 0;
     width: 100%;
-    z-index: 30;
+    z-index: 100;
 
     background: rgba(255,255,255, .95);
 
diff --git a/app/static/src/sass/modules/_sidebar.scss b/app/static/src/sass/modules/_sidebar.scss
new file mode 100644
index 00000000..289d2762
--- /dev/null
+++ b/app/static/src/sass/modules/_sidebar.scss
@@ -0,0 +1,32 @@
+$module: ".sidebar";
+
+#{$module} {
+
+    @include padding-bottom(1);
+
+    &__menu {
+
+        @include padding(0 1);
+        text-align: left;
+        list-style-type: none;
+        margin: 0;
+
+    }
+
+    &__menu-item {
+
+        @include font-size(xl);
+        @include typeface(sans-serif);
+        @include line-height(2);
+        font-weight: weight(regular);
+
+        a {
+            color: black;
+            &:hover {
+                color: black;
+            }
+        }
+
+    }
+
+}
diff --git a/app/static/src/sass/modules/navs/_nav-actions.scss b/app/static/src/sass/modules/navs/_nav-actions.scss
index fea6adae..924e0eef 100644
--- a/app/static/src/sass/modules/navs/_nav-actions.scss
+++ b/app/static/src/sass/modules/navs/_nav-actions.scss
@@ -43,4 +43,54 @@ $module: ".nav-actions";
 
     }
 
+    //
+    // Sidenav overrides
+    //
+    .sidebar & {
+
+        @include padding(0.5 1);
+        text-align: left;
+
+        &__item {
+            display: block;
+            @include margin(0 0 .5 0);
+
+            &:nth-child(2):after {
+                display: none;
+            }
+        }
+
+        &__item-link {
+            color: black;
+            @include font-size(l);
+
+            &:hover {
+                color: black;
+            }
+        }
+
+        &:before {
+
+            display: block;
+            content: "";
+            background: #979797;
+            width: 240px;
+            height: 1px;
+            @include margin(0 0 1.5 0);
+
+        }
+
+        &:after {
+
+            display: block;
+            content: "";
+            background: black;
+            width: 240px;
+            height: 6px;
+            @include margin(1.5 0 .5 0);
+
+        }
+
+    }
+
 }
diff --git a/app/static/src/sass/modules/navs/_nav-header.scss b/app/static/src/sass/modules/navs/_nav-header.scss
index fd690b82..6dbd170e 100644
--- a/app/static/src/sass/modules/navs/_nav-header.scss
+++ b/app/static/src/sass/modules/navs/_nav-header.scss
@@ -9,6 +9,10 @@ $module: ".nav-header";
 
     @include margin(.5 0);
 
+    @include mq($until: sm) {
+        @include margin(0);
+    }
+
     &__item {
 
         display: inline-block;
@@ -30,6 +34,10 @@ $module: ".nav-header";
             @include margin-left(.5);
         }
 
+        &:first-child {
+            display: none;
+        }
+
         &:last-child {
             &:after {
                 display: none;
@@ -41,6 +49,14 @@ $module: ".nav-header";
             @include margin(0 0 0 .75);
             @include padding-right(.75);
 
+            @include mq($until: sm) {
+                img {
+                    height: 70px;
+                    width: auto;
+                    display: block;
+                }
+            }
+
             /*@include mq($until: md) {
                 @include margin(0 0 0 .25);
                 @include padding-right(.25);
@@ -60,6 +76,15 @@ $module: ".nav-header";
 
         &--centered {
             line-height: $header-height;
+
+            @include mq($until: sm) {
+                line-height: $header-height-tablet;
+                height: $header-height-tablet;
+            }
+            @include mq($until: xs) {
+                line-height: $header-height-mobile;
+                height: $header-height-mobile;
+            }
         }
 
         &.hover {
@@ -82,6 +107,28 @@ $module: ".nav-header";
 
         }
 
+        @include mq($until: sm) {
+
+            display: none;
+            &:first-child,
+            &:nth-child(2),
+            &:last-child {
+                display: inline-block;
+            }
+
+            &:first-child {
+                float: left;
+            }
+            &:last-child {
+                float: right;
+            }
+
+            &:after {
+                display: none;
+            }
+
+        }
+
     }
 
     &__item-link {
@@ -178,4 +225,97 @@ $module: ".nav-header";
 
     }
 
+    //
+    // Sidenav overrides
+    //
+    .sidebar & {
+
+        @include padding(0.5 1 0 1);
+        text-align: left;
+
+        &__item {
+
+            display: block;
+            text-align: left;
+            @include margin-bottom(.5);
+
+            &:first-child,
+            &:nth-child(1),
+            &:last-child {
+                display: none;
+            }
+
+            &:nth-child(2) {
+                @include margin-bottom(1.5);
+            }
+
+            &:nth-child(6) {
+                @include margin-bottom(0);
+                &:after {
+
+                    display: block;
+                    position: static;
+                    content: "";
+                    background: #979797;
+                    width: 240px;
+                    height: 1px;
+                    @include margin(1.5 0 .5 0);
+
+                }
+            }
+
+            &.hover {
+                &:before {
+                    display: none;
+                }
+            }
+
+            &--special {
+
+                display: inline-block;
+                width: 50%;
+                padding: 0;
+                margin: 0;
+
+                a {
+                    color: black;
+                }
+
+            }
+
+            &--image {
+
+                display: inline-block;
+                width: 50%;
+                padding: 0;
+                margin: 0;
+
+                img {
+                    height: 80px;
+                    width: auto;
+                    display: block;
+                }
+            }
+
+        }
+
+        &__item-link {
+
+            color: black;
+            @include font-size(xxl);
+
+            &:hover {
+                color: black;
+            }
+
+        }
+
+        &__submenu {
+
+            display: none !important;
+
+        }
+
+    }
+
 }
diff --git a/app/static/src/sass/modules/sliders/_slider-home.scss b/app/static/src/sass/modules/sliders/_slider-home.scss
index f4dc80b4..c5112208 100644
--- a/app/static/src/sass/modules/sliders/_slider-home.scss
+++ b/app/static/src/sass/modules/sliders/_slider-home.scss
@@ -4,13 +4,16 @@ $module: ".slider-home";
 
     position: relative;
 
+    @include mq($until: sm) {
+        @include margin-bottom(1);
+    }
+
     ul {
         list-style-type: none;
         margin: 0;
         padding: 0;
     }
 
-
     &__slide {
 
         width: 100%;
diff --git a/app/static/src/sass/vendors/_all.scss b/app/static/src/sass/vendors/_all.scss
index ad347e0c..258794df 100755
--- a/app/static/src/sass/vendors/_all.scss
+++ b/app/static/src/sass/vendors/_all.scss
@@ -1,2 +1,3 @@
 @import "slick";
 @import "lightslider";
+@import "pushy";
diff --git a/app/static/src/sass/vendors/_pushy.scss b/app/static/src/sass/vendors/_pushy.scss
new file mode 100644
index 00000000..6eea386e
--- /dev/null
+++ b/app/static/src/sass/vendors/_pushy.scss
@@ -0,0 +1,116 @@
+.pushy {
+
+    width: $sidenav-width-tablet;
+
+    @include mq($until: xs) {
+        width: $sidenav-width-mobile;
+    }
+
+    background: #FFFFFF;
+    border-right: 1px solid #979797;
+
+    a {
+        padding: 0;
+    }
+
+}
+
+.pushy-left {
+
+    @include transform(translate3d(-$sidenav-width-tablet, 0, 0));
+
+    @include mq($until: xs) {
+        @include transform(translate3d(-$sidenav-width-mobile, 0, 0));
+    }
+
+}
+
+.pushy-open-left #container,
+.pushy-open-left .push {
+
+    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.50);
+    @include transform(translate3d($sidenav-width-tablet, 0, 0));
+
+    @include mq($until: xs) {
+        @include transform(translate3d($sidenav-width-mobile, 0, 0));
+    }
+
+}
+
+.menu-btn {
+    position: relative;
+    width: 40px;
+    cursor: pointer;
+
+    @include mq($until: sm) {
+        height: $header-height-tablet;
+    }
+    @include mq($until: xs) {
+        height: $header-height-mobile;
+    }
+
+    .pushy-open-left & {
+
+        span {
+
+            &:before,
+            &:after {
+                opacity: 0;
+            }
+
+            &.first {
+                @include transform(rotate(45deg));
+                top: 33px;
+            }
+            &.second {
+                @include transform(rotate(-45deg));
+                top: 33px;
+            }
+
+        }
+
+    }
+
+    span {
+        display: block;
+        width: 40px;
+        height: 2px;
+        background: black;
+        position: relative;
+        position: absolute;
+        left: 0;
+        @include transition(all 0.2s ease-in-out);
+        &:before {
+            content: "";
+            display: block;
+            width: 40px;
+            height: 2px;
+            background: black;
+            position: absolute;
+            left: 0;
+            top: -4px;
+            opacity: 1;
+            @include transition(all 0.2s ease-in-out);
+        }
+        &:after {
+            content: "";
+            display: block;
+            width: 40px;
+            height: 2px;
+            background: black;
+            position: absolute;
+            left: 0;
+            bottom: -4px;
+            opacity: 1;
+            @include transition(all 0.2s ease-in-out);
+        }
+    }
+
+    span.first {
+        top: 27px;
+    }
+    span.second {
+        top: 39px;
+    }
+
+}
diff --git a/app/templates/base.html b/app/templates/base.html
index cfafecfd..95c3bc29 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -34,6 +34,7 @@
     {% compress css %}
     <link rel="stylesheet" href="{% static "vendors/font-awesome/css/font-awesome.css" %}">
     <link rel="stylesheet" href="{% static "vendors/lightslider/dist/css/lightslider.css" %}">
+    <link rel="stylesheet" href="{% static "vendors/pushy/css/pushy.css" %}">
     <link rel="stylesheet" href="{% static "css/index.min.css" %}">
     {% endcompress %}
 
@@ -42,97 +43,137 @@
 
 <body id="{% block body_id %}body{% endblock %}" class="{% block body_class %}{% endblock %}">
     {% spaceless %}
-    <div class="banner" role="banner">
-        <div class="header">
-            <div class="header__pre">
-                <div class="container">
-                    <div class="row">
-                        <div class="col-md-10 col-md-push-1 tac">
-                            {% page_menu "pages/menus/action.html" %}
-                        </div>
-                        <div class="col-md-1 col-md-push-1 tar">
-                            {% if settings.USE_MODELTRANSLATION and languages|length > 1 %}
-                                {% nevercache %}
-                                {% include "includes/language_selector.html" %}
-                                {% endnevercache %}
-                                <ul class="lang-switcher" id="langSelector">
-                                    {% for language in languages %}
-                                        {% if language.code == LANGUAGE_CODE %}
-                                            <li class="lang-switcher__item active">
-                                                <a href="#">
-                                                  {{ language.code|title }}
-                                                </a>
-                                            </li>
-                                        {% endif %}
-                                    {% endfor %}
-                                    {% for language in languages %}
-                                        {% if language.code != LANGUAGE_CODE %}
-                                            <li class="lang-switcher__item">
-                                                <a href="#" data-lang="{{ language.code }}">
-                                                  {{ language.code|title }}
-                                                </a>
-                                            </li>
-                                        {% endif %}
-                                    {% endfor %}
-                                </ul>
-                            {% endif %}
-                        </div>
+
+    <div class="pushy pushy-left">
+
+        {% include "includes/sidebar.html" %}
+
+    </div>
+
+    <div class="site-overlay">
+
+    </div>
+
+    <div class="header push">
+
+        <div class="header__pre">
+
+            <div class="container">
+
+                <div class="row">
+
+                    <div class="col-md-10 col-md-push-1 tac">
+
+                        {% page_menu "pages/menus/action.html" %}
+
+                    </div>
+                    <div class="col-md-1 col-md-push-1 tar">
+
+                        {% if settings.USE_MODELTRANSLATION and languages|length > 1 %}
+                            {% nevercache %}
+                            {% include "includes/language_selector.html" %}
+                            {% endnevercache %}
+                            <ul class="lang-switcher" id="langSelector">
+
+                                {% for language in languages %}
+                                    {% if language.code == LANGUAGE_CODE %}
+                                        <li class="lang-switcher__item active">
+
+                                            <a href="#">
+                                              {{ language.code|title }}
+                                            </a>
+
+                                        </li>
+                                    {% endif %}
+                                {% endfor %}
+                                {% for language in languages %}
+                                    {% if language.code != LANGUAGE_CODE %}
+                                        <li class="lang-switcher__item">
+
+                                            <a href="#" data-lang="{{ language.code }}">
+                                              {{ language.code|title }}
+                                            </a>
+
+                                        </li>
+                                    {% endif %}
+                                {% endfor %}
+                            </ul>
+                        {% endif %}
                     </div>
+
                 </div>
+
             </div>
-            <div class="container">
-                <div class="row header__nav">
-                    <div class="col-md-12 tac">
+
+        </div>
+
+        <div class="container">
+
+            <div class="row header__nav">
+
+                <div class="col-md-12 tac">
+
+                    <div id="navHeader">
                         {% page_menu "pages/menus/header.html" %}
                     </div>
+
                 </div>
-                {% if not on_home %}
-                    <div class="row white-bg">
-                        <div class="col-md-8 col-md-push-2">
-                            <ul class="breadcrumb">
-                                {% spaceless %}
-                                {% block breadcrumb_menu %}{% page_menu "pages/menus/breadcrumb.html" %}{% endblock %}
-                                {% endspaceless %}
-                            </ul>
-                        </div>
-                    </div>
-                {% endif %}
+
             </div>
+            {% if not on_home %}
+                <div class="row white-bg">
+
+                    <div class="col-md-8 col-md-push-2">
+
+                        <ul class="breadcrumb">
+
+                            {% spaceless %}
+                            {% block breadcrumb_menu %}{% page_menu "pages/menus/breadcrumb.html" %}{% endblock %}
+                            {% endspaceless %}
+
+                        </ul>
+
+                    </div>
+
+                </div>
+            {% endif %}
         </div>
 
     </div>
 
-    {% if on_home %}
-        {% include "includes/slider.html" %}
-    {% endif %}
+    <div id="container">
 
-    <main class="main" role="main">
-        {% block content_header %}{% endblock %}
-        {% block main %}{% endblock %}
-        {% block content_footer %}{% endblock %}
-    </main>
+        <main class="main" role="main">
 
-    <footer class="footer" role="footer">
+            {% block content_header %}{% endblock %}
+            {% block main %}{% endblock %}
+            {% block content_footer %}{% endblock %}
 
-        <div class="footer__pre">
+        </main>
 
-            <div class="container">
+        <footer class="footer" role="footer">
 
-                <div class="row">
+            <div class="footer__pre">
 
-                    <div class="col-sm-6 col-sm-push-1 tal-sm tac-sm tal-xs">
+                <div class="container">
 
-                        newsletter
+                    <div class="row">
 
-                    </div>
+                        <div class="col-sm-6 col-sm-push-1 tal-sm tac-sm tal-xs">
+
+                            newsletter
+
+                        </div>
 
-                    <div class="col-sm-3 col-sm-push-1 tac-sm tal-xs">
+                        <div class="col-sm-3 col-sm-push-1 tac-sm tal-xs">
 
-                        <a class="footer__follow-link facebook" href="https://www.facebook.com/iIRCAM/" target="_blank" title="{% trans 'Follow us on Facebook' %}"><i class="fa fa-facebook-square"></i></a>
-                        <a class="footer__follow-link twitter" href="https://twitter.com/ircam" target="_blank" title="{% trans 'Follow us on Twitter' %}"><i class="fa fa-twitter-square"></i></a>
-                        <a class="footer__follow-link instagram" href="https://www.instagram.com/ircam_paris/" target="_blank" title="{% trans 'Follow us on Instagram' %}"><i class="fa fa-instagram"></i></a>
-                        <a class="footer__follow-link youtube" href="https://www.youtube.com/user/Ircam75" target="_blank" title="{% trans 'Follow us on Youtube' %}"><i class="fa fa-youtube-square"></i></a>
-                        <a class="footer__follow-link vimeo" href="https://vimeo.com/ircam" target="_blank" title="{% trans 'Follow us on Vimeo' %}"><i class="fa fa-vimeo-square"></i></a>
+                            <a class="footer__follow-link facebook" href="https://www.facebook.com/iIRCAM/" target="_blank" title="{% trans 'Follow us on Facebook' %}"><i class="fa fa-facebook-square"></i></a>
+                            <a class="footer__follow-link twitter" href="https://twitter.com/ircam" target="_blank" title="{% trans 'Follow us on Twitter' %}"><i class="fa fa-twitter-square"></i></a>
+                            <a class="footer__follow-link instagram" href="https://www.instagram.com/ircam_paris/" target="_blank" title="{% trans 'Follow us on Instagram' %}"><i class="fa fa-instagram"></i></a>
+                            <a class="footer__follow-link youtube" href="https://www.youtube.com/user/Ircam75" target="_blank" title="{% trans 'Follow us on Youtube' %}"><i class="fa fa-youtube-square"></i></a>
+                            <a class="footer__follow-link vimeo" href="https://vimeo.com/ircam" target="_blank" title="{% trans 'Follow us on Vimeo' %}"><i class="fa fa-vimeo-square"></i></a>
+
+                        </div>
 
                     </div>
 
@@ -140,111 +181,111 @@
 
             </div>
 
-        </div>
-
-        <div class="footer__content">
+            <div class="footer__content">
 
-            <div class="container">
+                <div class="container">
 
-                <div class="row">
+                    <div class="row">
 
-                    <div class="col-xs-3 col-sm-3 col-sm-push-1 tal">
+                        <div class="col-xs-3 col-sm-3 col-sm-push-1 tal">
 
-                        <a href="{% url "home" %}" title="{% trans 'Home' %}"><img src="{% static "img/logo-ircam-white.png" %}" width="151" /></a>
+                            <a href="{% url "home" %}" title="{% trans 'Home' %}"><img src="{% static "img/logo-ircam-white.png" %}" width="151" /></a>
 
-                    </div>
+                        </div>
 
-                    <div class="col-xs-3 col-sm-2 col-sm-push-1 tar-sm tal">
+                        <div class="col-xs-3 col-sm-2 col-sm-push-1 tar-sm tal">
 
-                        <strong>IRCAM</strong><br />
-                        <br />
-                        1 Place Igor-Stravinsky<br />
-                        75004 Paris<br />
-                        t. +33 1 44 78 48 43
+                            <strong>IRCAM</strong><br />
+                            <br />
+                            1 Place Igor-Stravinsky<br />
+                            75004 Paris<br />
+                            t. +33 1 44 78 48 43
 
-                    </div>
+                        </div>
 
-                    <div class="col-xs-3 col-sm-2 col-sm-push-1 tar-sm tal">
+                        <div class="col-xs-3 col-sm-2 col-sm-push-1 tar-sm tal">
 
-                        <strong>{% trans 'Opening times' %}</strong><br />
-                        <br />
-                        du lundi au vendredi<br />
+                            <strong>{% trans 'Opening times' %}</strong><br />
+                            <br />
+                            du lundi au vendredi<br />
 
                        09:30–19:00<br />
-                        fermé le samedi et dimanche
+                            fermé le samedi et dimanche
 
-                    </div>
+                        </div>
 
-                    <div class="col-xs-3 col-sm-2 col-sm-push-1 tar-sm tal">
+                        <div class="col-xs-3 col-sm-2 col-sm-push-1 tar-sm tal">
 
-                        <strong>{% trans 'Subway access' %}</strong><br />
-                        <br />
-                        Hôtel de Ville, Rambuteau,<br />
-                        Châtelet, Les Halles
+                            <strong>{% trans 'Subway access' %}</strong><br />
+                            <br />
+                            Hôtel de Ville, Rambuteau,<br />
+                            Châtelet, Les Halles
+
+                        </div>
 
                     </div>
 
-                </div>
+                    <div class="row">
 
-                <div class="row">
+                        <div class="col-sm-10 col-sm-push-1">
 
-                    <div class="col-sm-10 col-sm-push-1">
+                            <div class="footer__separator"></div>
 
-                        <div class="footer__separator"></div>
+                        </div>
 
                     </div>
 
-                </div>
+                    <div class="row">
 
-                <div class="row">
+                        <div class="col-xs-4 col-sm-3 col-sm-push-1 tal">
 
-                    <div class="col-xs-4 col-sm-3 col-sm-push-1 tal">
+                            {% page_menu "pages/menus/footer_vertical.html" %}
 
-                        {% page_menu "pages/menus/footer_vertical.html" %}
+                        </div>
 
-                    </div>
+                        <div class="col-xs-4 col-sm-5 col-sm-push-1 tal">
 
-                    <div class="col-xs-4 col-sm-5 col-sm-push-1 tal">
+                            <strong>Institut de Recherche et Coordination Acoustique/Musique</strong> {% trans 'under the tutelage of' %} :<br />
+                            <br />
+                            <a href="http://www.culturecommunication.gouv.fr/" target="_blank" title="Ministère de la Culture et de la Communication"><img class="footer__partner" width="120" height="66" src="{% static "img/partners/logo-ministere-culture.png" %}" /></a>
+                            <a href="http://www.cnrs.fr/" target="_blank" title="Centre National de la Recherche Scientifique"><img class="footer__partner" width="120" height="66" src="{% static "img/partners/logo-cnrs.png" %}" /></a>
+                            <a href="http://www.upmc.fr/" target="_blank" title="Université Pierre et Marie Curie"><img class="footer__partner" width="120" height="66" src="{% static "img/partners/logo-upmc.png" %}" /></a>
+                            <a href="http://www.inria.fr/" target="_blank" title="Inria"><img class="footer__partner" width="120" height="66" src="{% static "img/partners/logo-inria.png" %}" /></a>
 
-                        <strong>Institut de Recherche et Coordination Acoustique/Musique</strong> {% trans 'under the tutelage of' %} :<br />
-                        <br />
-                        <a href="http://www.culturecommunication.gouv.fr/" target="_blank" title="Ministère de la Culture et de la Communication"><img class="footer__partner" width="120" height="66" src="{% static "img/partners/logo-ministere-culture.png" %}" /></a>
-                        <a href="http://www.cnrs.fr/" target="_blank" title="Centre National de la Recherche Scientifique"><img class="footer__partner" width="120" height="66" src="{% static "img/partners/logo-cnrs.png" %}" /></a>
-                        <a href="http://www.upmc.fr/" target="_blank" title="Université Pierre et Marie Curie"><img class="footer__partner" width="120" height="66" src="{% static "img/partners/logo-upmc.png" %}" /></a>
-                        <a href="http://www.inria.fr/" target="_blank" title="Inria"><img class="footer__partner" width="120" height="66" src="{% static "img/partners/logo-inria.png" %}" /></a>
+                        </div>
 
-                    </div>
+                        <div class="col-xs-4 col-sm-2 col-sm-push-1 tal">
 
-                    <div class="col-xs-4 col-sm-2 col-sm-push-1 tal">
+                            {% trans 'go to' %} :
+                            <ul class="unstyled-list">
+                                <li>
+                                    <a class="footer__link" href="https://www.centrepompidou.fr/" target="_blank" title="Centre Pompidou">Centre Pompidou</a>
+                                </li>
+                                <li>
+                                    <a class="footer__link" href="http://www.bpi.fr/home.html" target="_blank" title="Bibliothèque Public d’Information">Bibliothèque Public d’Information</a>
+                                </li>
+                            </ul>
 
-                        {% trans 'go to' %} :
-                        <ul class="unstyled-list">
-                            <li>
-                                <a class="footer__link" href="https://www.centrepompidou.fr/" target="_blank" title="Centre Pompidou">Centre Pompidou</a>
-                            </li>
-                            <li>
-                                <a class="footer__link" href="http://www.bpi.fr/home.html" target="_blank" title="Bibliothèque Public d’Information">Bibliothèque Public d’Information</a>
-                            </li>
-                        </ul>
+                        </div>
 
                     </div>
 
-                </div>
+                    <div class="row">
 
-                <div class="row">
+                        <div class="col-sm-10 col-sm-push-1">
 
-                    <div class="col-sm-10 col-sm-push-1">
+                            <div class="footer__separator footer__seprator--small"></div>
 
-                        <div class="footer__separator footer__seprator--small"></div>
+                        </div>
 
                     </div>
 
-                </div>
+                    <div class="row">
 
-                <div class="row">
+                        <div class="col-sm-10 col-sm-push-1">
 
-                    <div class="col-sm-10 col-sm-push-1">
+                            {% page_menu "pages/menus/footer_horizontal.html" %}
 
-                        {% page_menu "pages/menus/footer_horizontal.html" %}
+                        </div>
 
                     </div>
 
@@ -252,9 +293,9 @@
 
             </div>
 
-        </div>
+        </footer>
 
-    </footer>
+    </div>
 
     {% include "includes/search_form.html" %}
     {% include "includes/footer_scripts.html" %}
diff --git a/app/templates/includes/footer_scripts.html b/app/templates/includes/footer_scripts.html
index 076c76be..5889acc5 100644
--- a/app/templates/includes/footer_scripts.html
+++ b/app/templates/includes/footer_scripts.html
@@ -7,6 +7,7 @@
     <script src="{% static "vendors/jquery-throttle-debounce/jquery.ba-throttle-debounce.js" %}"></script>
     <script src="{% static "vendors/lightslider/dist/js/lightslider.js" %}"></script>
     <script src="{% static "vendors/imagesloaded/imagesloaded.pkgd.js" %}"></script>
+    <script src="{% static "vendors/pushy/js/pushy.js" %}"></script>
     <script src="{% static "js/index.min.js" %}"></script>
 {% block extra_js %}{% endblock %}
 {% editable_loader %}
diff --git a/app/templates/includes/sidebar.html b/app/templates/includes/sidebar.html
new file mode 100644
index 00000000..30c9aba2
--- /dev/null
+++ b/app/templates/includes/sidebar.html
@@ -0,0 +1,17 @@
+{% load i18n pages_tags mezzanine_tags staticfiles keyword_tags event_tags  %}
+
+<div class="sidebar">
+
+    {% page_menu "pages/menus/header.html" %}
+    {% page_menu "pages/menus/action.html" %}
+
+    <ul class="sidebar__menu">
+        <li class="sidebar__menu-item">
+            <a href="#" title="{% trans "Magazine" %}">{% trans "Magazine" %}</a>
+        </li>
+        <li class="sidebar__menu-item">
+            <a href="#" title="{% trans "Magazine" %}">{% trans "Medias" %}</a>
+        </li>
+    </ul>
+
+</div>
diff --git a/app/templates/index.html b/app/templates/index.html
index 4a90bb5a..c3b14c5a 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -36,7 +36,7 @@
           </div>
       </li>
       <li class="home__menu-item">
-          <a href="#" title="{% trans "Brief" %}">{% trans "Brief" %}</a>
+          <a href="#" title="{% trans "Brief" %}">{% trans "Briefs" %}</a>
           <div class="home__shutter">
               <div class="home__shutter-content">
                   <div class="container-fluid tal">
@@ -46,7 +46,7 @@
           </div>
       </li>
       <li class="home__menu-item">
-          <a href="#" title="{% trans "Media" %}">{% trans "Media" %}</a>
+          <a href="#" title="{% trans "Media" %}">{% trans "Medias" %}</a>
       </li>
     </ul>
 
diff --git a/app/templates/pages/menus/header.html b/app/templates/pages/menus/header.html
index 1051fdc4..030bc1ac 100644
--- a/app/templates/pages/menus/header.html
+++ b/app/templates/pages/menus/header.html
@@ -6,7 +6,11 @@
     {% for page in page_branch %}
         {% if page.is_primary %}
             {% if forloop.first %}
-                <ul class="nav-header" role="navigation" id="navHeader">
+                <ul class="nav-header" role="navigation">
+                    <li class="nav-header__item menu-btn">
+                        <span class="first"></span>
+                        <span class="second"></span>
+                    </li>
                     <li class="nav-header__item nav-header__item--image">
                         <a href="{% url "home" %}" title="{% trans 'Home' %}"><img src="{% static "img/logo-ircam.png" %}" width="118" height="80" /></a>
                     </li>
@@ -15,12 +19,11 @@
         {% if page.in_menu %}
             <li class="nav-header__item">
                 <a class="nav-header__item-link{% if page.is_current_or_ascendant %} active{% endif %}" href="{{ page.get_absolute_url }}" title="{{ page.title }}">{{ page.title }}</a>
-
-        {% endif %}
-        {% if page.has_children_in_menu %}
-            {% page_menu page "pages/menus/header_tree_primary.html" %}
-        {% endif %}
+                {% if page.has_children_in_menu %}
+                    {% page_menu page "pages/menus/header_tree_primary.html" %}
+                {% endif %}
             </li>
+        {% endif %}
         {% if page.is_primary %}
             {% if forloop.last %}
                 <li class="nav-header__item nav-header__item--special">
diff --git a/bower.json b/bower.json
index 4f5458dd..355d799d 100644
--- a/bower.json
+++ b/bower.json
@@ -23,6 +23,7 @@
     "lightslider": "^1.1.5",
     "lightgallery": "^1.2.21",
     "jquery": "https://github.com/components/jquery.git#2.2.4",
-    "imagesloaded": "^4.1.1"
+    "imagesloaded": "^4.1.1",
+    "pushy": "^1.0.0"
   }
 }