Commit bed5b8eb authored by A Boiteau's avatar A Boiteau Committed by Regis
Browse files

69 addition of hamburger menu for non visitor items

parent 48588a01
.navbar-item {
color: white;
padding: 5px;
margin: 0 0.5em;
}
#nav-link-list {
display: flex;
margin-left: auto;
}
#big-screen-visitor-nav{
display: none;
}
#big-screen-visitor-nav .nav-item{
margin-right: 3em;
}
.side-nav{
border-top: solid 1px white;
padding: 0.1em;
margin-left: 20px;
margin-right: 20px;
}
.nav-item a {
font-size: 1.15em;
}
.custom-toggler .navbar-toggler-icon { /*generates the hamburger menu icon, editable*/
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
.custom-toggler.navbar-toggler {
border-color: rgba(255,255,255,0.85);
}
#locale-dropdown {
position: relative;
display: block;
margin-left: 1em;
}
#locale-dropdown-list {
......@@ -12,7 +51,8 @@
}
.locale-dropdown-item a {
padding-right : 20px;
padding-right : 30px;
font-size: 0.85em;
}
.locale-dropdown-item:hover {
......@@ -27,38 +67,16 @@
border-radius: 2px 2px 0 0;
}
.navbar-item {
color: white;
padding: 5px;
margin: 0 0.5em;
}
#nav-link-list {
display: flex;
margin-left: auto;
}
.nav-switcher {
display: none;
}
@media (max-width: 1000px) {
.nav-switcher {
display: block;
@media (min-width: 1000px) {
#big-screen-visitor-nav{
display: flex;
}
#nav-link-list {
#small-screen-visitor-nav{
display: none;
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 3em;
grid-row-gap: 5px;
}
}
@media (max-width: 600px) {
#nav-link-list {
grid-template-columns: 1fr 1fr;
grid-column-gap: 9em;
grid-row-gap: 10px;
#tool-nav{
display: none;
}
}
<!DOCTYPE html>
<html lang="fr">
<html lang="{{ app.request.locale }}">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
......@@ -20,71 +20,39 @@
</style>
{% block stylesheets %}{% endblock %}
<script>
function toggleNavbar(){
let linkList = document.getElementById("nav-link-list");
window.getComputedStyle(linkList).getPropertyValue("display") === "grid" ? linkList.style.display = "none" : linkList.style.display = "grid";
function toggleSidebar(){
let sidebar = document.getElementById("nav-sidebar");
window.getComputedStyle(sidebar).getPropertyValue("display") === "none" ? sidebar.style.display = "block" : sidebar.style.display = "none";
}
window.onresize = function(){
let linkList = document.getElementById("nav-link-list");
window.innerWidth <= 1000 ? linkList.style.display = "none" : linkList.style.display = "flex"
};
</script>
</head>
<body>
<nav class="navbar navbar-nav navbar-dark fixed-top" style="background-color: #FF671F;">
<div class="container align-items-center" id="navbar">
<div class="navbar-brand">
<img src="{{ asset('public/images/logo.png') }}" alt="Logo_Vikazimut" style="padding-right:10px;">
<strong>Vikazimut</strong>
</div>
<button onclick="toggleNavbar()" class="navbar-toggler nav-switcher">
<span class="navbar-toggler-icon"></span>
</button>
<ul class="nav" id="nav-link-list">
<nav class="navbar navbar-nav navbar-dark fixed-top" style="background-color: #FF671F; height: 50pt;">
<div class="container align-items-center" id="top-navbar">
<a class="navbar-brand" href="{{ path('home') }}">
<img src="{{ asset('public/images/logo.png') }}" alt="Logo_Vikazimut" style="padding-right:10px;">
<strong>Vikazimut</strong>
</a>
<ul class="nav" id="big-screen-visitor-nav"> <!-- contains the elements of small-screen-visitor-nav and tool-nav for wide display-->
<li class="nav-item">
<a class="nav-link navbar-item" href="{{ path('home') }}">{% trans %}menu.item.home{% endtrans %}</a>
<a class="nav-link navbar-item" href="{{ path('worldmap') }}">{% trans %}menu.item.courses{% endtrans %}</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-item" href="{{ path('worldmap') }}">{% trans %}menu.item.courses{% endtrans %}</a>
<a class="nav-link navbar-item" href="{{ path('events_list') }}">{% trans %}menu.item.events{% endtrans %}</a>
</li>
{% if app.user %}
<li class="nav-item">
<a class="nav-link navbar-item" href="{{ path('events_list') }}">{% trans %}menu.item.events{% endtrans %}</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-item" href="{{ path('your_courses') }}">{% trans %}menu.item.your_courses{% endtrans %}</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-item" href="{{ path('my_events') }}">{% trans %}menu.item.my_event{% endtrans %}</a>
</li>
{% if is_granted('ROLE_ADMIN') %}
<li class="nav-item">
<a class="nav-link navbar-item" href="{{ path('all_planners') }}">{% trans %}menu.item.planners{% endtrans %}</a>
</li>
{% endif %}
{% endif %}
<li class="nav-item mr-5">
<a class="nav-link navbar-item" href="{{ path('home') }}#team ">{% trans %}menu.item.us{% endtrans %}</a>
</li>
{% if app.user %}
<a class="btn btn-outline-light mr-2" href="{{ path('profile') }}">{% trans %}your.info{% endtrans %}</a>
<a class="btn btn-light mr-2" href="{{ path('app_logout') }}">{% trans %}log.out{% endtrans %}</a>
{% else %}
<a class="btn btn-outline-light mr-2" href="{{ path('app_login') }}">{% trans %}log.in{% endtrans %}</a>
{% endif %}
<li class="nav-item">
<div class="nav navbar-nav navbar-right" id="locale-dropdown">
<button class="btn btn-secondary btn-sm" id="locale-dropdown-toggle">
<button class="btn btn-secondary btn-sm" id="locale-dropdown-toggle" style="margin-top: 5px;">
{% trans %}actual.locale{% endtrans %}
</button>
<ul id="locale-dropdown-list">
{% for locale in supported_locales %}
{% if locale != app.request.locale %}
<li class="locale-dropdown-item"> <a class="btn btn-sm" href="{{ path('change_locale', {'locale': locale}) }}">{{ supported_locales_fullname[locale] }}</a> </li>
<li class="locale-dropdown-item"><a class="btn btn-sm" href="{{ path('change_locale', {'locale': locale}) }}">{{ supported_locales_fullname[locale] }}</a></li>
{% endif %}
{% endfor %}
</ul>
......@@ -92,8 +60,83 @@
</li>
</ul>
</div>
<div id="sidebar-toggle-container" style="position: absolute; right: 13pt; top: 13pt;">
{% if app.user %}
<span class="navbar-item">{{ app.user.username }}</span>
{% endif %}
<button onclick="toggleSidebar()" class="navbar-toggler custom-toggler nav-switcher">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<div id="nav-sidebar" style="display: none; position: fixed; right: 0; top: 50pt; min-width: 200px;height: 100%; background-color: #FF671F; z-index: 999;">
<ul class="nav flex-column side-nav" id="small-screen-visitor-nav">
<li class="nav-item">
<a class="nav-link navbar-item" href="{{ path('worldmap') }}">{% trans %}menu.item.courses{% endtrans %}</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-item" href="{{ path('events_list') }}">{% trans %}menu.item.events{% endtrans %}</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-item" href="{{ path('home') }}#team ">{% trans %}menu.item.us{% endtrans %}</a>
</li>
</ul>
{% if app.user %}
<ul class="nav flex-column side-nav" id="planner-nav">
<li class="nav-item">
<a class="nav-link navbar-item" href="{{ path('your_courses') }}">{% trans %}menu.item.your_courses{% endtrans %}</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-item" href="{{ path('my_events') }}">{% trans %}menu.item.my_event{% endtrans %}</a>
</li>
</ul>
{% if is_granted('ROLE_ADMIN') %}
<ul class="nav flex-column side-nav" id="admin-nav">
<li class="nav-item">
<a class="nav-link navbar-item" href="{{ path('all_planners') }}">{% trans %}menu.item.planners{% endtrans %}</a>
</li>
</ul>
{% endif %}
{% endif %}
<ul class="nav flex-column side-nav" id="account-nav">
{% if app.user %}
<li class="nav-item">
<a class="nav-link navbar-item" href="{{ path('profile') }}">{% trans %}your.info{% endtrans %}</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-item" href="{{ path('app_logout') }}">
<img src="{{ asset('public/images/power.png') }}" alt="log_out_icon" style="height: 13px; width: 13px; margin-bottom: 4px;">
{% trans %}log.out{% endtrans %}
</a>
</li>
{% else %}
<li class="nav-item">
<a class="nav-link navbar-item" href="{{ path('app_login') }}">
<img src="{{ asset('public/images/power.png') }}" alt="log_in_icon" style="height: 13px; width: 13px; margin-bottom: 4px;">
{% trans %}log.in{% endtrans %}
</a>
</li>
{% endif %}
</ul>
<ul class="nav flex-column side-nav" id="tool-nav">
<li class="nav-item">
<div class="nav navbar-nav navbar-right" id="locale-dropdown" style="margin-top: 0.5em;">
<button class="btn btn-secondary btn-sm" id="locale-dropdown-toggle">
{% trans %}actual.locale{% endtrans %}
</button>
<ul id="locale-dropdown-list">
{% for locale in supported_locales %}
{% if locale != app.request.locale %}
<li class="locale-dropdown-item"> <a class="btn btn-sm" href="{{ path('change_locale', {'locale': locale}) }}">{{ supported_locales_fullname[locale] }}</a> </li>
{% endif %}
{% endfor %}
</ul>
</div>
</li>
</ul>
</div>
{% block body %}{% endblock %}
<footer class="container pt-1 text-muted text-left text-small">
<p>&copy; {% trans %}copyright{% endtrans %}</p>
......
......@@ -322,7 +322,7 @@
{% else %}
<input class="custom-control-input" type="checkbox" id="isPrintable">
{% endif %}
<label class="custom-control-label" for="isPrintable" style="font-size: 17px; text-decoration: underline;text-decoration-color: #fd7e14;">{% trans %} course.authorize.map.sharing {% endtrans %}</label>
<label class="custom-control-label" for="isPrintable"><h5>{% trans %} course.authorize.map.sharing {% endtrans %}</h5></label>
</div>
<div class="alert alert-primary" role="alert">
{% trans %}course.add.use.owned.map{% endtrans %}
......
......@@ -85,10 +85,6 @@
<source>add.user</source>
<target>Add a planner</target>
</trans-unit>
<trans-unit id="avU8qoV" resname="menu.item.home">
<source>menu.item.home</source>
<target>Home</target>
</trans-unit>
<trans-unit id="_E8XIEf" resname="menu.item.courses">
<source>menu.item.courses</source>
<target>Courses</target>
......
......@@ -5,10 +5,6 @@
<tool tool-id="symfony" tool-name="Symfony"/>
</header>
<body>
<trans-unit id="avU8qoV" resname="menu.item.home">
<source>menu.item.home</source>
<target>Accueil</target>
</trans-unit>
<trans-unit id="_E8XIEf" resname="menu.item.courses">
<source>menu.item.courses</source>
<target>Parcours</target>
......@@ -159,7 +155,7 @@
</trans-unit>
<trans-unit id="ihthmKK" resname="log.in">
<source>log.in</source>
<target>Espace traceur</target>
<target>Se connecter</target>
</trans-unit>
<trans-unit id="HvU6uWZ" resname="log.out">
<source>log.out</source>
......
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