diff --git a/public/js/app.js b/public/js/app.js index 474a7c7..44c8b55 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -28,6 +28,8 @@ class AccountManager { this.accountServiceFilter = ''; this.userSearchTerm = ''; this.userRoleFilter = ''; + this.mobileBreakpoint = 900; + this.boundResizeHandler = null; this.configureNotifications(); this.initPromise = this.init(); this.pendingAccountAppId = undefined; @@ -121,6 +123,7 @@ class AccountManager { } this.setupEventListeners(); + this.setupResponsiveShell(); this.loadModals(); // Load modals từ file riêng // Single-page navigation based on hash this.handleRoute(location.hash || '#dashboard'); @@ -129,6 +132,9 @@ class AccountManager { handleRoute(hash) { const route = (hash || '#dashboard').replace('#', '') || 'dashboard'; + if (this.isMobileViewport()) { + this.closeMobileNav(); + } this.renderView(route); } @@ -180,6 +186,74 @@ class AccountManager { }); } + isMobileViewport() { + return window.matchMedia(`(max-width: ${this.mobileBreakpoint}px)`).matches; + } + + setupResponsiveShell() { + const menuBtn = document.getElementById('mobileMenuBtn'); + const backdrop = document.getElementById('sidebarBackdrop'); + + if (menuBtn && !menuBtn.dataset.boundClick) { + menuBtn.addEventListener('click', () => this.toggleMobileNav()); + menuBtn.dataset.boundClick = 'true'; + } + + if (backdrop && !backdrop.dataset.boundClick) { + backdrop.addEventListener('click', () => this.closeMobileNav()); + backdrop.dataset.boundClick = 'true'; + } + + document.querySelectorAll('[data-nav]').forEach(link => { + if (!link.dataset.boundMobileClose) { + link.addEventListener('click', () => { + if (this.isMobileViewport()) { + this.closeMobileNav(); + } + }); + link.dataset.boundMobileClose = 'true'; + } + }); + + if (!this.boundResizeHandler) { + this.boundResizeHandler = () => { + if (!this.isMobileViewport()) { + this.closeMobileNav(); + } + }; + window.addEventListener('resize', this.boundResizeHandler); + } + + if (!this.isMobileViewport()) { + this.closeMobileNav(); + } + } + + toggleMobileNav() { + if (document.body.classList.contains('mobile-nav-open')) { + this.closeMobileNav(); + return; + } + this.openMobileNav(); + } + + openMobileNav() { + if (!this.isMobileViewport()) return; + document.body.classList.add('mobile-nav-open'); + const menuBtn = document.getElementById('mobileMenuBtn'); + if (menuBtn) { + menuBtn.setAttribute('aria-expanded', 'true'); + } + } + + closeMobileNav() { + document.body.classList.remove('mobile-nav-open'); + const menuBtn = document.getElementById('mobileMenuBtn'); + if (menuBtn) { + menuBtn.setAttribute('aria-expanded', 'false'); + } + } + async fetchApplications() { const res = await fetch(`${this.apiBase}/applications`); const data = await res.json(); @@ -284,6 +358,7 @@ class AccountManager { // Close with Escape key document.addEventListener('keydown', (e) => { if (e.key === 'Escape') { + this.closeMobileNav(); this.closeModals(); } }); @@ -306,6 +381,7 @@ class AccountManager { // Account table row clicks this.setupAccountRowListeners(); this.setupFilters(); + this.setupResponsiveShell(); } setupFormListeners() { @@ -390,15 +466,15 @@ class AccountManager { renderDashboard() { return ` -
+
-
+

System Overview

Account & Service Management

-
- +
+ add Add Account @@ -406,7 +482,7 @@ class AccountManager {
-
+
Applications
@@ -461,7 +537,7 @@ class AccountManager {
` : `
-

No accounts yet. Create one

+

No accounts yet. Create one

`}
@@ -475,9 +551,9 @@ class AccountManager { const pageInfo = this.getPaged(filteredAccounts, this.accountPage, this.accountPageSize); this.accountPage = pageInfo.current; return ` -
+
-
+

Accounts Management

Administrative Access Control

@@ -489,7 +565,7 @@ class AccountManager {
-
+
Service
-
+
@@ -677,7 +753,7 @@ class AccountManager {
-
+
Showing ${pageInfo.start}-${pageInfo.end} of ${pageInfo.total}
@@ -1501,8 +1577,8 @@ class AccountManager { const pageInfo = this.getPaged(filteredUsers, this.userPage, this.userPageSize); this.userPage = pageInfo.current; return ` -
-
+
+

Users Management

-
+
search @@ -1524,7 +1600,7 @@ class AccountManager {
-
+
@@ -1574,7 +1650,7 @@ class AccountManager {
-
+
Showing ${pageInfo.start}-${pageInfo.end} of ${pageInfo.total}
diff --git a/public/pages/index.html b/public/pages/index.html index b2f3859..afd0070 100644 --- a/public/pages/index.html +++ b/public/pages/index.html @@ -43,11 +43,150 @@ .modal-backdrop.open .modal-content { transform: scale(1); } + + body.app-shell { + overflow: hidden; + } + + #mobileMenuBtn, + #sidebarBackdrop { + display: none; + } + + @media (max-width: 900px) { + body.app-shell { + width: 100%; + min-height: 100dvh; + height: 100dvh; + overflow: hidden; + position: relative; + } + + #mobileMenuBtn { + display: inline-flex; + align-items: center; + justify-content: center; + } + + #sidebarBackdrop { + display: block; + position: fixed; + inset: 0; + z-index: 70; + background: rgba(15, 23, 42, 0.45); + opacity: 0; + pointer-events: none; + transition: opacity 0.2s ease-in-out; + } + + #appSidebar { + position: fixed; + inset: 0 auto 0 0; + height: 100dvh; + width: min(82vw, 16rem); + z-index: 80; + transform: translateX(-100%); + transition: transform 0.2s ease-in-out; + box-shadow: 0 20px 45px rgba(15, 23, 42, 0.35); + } + + body.mobile-nav-open #sidebarBackdrop { + opacity: 1; + pointer-events: auto; + } + + body.mobile-nav-open #appSidebar { + transform: translateX(0); + } + + #appMain { + width: 100%; + min-width: 0; + height: 100dvh; + } + + #appMain > header { + padding-left: 0.75rem; + padding-right: 0.75rem; + gap: 0.5rem; + } + + .topbar-actions { + gap: 0.5rem; + } + + #profileBtn { + padding: 0.4rem 0.55rem; + } + + #profileBtn .profile-meta { + display: none; + } + + .dashboard-header, + .page-header, + .page-filters, + .users-controls { + flex-direction: column; + align-items: stretch; + gap: 0.75rem; + } + + .page-filters > div, + .users-controls > div, + .users-controls select { + width: 100%; + } + + .dashboard-actions, + .page-header button, + .page-header > button { + width: 100%; + } + + .dashboard-stats, + .apps-stats { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .table-wrap { + overflow-x: auto; + } + + .table-wrap table { + min-width: 700px; + } + + .page-pager { + gap: 0.5rem; + flex-direction: column; + align-items: flex-start; + } + + .modal-backdrop { + align-items: flex-end; + } + + .modal-backdrop .modal-content { + width: calc(100% - 1rem); + max-height: min(88dvh, 700px); + margin: 0.5rem; + overflow-y: auto; + border-radius: 0.9rem; + } + } + + @media (max-width: 560px) { + .dashboard-stats, + .apps-stats { + grid-template-columns: 1fr; + } + } - + -