|
|
@@ -143,6 +143,44 @@ tr.r-total td{
|
|
|
}
|
|
|
tr.r-total td.col-name{background:#1e3a5f!important;color:#f0f9ff}
|
|
|
tr.r-total td.neg{color:#fca5a5!important}
|
|
|
+
|
|
|
+/* ─── Mobile hamburger toggle / backdrop (hidden on desktop) ─── */
|
|
|
+#sb-toggle{display:none}
|
|
|
+#sb-backdrop{display:none}
|
|
|
+
|
|
|
+/* ─── Mobile layout ─── */
|
|
|
+@media (max-width: 768px) {
|
|
|
+ #sb-toggle{
|
|
|
+ display:flex;align-items:center;justify-content:center;
|
|
|
+ width:32px;height:32px;border:none;background:#1e293b;color:#f8fafc;
|
|
|
+ border-radius:5px;font-size:16px;cursor:pointer;flex-shrink:0
|
|
|
+ }
|
|
|
+ #top-bar{padding:8px 10px;flex-wrap:wrap;gap:8px}
|
|
|
+ #top-bar h2{font-size:13px}
|
|
|
+ #sel-info{font-size:11px;flex-basis:100%;order:3;margin-left:40px}
|
|
|
+ #total-wrap{margin-left:0;flex-wrap:wrap;font-size:11px;gap:4px}
|
|
|
+
|
|
|
+ #app{position:relative}
|
|
|
+ #sidebar{
|
|
|
+ position:fixed;top:0;left:0;bottom:0;z-index:20;
|
|
|
+ transform:translateX(-100%);transition:transform .2s ease;
|
|
|
+ width:80vw;max-width:280px;box-shadow:2px 0 12px rgba(0,0,0,.3)
|
|
|
+ }
|
|
|
+ #sidebar.open{transform:translateX(0)}
|
|
|
+ #sb-backdrop{
|
|
|
+ display:none;position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:19
|
|
|
+ }
|
|
|
+ #sb-backdrop.open{display:block}
|
|
|
+
|
|
|
+ #main{width:100%}
|
|
|
+ #tbl-wrap{padding:8px 10px;-webkit-overflow-scrolling:touch}
|
|
|
+
|
|
|
+ table.plt{font-size:11px}
|
|
|
+ table.plt thead th{width:74px;padding:6px 6px;font-size:10px}
|
|
|
+ table.plt thead th.col-name{width:150px}
|
|
|
+ table.plt td.val{padding:5px 6px}
|
|
|
+ table.plt td.col-name{padding:5px 6px}
|
|
|
+}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
@@ -180,9 +218,12 @@ tr.r-total td.neg{color:#fca5a5!important}
|
|
|
</div>
|
|
|
</div><!-- /sidebar -->
|
|
|
|
|
|
+ <div id="sb-backdrop" onclick="toggleSidebar()"></div>
|
|
|
+
|
|
|
<!-- ═══ MAIN ═══ -->
|
|
|
<div id="main">
|
|
|
<div id="top-bar">
|
|
|
+ <button id="sb-toggle" onclick="toggleSidebar()" aria-label="Toggle menu">☰</button>
|
|
|
<h2>Profit & Loss Statement</h2>
|
|
|
<span id="sel-info"></span>
|
|
|
<div id="total-wrap">
|
|
|
@@ -271,6 +312,19 @@ function buildSidebar() {
|
|
|
document.getElementById('yr-list').innerHTML = html;
|
|
|
}
|
|
|
|
|
|
+// ── Mobile sidebar toggle ──
|
|
|
+function toggleSidebar() {
|
|
|
+ document.getElementById('sidebar').classList.toggle('open');
|
|
|
+ document.getElementById('sb-backdrop').classList.toggle('open');
|
|
|
+}
|
|
|
+
|
|
|
+function closeMobileSidebar() {
|
|
|
+ if (window.innerWidth <= 768) {
|
|
|
+ document.getElementById('sidebar').classList.remove('open');
|
|
|
+ document.getElementById('sb-backdrop').classList.remove('open');
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
// ── Sidebar interactions ──
|
|
|
function toggleYear(y) {
|
|
|
document.getElementById('ml-'+y).classList.toggle('open');
|
|
|
@@ -333,6 +387,7 @@ function qs(mode) {
|
|
|
|
|
|
Object.keys(yearMap).forEach(y => syncYearCb(+y));
|
|
|
schedule();
|
|
|
+ closeMobileSidebar();
|
|
|
}
|
|
|
|
|
|
// ── Data loading ──
|
