diff --git a/wiki/menu.html b/wiki/menu.html
index 0a07d7c12632799374e408f7cd4f23d17771d7dc..5b5233288f83bba80498e1a6e524def2d346b798 100644
--- a/wiki/menu.html
+++ b/wiki/menu.html
@@ -3,127 +3,154 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Navigation Bar</title>
+ <title>Responsive Navigation Bar</title>
<style>
-
- .my-nav {
- background-color: rgba(255, 228, 225, 0.95);
- padding: 10px 0;
- position: fixed;
- width: 100%;
- top: 0;
- left: 0;
- z-index: 1000;
- height: 50px;
- border-bottom: 2px solid #fa8072;
- box-shadow: 0 2px 10px rgba(0,0,0,0.1);
- display: flex;
- justify-content: center;
- transition: all 0.3s ease;
- }
- .my-navbar {
- list-style-type: none;
- padding: 0;
- margin: 0;
- display: flex;
- justify-content: center;
- align-items: center;
- height: 100%;
- }
-
- .my-navbar > li {
- position: relative;
- margin: 0 15px;
- }
-
- .my-navbar > li > a {
- color: #333;
- text-decoration: none;
- padding: 10px 15px;
- display: block;
- border-radius: 20px;
- transition: all 0.3s ease;
- font-weight: 500;
- letter-spacing: 0.5px;
- }
-
- .my-navbar > li > a:hover,
- .my-navbar > li > a.active {
- background-color: #fa8072;
- color: white;
- transform: translateY(-2px);
- box-shadow: 0 4px 10px rgba(250, 128, 114, 0.3);
- }
-
- .son {
- display: none;
- position: absolute;
- background-color: rgba(255, 255, 255, 0.95);
- min-width: 200px;
- box-shadow: 0 8px 16px rgba(0,0,0,0.1);
- z-index: 1;
- opacity: 0;
- transition: all 0.3s ease;
- top: 100%;
- border-radius: 10px;
- overflow: hidden;
- padding: 5px; /* Add some padding */
- }
-
- .son li {
- margin: 5px 0;
- }
-
- .son li a {
- color: #333;
- padding: 12px 20px;
- text-decoration: none;
- display: block;
- transition: all 0.3s ease;
- white-space: nowrap;
- border-radius: 20px;
- }
-
- .son li a:hover {
- background-color: #fa8072;
- color: white;
- transform: translateY(-2px);
- box-shadow: 0 4px 10px rgba(250, 128, 114, 0.3);
- }
-
- @media (max-width: 768px) {
- .my-nav {
- height: auto;
- padding: 10px;
- }
-
- .my-navbar {
- flex-direction: column;
- align-items: flex-start;
- }
-
- .my-navbar > li {
- margin: 5px 0;
- }
-
- .logo-container {
- position: static;
- margin-bottom: 10px;
- }
-
- .navbar-logo {
- height: 100px;
- }
- }
+ body {
+ margin: 0;
+ font-family: Calibri, sans-serif;
+ }
+ .my-nav {
+ background-color: rgba(255, 228, 225, 0.95);
+ padding: 0 20px;
+ position: fixed;
+ width: 100%;
+ top: 0;
+ left: 0;
+ z-index: 1000;
+ height: 50px;
+ border-bottom: 2px solid #fa8072;
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ box-sizing: border-box;
+ }
+ .my-navbar {
+ list-style-type: none;
+ padding: 0;
+ margin: 0;
+ display: flex;
+ align-items: center;
+ height: 100%;
+ }
+ .my-navbar > li {
+ position: relative;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ }
+ .my-navbar > li > a {
+ color: #333;
+ text-decoration: none;
+ padding: 0 15px;
+ display: flex;
+ align-items: center;
+ height: 100%;
+ transition: all 0.3s ease;
+ font-weight: 500;
+ letter-spacing: 0.5px;
+ }
+ .my-navbar > li > a:hover,
+ .my-navbar > li > a.active {
+ background-color: #fa8072;
+ color: white;
+ }
+ .son {
+ display: none;
+ position: absolute;
+ background-color: rgba(255, 255, 255, 0.95);
+ min-width: 200px;
+ box-shadow: 0 8px 16px rgba(0,0,0,0.1);
+ z-index: 1;
+ opacity: 0;
+ transition: all 0.3s ease;
+ top: 100%;
+ left: 0;
+ border-radius: 0 0 10px 10px;
+ overflow: hidden;
+ }
+ .son li {
+ margin: 0;
+ }
+ .son li a {
+ color: #333;
+ padding: 12px 20px;
+ text-decoration: none;
+ display: block;
+ transition: all 0.3s ease;
+ white-space: nowrap;
+ }
+ .son li a:hover {
+ background-color: #fa8072;
+ color: white;
+ }
+ .menu-icon {
+ display: none;
+ cursor: pointer;
+ padding: 10px;
+ }
+ .menu-icon div {
+ width: 25px;
+ height: 3px;
+ background-color: #333;
+ margin: 5px 0;
+ transition: all 0.3s ease;
+ }
+ @media (max-width: 768px) {
+ .menu-icon {
+ display: block;
+ }
+ .my-navbar {
+ position: fixed;
+ right: -100%;
+ top: 52px;
+ flex-direction: column;
+ background-color: rgba(255, 228, 225, 0.95);
+ width: 100%;
+ text-align: center;
+ transition: 0.3s;
+ box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
+ height: calc(100% - 52px);
+ overflow-y: auto;
+ }
+ .my-navbar.active {
+ right: 0;
+ }
+ .my-navbar > li {
+ margin: 0;
+ width: 100%;
+ height: auto;
+ }
+ .my-navbar > li > a {
+ padding: 15px;
+ width: 100%;
+ box-sizing: border-box;
+ }
+ .son {
+ position: static;
+ display: none;
+ background-color: rgba(250, 128, 114, 0.1);
+ box-shadow: none;
+ opacity: 1;
+ width: 100%;
+ }
+ .son.active {
+ display: block;
+ }
+ }
</style>
</head>
-
<body>
<nav class="my-nav" id="navbox">
+ <div class="menu-icon" onclick="toggleMenu()">
+ <div></div>
+ <div></div>
+ <div></div>
+ </div>
<ul class="my-navbar" id="my-navbar">
<li><a href="{{ url_for('home') }}">Home</a></li>
- <li onmouseover="over(this)" onmouseleave="leave(this)">
- <a href="#" style="cursor:default;">Project</a>
+ <li>
+ <a href="#" onclick="toggleSubmenu(this)">Project</a>
<ul class="son">
<li><a href="{{ url_for('pages', page='description') }}">Description</a></li>
<li><a href="{{ url_for('pages', page='engineering') }}">Engineering</a></li>
@@ -132,31 +159,31 @@
<li><a href="{{ url_for('pages', page='contribution') }}">Contribution</a></li>
</ul>
</li>
- <li onmouseover="over(this)" onmouseleave="leave(this)">
- <a href="#" style="cursor:default;">Wetlab</a>
+ <li>
+ <a href="#" onclick="toggleSubmenu(this)">Wetlab</a>
<ul class="son">
<li><a href="{{ url_for('pages', page='therapy-system') }}">Therapy System</a></li>
<li><a href="{{ url_for('pages', page='colonization') }}">Colonization</a></li>
<li><a href="{{ url_for('pages', page='parts') }}">Parts</a></li>
</ul>
</li>
- <li onmouseover="over(this)" onmouseleave="leave(this)">
- <a href="#" style="cursor:default;">Drylab</a>
+ <li>
+ <a href="#" onclick="toggleSubmenu(this)">Drylab</a>
<ul class="son">
<li><a href="{{ url_for('pages', page='model') }}">Model</a></li>
<li><a href="{{ url_for('pages', page='hardware') }}">Hardware</a></li>
</ul>
</li>
- <li onmouseover="over(this)" onmouseleave="leave(this)">
- <a href="#" style="cursor:default;">Human Practices</a>
+ <li>
+ <a href="#" onclick="toggleSubmenu(this)">Human Practices</a>
<ul class="son">
<li><a href="{{ url_for('pages', page='human-practices') }}">Details</a></li>
<li><a href="{{ url_for('pages', page='education') }}">Education</a></li>
<li><a href="{{ url_for('pages', page='inclusivity') }}">Inclusivity</a></li>
</ul>
</li>
- <li onmouseover="over(this)" onmouseleave="leave(this)">
- <a href="#" style="cursor:default;">Team</a>
+ <li>
+ <a href="#" onclick="toggleSubmenu(this)">Team</a>
<ul class="son">
<li><a href="{{ url_for('pages', page='team') }}">Roster</a></li>
<li><a href="{{ url_for('pages', page='attributions') }}">Attributions</a></li>
@@ -167,30 +194,38 @@
</nav>
<script>
- function over(el){
- el.children[0].classList.add('active');
- if (el.children.length > 1){
- let son = el.children[1];
- if (getComputedStyle(son,null)["display"]=="none"){
- son.style.display = "block";
- setTimeout(function(){
- son.style.opacity = 1;
- }, 10);
- }
- }
+ function toggleMenu() {
+ const navbar = document.getElementById('my-navbar');
+ navbar.classList.toggle('active');
}
- function leave(el){
- el.children[0].classList.remove('active');
- if (el.children.length > 1){
- let son = el.children[1];
- if (getComputedStyle(son,null)["display"]=="block"){
- son.style.opacity = 0;
- setTimeout(function(){
- son.style.display = "none";
- }, 300);
- }
- }
+
+ function toggleSubmenu(el) {
+ if (window.innerWidth <= 768) {
+ event.preventDefault();
+ const submenu = el.nextElementSibling;
+ submenu.classList.toggle('active');
+ }
}
+
+ // Close the menu when clicking outside
+ document.addEventListener('click', function(event) {
+ const navbar = document.getElementById('my-navbar');
+ const menuIcon = document.querySelector('.menu-icon');
+ if (!navbar.contains(event.target) && !menuIcon.contains(event.target)) {
+ navbar.classList.remove('active');
+ }
+ });
+
+ // Handle window resize
+ window.addEventListener('resize', function() {
+ const navbar = document.getElementById('my-navbar');
+ if (window.innerWidth > 768) {
+ navbar.classList.remove('active');
+ document.querySelectorAll('.son').forEach(function(submenu) {
+ submenu.classList.remove('active');
+ });
+ }
+ });
</script>
</body>
</html>
\ No newline at end of file