Skip to content
Snippets Groups Projects
Commit cefdb564 authored by Miniontoby's avatar Miniontoby :writing_hand_tone1:
Browse files

Updated the navbar layout to make mobile nav menu work (ONLY WITH JS)

parent 4d242e28
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
panel/static/main.js 0 → 100644
+ 21
− 0
View file @ cefdb564
document.addEventListener('DOMContentLoaded', () => {
// Get all "navbar-burger" elements
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
// Add a click event on each of them
$navbarBurgers.forEach( el => {
el.addEventListener('click', () => {
// Get the target from the "data-target" attribute
const target = el.dataset.target;
const $target = document.getElementById(target);
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
});
panel/static/style.css
+ 13
− 0
View file @ cefdb564
......@@ -38,3 +38,16 @@ select:invalid {
margin-top: 5px;
margin-bottom: 5px;
}
nav.navbar {
align-items: start;
}
nav.navbar > .container {
justify-content: end;
margin-right: 0px;
}
nav.navbar > .navbar-burger {
margin-left: 0px;
}
panel/templates/base.html
+ 13
− 6
View file @ cefdb564
......@@ -9,6 +9,7 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" />
<script src="{{ url_for('static', filename='main.js') }}"></script>
</head>
<body>
......@@ -17,12 +18,13 @@
<div class="hero-head">
<nav class="navbar">
<div class="container">
<div id="navbarMenuHeroA" class="navbar-menu">
<div class="navbar-end">
<a href="{{ url_for('main.index') }}" class="navbar-item">
Home
</a>
<div class="container-fluid container">
<!--<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarMenuHeroA" data-bs-toggle="collapse" data-bs-target="#navbarMenuHeroA">-->
<div class="navbar-menu" id="navbarMenuHeroA">
<ul class="navbar-end">
<a href="{{ url_for('main.index') }}" class="navbar-item">
Home
</a>
{% if current_user.is_authenticated %}
<a href="{{ url_for('main.profile') }}" class="navbar-item">
Profile
......@@ -46,6 +48,11 @@
{% endif %}
</div>
</div>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarMenuHeroA">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
</nav>
</div>
......
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