Commit a15fc762 authored by antoine-boiteau's avatar antoine-boiteau
Browse files

Rework of the navbar to be more responsive and closable on screens with small widths

parent aa1e992f
......@@ -27,4 +27,39 @@
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-link-list {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 3em;
grid-row-gap: 5px;
}
}
@media (max-width: 600px) {
.nav-switcher {
display: block;
}
#nav-link-list {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 9em;
grid-row-gap: 10px;
}
}
......@@ -19,40 +19,50 @@
}
</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";
}
window.onresize = function(){
let linkList = document.getElementById("nav-link-list");
window.innerWidth <= 1000 ? linkList.style.display = "grid" : linkList.style.display = "flex"
};
</script>
</head>
<body>
<nav class="navbar navbar-nav navbar-expand-md navbar-dark fixed-top" style="background-color: #FF671F;">
<div class="container">
<div class="navbar-brand"><img src="{{ asset('public/images/logo.png') }}" alt="Logo_Vikazimut" style="padding-right:10px;"><strong>Vikazimut</strong></div>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<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>
<div class="navbar-collapse collapse" id="navbarCollapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="{{ path('home') }}">{% trans %}menu.item.home{% endtrans %}<span class="sr-only">(current)</span></a>
</li>
<ul class="nav" id="nav-link-list">
<li class="nav-item">
<a class="nav-link navbar-item" href="{{ path('home') }}">{% trans %}menu.item.home{% endtrans %}</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-item" href="{{ path('worldmap') }}">{% trans %}menu.item.courses{% endtrans %}</a>
</li>
{% if app.user %}
<li class="nav-item">
<a class="nav-link active" href="{{ path('worldmap') }}">{% trans %}menu.item.courses{% endtrans %}</a>
<a class="nav-link navbar-item" href="{{ path('your_courses') }}">{% trans %}menu.item.your_courses{% endtrans %}</a>
</li>
{% if app.user %}
{% if is_granted('ROLE_ADMIN') %}
<li class="nav-item">
<a class="nav-link active" href="{{ path('your_courses') }}">{% trans %}menu.item.your_courses{% endtrans %}</a>
<a class="nav-link navbar-item" href="{{ path('all_planners') }}">{% trans %}menu.item.planners{% endtrans %}</a>
</li>
{% if is_granted('ROLE_ADMIN') %}
<li class="nav-item">
<a class="nav-link active" href="{{ path('all_planners') }}">{% trans %}menu.item.planners{% endtrans %}</a>
</li>
{% endif %}
{% endif %}
<li class="nav-item active">
<a class="nav-link" href="{{ path('home') }}#team ">{% trans %}menu.item.us{% endtrans %}</a>
</li>
<li>
<span style="padding-left:50pt"></span>
</li>
</ul>
{% 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>
......@@ -60,22 +70,23 @@
<a class="btn btn-outline-light mr-2" href="{{ path('app_login') }}">{% trans %}log.in{% endtrans %}</a>
{% endif %}
<div class="nav navbar-nav navbar-right" id="locale-dropdown">
<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>
</div>
<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">
{% 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>
</nav>
{% block body %}{% endblock %}
<footer class="container pt-1 text-muted text-left text-small">
<p>&copy; {% trans %}copyright{% endtrans %}</p>
......
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