feat(ui): RecordDrawer wide-mode default по viewport
This commit is contained in:
@@ -55,12 +55,22 @@ import { cn } from '@/lib/utils'
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
const LS_KEY = 'ord-drawer-wide'
|
const LS_KEY = 'ord-drawer-wide'
|
||||||
|
// Tailwind lg breakpoint = 1024px. Desktop ≥ lg → wide drawer (880px max
|
||||||
|
// vs 520px). Mobile < lg → narrow чтобы не давить контент. User-toggle
|
||||||
|
// persists в localStorage и побеждает auto-detection.
|
||||||
|
const DESKTOP_BREAKPOINT_PX = 1024
|
||||||
|
|
||||||
/** Hook: persisted boolean (drawer wide mode). */
|
/** Hook: persisted boolean (drawer wide mode). На первый визит default —
|
||||||
|
* viewport-aware (desktop wide, mobile collapsed). После toggle'а
|
||||||
|
* localStorage value побеждает viewport. */
|
||||||
function useDrawerWide(): [boolean, () => void] {
|
function useDrawerWide(): [boolean, () => void] {
|
||||||
const [wide, setWide] = useState<boolean>(() => {
|
const [wide, setWide] = useState<boolean>(() => {
|
||||||
if (typeof window === 'undefined') return false
|
if (typeof window === 'undefined') return false
|
||||||
return window.localStorage.getItem(LS_KEY) === '1'
|
const stored = window.localStorage.getItem(LS_KEY)
|
||||||
|
if (stored === '1') return true
|
||||||
|
if (stored === '0') return false
|
||||||
|
// First visit: viewport-aware. Desktop = wide, mobile = narrow.
|
||||||
|
return window.innerWidth >= DESKTOP_BREAKPOINT_PX
|
||||||
})
|
})
|
||||||
const toggle = useCallback(() => {
|
const toggle = useCallback(() => {
|
||||||
setWide((prev) => {
|
setWide((prev) => {
|
||||||
|
|||||||
Reference in New Issue
Block a user