remove bootstrap : rework navbar

This commit is contained in:
Iziram 2024-08-27 14:06:29 +02:00
parent cf174cdc18
commit 1e7038a968
2 changed files with 137 additions and 1 deletions

View File

@ -496,6 +496,138 @@ fieldset {
/* #endregion pagination */
/* #region navbar */
/* Navbar container */
.navbar {
background-color: #f8f9fa;
padding: 8px 2px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
display: flex;
justify-content: center;
}
.navbar>.container.container-fluid {
margin: 4px 2px;
}
.container-fluid {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 15px;
}
.navbar-collapse {
width: 100%;
display: flex;
}
/* Brand/logo */
.navbar-brand {
font-size: 1.25rem;
font-weight: bold;
color: #333;
text-decoration: none;
}
/* Navigation links container */
.navbar-nav {
display: flex;
list-style-type: none;
margin: 0;
padding: 0;
}
/* Navigation links */
.nav-item {
margin: 0 10px;
}
.nav-link {
color: #333;
text-decoration: none;
font-size: 1rem;
transition: color 0.2s ease-in-out;
}
.nav-link:hover {
color: #007bff;
}
/* Responsive toggle button */
.navbar-toggler {
display: none;
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
}
.navbar-toggler-icon {
display: inline-block;
width: 1.5em;
height: 1.5em;
vertical-align: middle;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
}
/* Media query for responsive design */
@media (max-width: 767px) {
.navbar-collapse {
display: none;
width: 100%;
}
.navbar-collapse.show {
display: block;
}
.navbar-nav {
flex-direction: column;
width: 100%;
}
.nav-item {
margin: 10px 0;
}
.navbar-toggler {
display: block;
}
.container-fluid {
flex-wrap: wrap;
}
.navbar-brand {
flex-grow: 1;
}
}
/* Specific styles for your layout */
.navbar-nav.justify-content-center {
flex-grow: 1;
justify-content: center;
}
.navbar-nav.ms-auto {
justify-content: flex-end;
margin-left: auto !important;
}
.logout .nav-link {
color: #dc3545;
}
.logout .nav-link:hover {
color: #a71d2a;
}
/* #endregion navbar */
/* #endregion bootstrap ==> */

View File

@ -22,7 +22,7 @@
{# NAVBAR CONTENT #}
<div class="collapse navbar-collapse justify-content-center align-items-center" id="index-nav">
<ul class="navbar-nav justify-content-center">
<ul class="navbar-nav">
{% if current_user.is_administrator() %}
<li class="nav-item"><a class="nav-link" href="{{ url_for('scodoc.configuration') }}">Configuration</a></li>
{% endif %}
@ -89,5 +89,9 @@
<script>
const SCO_URL = "{% if g.scodoc_dept %}{{
url_for('scolar.index_html', scodoc_dept=g.scodoc_dept)}}{% endif %}";
document.querySelector('.navbar-toggler').addEventListener('click', function() {
document.querySelector('.navbar-collapse').classList.toggle('show');
});
</script>
{% endblock %}