Commit 626626d4 authored by alexandre's avatar alexandre

Retractable menu

parent 7dbbcc8f
......@@ -10,11 +10,74 @@ body {
line-height: 24px;
}
#score {
.outer-wrapper {
width: 100vw;
height: 100vh;
box-sizing: border-box;
display: flex;
}
.main-header {
color: white;
background-color: darkgray;
width: 300px;
/* border-right: 3px solid black; */
padding: 30px;
position: relative;
box-sizing: border-box;
transition: all .2s;
left: 0;
}
.main-header--collapsed {
left: -300px;
}
.main-header--collapsed + .main-area {
margin-left: -300px;
}
.main-area {
flex: 1;
padding: 30px 30px;
overflow: auto;
transition: all .2s;
margin-left: 0;
}
.btn-hamburger {
font-family: Sans-Serif;
font-size: 16px;
font-weight: bold;
position: absolute;
right: 10px;
top: 10px;
color: grey;
}
.btn-hamburger:hover {
color: black;
cursor:pointer;
}
.main-header--collapsed .btn-hamburger {
position: absolute;
right: -26px;
}
/* Score */
#score {
box-sizing: border-box;
display: flex;
flex-direction: row;
}
......@@ -44,7 +107,7 @@ body {
}
h1 {
#score h1 {
font-size: 2em;
line-height: 1em;
margin-bottom: 0.5em;
......
......@@ -1479,7 +1479,24 @@ window.W = window.W || {};
W.HeaderView = Backbone.Marionette.View.extend({
tagName: 'header',
template: '#header-template',
attributes: {
class: 'main-header'
},
ui: {
'toggle': '.btn-hamburger',
},
triggers: {
'click @ui.toggle': 'toggle',
},
onToggle: function() {
this.$el.toggleClass('main-header--collapsed');
}
});
......@@ -1490,9 +1507,19 @@ window.W = window.W || {};
W.BaseView = Backbone.Marionette.View.extend({
template: '#base-template',
attributes: {
class: 'outer-wrapper',
},
regions: {
header: 'header',
main: 'main'
header: {
el: '.main-header',
replaceElement: true
},
main: {
el: '.main-area',
// replaceElement: true
}
},
onRender: function () {
......
<header></header>
<main></main>
<header class="main-header"></header>
<main class="main-area"></main>
......@@ -6,24 +6,29 @@
<!-- • Aide -->
<!-- • crédits -->
<div class="btn-hamburger js-collapse">☰</div>
<nav>
Bienvenue {{ user.username }}
<ul>
{% if user.is_authenticated %}
<li><a href="{% url 'auth_logout' %}">Se déconnecter</a></li>
{% else %}
<li><a href="{% url 'auth_login' %}">Se connecter</a></li>
<li><a href="{% url 'registration_register' %}">S'inscrire</a></li>
{% endif %}
</ul>
</nav>
<div class="logo">
<h1>Organon</h1>
<h1><a href="/">Organon</a></h1>
<h2>Un logiciel pour noter l’action performée, développé par W</h2>
</div>
<nav>
<ul>
<li><a href="/">Accueil</a></li>
<li><a href="/apropos/">À propos</a></li> <!-- + crédits -->
<li><a href="/partitions/">Partitions</a></li>
<li><a href="#">Aide</a></li>
{% if user.is_authenticated %}
<li>Bienvenue {{ user.username }} <a href="{% url 'auth_login' %}">Se déconnecter</a></li>
<li><a href="#">Mes partitions</a></li>
{% else %}
<li><a href="{% url 'auth_login' %}">Se connecter</a></li>
<li><a href="{% url 'registration_register' %}">S'inscrire</a></li>
{% endif %}
</ul>
</nav>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment