added burger menu support, removed a couple imports

This commit is contained in:
Xevion
2019-07-01 11:20:19 -05:00
parent 6471193e4c
commit d1ded8a8c6
2 changed files with 28 additions and 8 deletions

23
app/static/script.js Normal file
View File

@@ -0,0 +1,23 @@
console.log('loaded')
// Close mobile & tablet menu on item click
$('.navbar-item').each(function (e) {
$(this).click(function () {
if ($('#navbar-burger-id').hasClass('is-active')) {
$('#navbar-burger-id').removeClass('is-active');
$('#navbar-menu-id').removeClass('is-active');
}
});
});
// Open or Close mobile & tablet menu
$('#navbar-burger-id').click(function () {
console.log("hit")
if ($('#navbar-burger-id').hasClass('is-active')) {
$('#navbar-burger-id').removeClass('is-active');
$('#navbar-menu-id').removeClass('is-active');
} else {
$('#navbar-burger-id').addClass('is-active');
$('#navbar-menu-id').addClass('is-active');
}
});

View File

@@ -4,7 +4,7 @@
<head>
{% block title %}
{% if title %}
<title>{{ title }} - Xevion.dev</title>
<title>{{ title }} - Xevion.dev</title>
{% else %}
<title>Xevion.dev</title>
{% endif %}
@@ -12,10 +12,8 @@
{% block head %}
<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulmaswatch/0.7.2/yeti/bulmaswatch.min.css"> -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-divider@2.0.1/dist/css/bulma-divider.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
<style type="text/css">
/* Single line word breaking for content */
.word-break {
@@ -37,15 +35,14 @@
Xevion
</a>
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false"
data-target="navbarBasicExample">
<a role="button" id="navbar-burger-id" class="navbar-burger burger" onclick="document.querySelector('.navbar-menu').classList.toggle('is-active');" aria-label="menu" aria-expanded="false">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu">
<div id="navbar-menu-id" class="navbar-menu">
<div class="navbar-start">
{% block navbarstart %}
<a href="{{ url_for('index') }}" class="navbar-item">Home</a>
@@ -62,9 +59,9 @@
<a href="{{ url_for('signup') }}" class="button is-outlined is-info">Signup</a>
{% endif %}
{% if not hideLogin %}
<a href="{{ url_for('login') }}" class="button is-outlined is-info">Login</a>
<a href="{{ url_for('login') }}" class="button is-outlined is-info">Login</a>
{% endif %}
{% else %}
<a href="{{ url_for('logout') }}" class="button is-outlined is-info">Logout</a>
{% endif %}