From 2f71f92165ef91c142d3f32067fb17421dd7a8e2 Mon Sep 17 00:00:00 2001
From: nessi <sascha@nesterovic.cc>
Date: Sun, 16 Aug 2026 13:06:58 +0200
Subject: [PATCH] feat: add legacy mobile navigation cleanup with auto-close on
 outside click, escape key, and window resize

Add DOMContentLoaded script to mark .nav with legacy-mobile-nav class and hide via @media(max-width:700px) display:none!important. Add closeAll() function to remove mobile-nav-open/open/mobile-drawer-open classes across body/drawer/shade/backdrop elements. Add document click handler to close drawer when clicking outside .mobile-drawer-clone/.mobile-nav/.brand on mobile. Add Escape keydown listener
---
 templates/index.html | 2 ++
 1 file changed, 2 insertions(+)
diff --git a/templates/index.html b/templates/index.html
index 1f19d6a..6a5f304 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,4 +1,6 @@
 <!doctype html>
+<script>document.addEventListener('DOMContentLoaded',()=>{const nav=document.querySelector('.nav');if(nav)nav.classList.add('legacy-mobile-nav');const closeAll=()=>{document.body.classList.remove('mobile-nav-open');document.querySelectorAll('.mobile-drawer-clone,.mobile-drawer-shade,.mobile-nav-backdrop').forEach(node=>node.classList.remove('open'));document.querySelectorAll('.nav').forEach(node=>node.classList.remove('mobile-drawer-open'))};document.addEventListener('click',event=>{if(!window.matchMedia('(max-width:700px)').matches||!document.body.classList.contains('mobile-nav-open'))return;if(!event.target.closest('.mobile-drawer-clone,.mobile-nav,.brand'))closeAll()});document.addEventListener('keydown',event=>{if(event.key==='Escape')closeAll()});window.addEventListener('resize',()=>{if(!window.matchMedia('(max-width:700px)').matches)closeAll()})});</script>
+<style>@media(max-width:700px){.legacy-mobile-nav{display:none!important}.mobile-nav-backdrop,.mobile-drawer-shade{pointer-events:auto!important}}</style>
 <script>document.addEventListener('DOMContentLoaded',()=>{const style=document.createElement('style');style.textContent='@media(max-width:700px){#movies,#sonarr table,#missing table{min-width:0!important;width:100%!important;table-layout:fixed!important}.tablewrap{overflow-x:hidden!important}.badges{max-width:100%!important;display:flex!important;flex-wrap:nowrap!important;overflow:hidden!important;max-height:22px!important}.badge{flex:0 1 auto!important;max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;font-size:9px!important;padding:2px 4px!important}.title{max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}#movies th:nth-child(1),#sonarr th:nth-child(1),#missing th:nth-child(1){width:42%!important}#movies th:nth-child(2),#sonarr th:nth-child(2),#missing th:nth-child(2){width:19%!important}#movies th:nth-child(4),#movies th:nth-child(5),#sonarr th:nth-child(4),#sonarr th:nth-child(5),#missing th:nth-child(4),#missing th:nth-child(5){width:19.5%!important}#movies td,#sonarr td,#missing td{padding:7px 4px!important;font-size:10px!important}}';document.head.appendChild(style)});</script>
 <script>document.addEventListener('DOMContentLoaded',()=>{const source=document.querySelector('.nav'),brand=document.querySelector('.brand');if(!source||!brand)return;const drawer=document.createElement('aside');drawer.className='mobile-drawer-clone';drawer.innerHTML=source.innerHTML;drawer.querySelector('.mobile-nav-close')?.remove();const close=document.createElement('button');close.className='mobile-drawer-close';close.type='button';close.textContent='×';close.setAttribute('aria-label','Navigation schließen');drawer.prepend(close);const shade=document.createElement('div');shade.className='mobile-drawer-shade';document.body.append(shade,drawer);const closeDrawer=()=>{drawer.classList.remove('open');shade.classList.remove('open');document.body.classList.remove('mobile-nav-open')};const openDrawer=()=>{if(window.matchMedia('(max-width:700px)').matches){drawer.classList.add('open');shade.classList.add('open');document.body.classList.add('mobile-nav-open')}};brand.addEventListener('click',openDrawer);shade.addEventListener('click',closeDrawer);close.addEventListener('click',closeDrawer);drawer.addEventListener('click',event=>{const button=event.target.closest('button[data-view]');if(!button)return;source.querySelector(`button[data-view="${button.dataset.view}"]`)?.click();closeDrawer()})});</script>
 <style>@media(max-width:700px){.mobile-drawer-shade{display:none;position:fixed!important;inset:0!important;z-index:1900!important;background:rgba(0,0,0,.62)!important;backdrop-filter:blur(3px)}.mobile-drawer-shade.open{display:block!important}.mobile-drawer-clone{display:flex!important;position:fixed!important;visibility:visible!important;opacity:1!important;top:0!important;left:0!important;bottom:0!important;width:min(84vw,320px)!important;z-index:2000!important;flex-direction:column!important;gap:5px!important;padding:62px 12px 18px!important;margin:0!important;overflow-y:auto!important;overflow-x:hidden!important;background:#1c2027!important;border-right:1px solid #465160!important;box-shadow:16px 0 45px rgba(0,0,0,.5)!important;transform:translate3d(-110%,0,0)!important;transition:transform .24s ease!important}.mobile-drawer-clone.open{transform:translate3d(0,0,0)!important}.mobile-drawer-clone button{display:block!important;flex:0 0 auto!important;width:100%!important;min-height:42px!important;padding:12px 13px!important;text-align:left!important;border:0!important;border-radius:8px!important;background:transparent!important;color:#c7d0dc!important;font-size:13px!important;white-space:nowrap!important}.mobile-drawer-clone button.active{background:#303b49!important;color:#fff!important}.mobile-drawer-clone .mobile-drawer-close{position:absolute!important;top:14px!important;right:12px!important;width:34px!important;min-height:34px!important;height:34px!important;padding:0!important;border:1px solid #4a5563!important;background:#292f38!important;color:#dce8f3!important;text-align:center!important;font-size:23px!important;line-height:1!important}.mobile-drawer-clone img{width:15px!important;height:15px!important;margin-right:6px!important;vertical-align:-3px!important;object-fit:contain!important}}</style>
