Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 46 additions & 0 deletions dejacode/static/css/dejacode_bootstrap.css
Original file line number Diff line number Diff line change
Expand Up @@ -1032,3 +1032,49 @@ select.bootstrap-select-filter {
position: absolute;
z-index: 1;
}
/* -- Responsive Navbar -- */
/* Collapsed navbar (mobile view) */
@media (max-width: 1199.98px) {
/* Dark mode */
[data-bs-theme=dark] #navbarCollapse,
:root:not([data-bs-theme=light]) #navbarCollapse {
background-color: #2d3e50 !important;
margin-top: 0.5rem;
padding: 0.5rem 1rem;
border-radius: 0.25rem;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
}
/* Light mode */
[data-bs-theme=light] #navbarCollapse {
background-color: #ffffff !important;
margin-top: 0.5rem;
padding: 0.5rem 1rem;
border-radius: 0.25rem;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
[data-bs-theme=light] #navbarCollapse .nav-link {
color: #212529 !important;
}
[data-bs-theme=light] #navbarCollapse .navbar-nav .nav-link:hover {
color: #0056b3 !important;
}
/* Search form width */
#navbarCollapse #search-form {
width: 100%;
}
#navbarCollapse #search-form .input-group {
width: 100%;
}
/* DejaCode dropdown width */
.navbar-brand .dropdown-menu {
width: 100%;
max-width: 300px;
}
}
/* Dropdown positioning */
.navbar-brand .dropdown-menu {
position: absolute;
top: 100%;
left: 0;
margin-top: 0;
}
33 changes: 33 additions & 0 deletions dejacode/static/js/navbar_menu_toggle.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
/*
#
# Copyright (c) nexB Inc. and others. All rights reserved.
# DejaCode is a trademark of nexB Inc.
# SPDX-License-Identifier: AGPL-3.0-only
# See https://github.com/aboutcode-org/dejacode for support or download.
# See https://aboutcode.org for more information about AboutCode FOSS projects.
#
*/

// Mutual exclusion for DejaCode dropdown and Hamburger menu
document.addEventListener('DOMContentLoaded', function() {
const dejaCodeDropdown = document.querySelector('.navbar-brand .dropdown-toggle');
const hamburgerCollapse = document.getElementById('navbarCollapse');

if (dejaCodeDropdown && hamburgerCollapse) {
// When DejaCode dropdown opens, close hamburger
dejaCodeDropdown.addEventListener('show.bs.dropdown', function() {
const bsCollapse = bootstrap.Collapse.getInstance(hamburgerCollapse);
if (bsCollapse) {
bsCollapse.hide();
}
});

// When hamburger opens, close DejaCode dropdown
hamburgerCollapse.addEventListener('show.bs.collapse', function() {
const bsDropdown = bootstrap.Dropdown.getInstance(dejaCodeDropdown);
if (bsDropdown) {
bsDropdown.hide();
}
});
}
});
1 change: 1 addition & 0 deletions dje/templates/includes/navbar_header.html
Original file line number Diff line number Diff line change
Expand Up @@ -143,4 +143,5 @@
{% endblock %}
{% endif %}
</nav>
<script src="{% static 'js/navbar_menu_toggle.js' %}"></script>
{% include 'includes/search_help_modal.html' %}