cjw/Oxicloud
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(ui): add collapsible sidebar for mobile devices

Browse Source 
- Add hamburger menu toggle button in top bar (visible on mobile only)
- Sidebar slides in/out from the left with smooth transition
- Add dark overlay when sidebar is open on mobile
- Close sidebar on overlay click, nav item click, or escape key
- Support RTL languages (sidebar slides from right)
- Add dark theme styles for toggle button
- Responsive breakpoint at 768px
This commit is contained in:
George Wu
2026-02-23 21:10:32 -08:00
parent 677b3eafa9
commit b058581de0
5 changed files with 162 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/index.html
+7 -1
View File
@@ -57,8 +57,10 @@
</script>
</head>
<body>
<!-- Mobile sidebar overlay -->
<div class="sidebar-overlay" id="sidebar-overlay"></div>
<!-- Sidebar -->
<div class="sidebar">
<div class="sidebar" id="sidebar">
<a href="/" class="logo-container" style="text-decoration:none;color:inherit;">
<div class="logo">
@@ -105,6 +107,10 @@
<div class="main-content">
<!-- Top Bar -->
<div class="top-bar">
<!-- Mobile menu toggle -->
<button class="sidebar-toggle" id="sidebar-toggle" aria-label="Toggle navigation menu">
<i class="fas fa-bars"></i>
</button>
<div class="search-container">
<i class="fas fa-search search-icon"></i>
<input type="text" id="search-input" data-i18n-placeholder="actions.search" placeholder="Search files, folders...">