fix: sidebar drawer stuck open after desktop→mobile resize#29
Merged
Conversation
Two responsive bugs on the app shell: 1. The mobile hamburger could show on desktop. `lg:hidden` was on the PrimeVue <Button>, whose component display style can win over the utility — so it leaked onto wide screens. Wrap it in a <div class="lg:hidden"> so the button is reliably hidden at lg+. 2. The drawer stayed open after a resize round-trip. `sidebarOpen` was only reset on navigation, so opening it, growing to desktop, then shrinking back left the sidebar stuck visible on mobile. Watch a (min-width: 1024px) media query and reset the flag whenever the viewport reaches desktop. Verification: npm run build (vue-tsc + Vite) green.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
EN
Two responsive bugs on the app shell, reported from resizing the window:
lg:hiddenwas on the PrimeVue<Button>, whose component display style can override the utility — so the menu button leaked onto wide screens. Wrapped it in a<div class="lg:hidden">so it's reliably hidden atlg+.sidebarOpenwas only reset on navigation, so: open it → grow to desktop → shrink back, and the sidebar was stuck visible on mobile. Now a(min-width: 1024px)media query (@vueuse/core) resets the flag whenever the viewport reaches desktop, so it can't carry a stale "open" back down to mobile.Verification:
npm run build(vue-tsc + Vite) — green.KO (한국어)
창 크기 조절에서 나온 앱 셸 반응형 버그 2가지:
lg:hidden이 PrimeVue<Button>에 직접 걸려 있었는데, 컴포넌트 display 스타일이 유틸리티를 이겨 넓은 화면에도 새어 나왔습니다.<div class="lg:hidden">로 감싸lg+에서 확실히 숨김.sidebarOpen이 네비게이션에서만 리셋돼서: 열고 → 데스크톱으로 키우고 → 다시 줄이면 모바일에서 사이드바가 그대로 남았습니다. 이제(min-width: 1024px)미디어 쿼리(@vueuse/core)로 viewport가 데스크톱에 도달하면 플래그를 리셋해, stale "open"이 모바일로 따라 내려오지 못합니다.검증:
npm run build(vue-tsc + Vite) — green.