dubey/spectra
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

hamburgesa menu for small devices

Browse Source
This commit is contained in:
Tanishq Dubey 2024-10-20 17:03:51 -04:00
parent 6dcee44ee9
commit 906e52665a
1 changed files with 28 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
templates/index.html
View File

@ -126,7 +126,12 @@
text-decoration: none; text-decoration: none;
color: {{ accent_color }}; color: {{ accent_color }};
} }
.nav-toggle {
display: none;
cursor: pointer;
font-size: 1.5rem;
text-align: right;
}
@media (max-width: 768px) { @media (max-width: 768px) {
@ -155,13 +160,23 @@
height: auto; height: auto;
position: static; position: static;
padding: 10px; padding: 10px;
} }
.sidebar-nav ul {
display: none;
}
.nav-toggle {
display: block;
}
.sidebar-nav.active ul {
display: block;
}
} }
</style> </style>
</head> </head>
<body> <body>
<div class="sidebar"> <div class="sidebar">
<div class="sidebar-nav noto-sans-mono-font"> <div class="sidebar-nav noto-sans-mono-font">
<div class="nav-toggle">☰</div>
<nav> <nav>
<ul> <ul>
<li><a href="#">Home</a></li> <li><a href="#">Home</a></li>
@ -321,6 +336,17 @@
window.addEventListener('resize', handleResize); window.addEventListener('resize', handleResize);
loadImages(); // Initial load loadImages(); // Initial load
function setupNavToggle() {
const navToggle = document.querySelector('.nav-toggle');
const sidebarNav = document.querySelector('.sidebar-nav');
navToggle.addEventListener('click', () => {
sidebarNav.classList.toggle('active');
});
}
setupNavToggle();
</script> </script>
</body> </body>
</html> </html>