Struct UseEuvLayout

Source

pub struct UseEuvLayout;

Expand description

Layout functionality for managing viewport resize, drawer toggle, and safe area.

Provides methods for tracking mobile viewport, toggling navigation drawer, and handling safe area insets on mobile devices.

Implementations§

Source §

impl UseEuvLayout

Implementation of layout functionality.

Provides methods for managing viewport resize, drawer toggle, and safe area.

Source

pub fn use_resize() -> Signal<bool>

Creates a reactive signal that tracks whether the viewport is in mobile mode and subscribes to browser resize events to keep it updated.

The resize handler is debounced by RESIZE_DEBOUNCE_MILLIS (16ms) to avoid excessive recomputation during continuous resize operations. The listener is automatically removed when the hook context is cleared.

§Returns

Signal<bool> - A reactive signal that is true when the viewport is mobile-sized.

Source

pub fn use_drawer_toggle(drawer_open: Signal<bool>) -> Option<Rc<dyn Fn(Event)>>

Creates a click event handler that toggles the mobile nav drawer signal with proper browser history management.

When toggling from open to closed, calls overlay_back to remove the extra history entry that was pushed when the drawer opened. When toggling from closed to open, the use_overlay_history hook handles the pushState call automatically.

§Arguments

Signal<bool> - The boolean signal controlling the drawer visibility.

§Returns

Option<Rc<dyn Fn(Event)>> - A click event handler that toggles the drawer.

Source

pub fn use_safe_area_fix()

Registers global event listeners that preserve env(safe-area-inset-*) values after exiting any type of fullscreen on Android, and ensures that the system back button exits native fullscreen instead of navigating away.

On initialisation, reads the current env(safe-area-inset-*) pixel values through a sentinel <div> and caches them in thread-local storage. When a fullscreenchange or resize event fires, the cached values are written directly as inline CSS custom properties on the real app root element so that layout never depends on the potentially stale env() function result.

When a native (browser) fullscreen is entered — for example the user taps the fullscreen button on a <video controls> element — a browser history entry is added via overlay_push_state so that the system back gesture will fire popstate. A popstate guard registered via [register_popstate_guard] then calls document.exitFullscreen() to leave fullscreen, consuming the history entry without navigating to the previous route. When the native fullscreen is exited through other means (e.g. the browser’s own exit button), the fullscreenchange handler consumes the extra history entry via overlay_back.

This hook should be called once during app initialization and covers:

Native video fullscreen → exit via system back button
CSS simulated fullscreen → exit (canvas drawing mode)
Any future fullscreen scenarios

Source

pub fn apply_cached_insets()

Writes the cached safe-area inset values as inline CSS custom properties on the real app root element and any fullscreen overlay containers.

Class rules such as c_mobile_app_root, c_app_nav, c_app_main, c_mobile_nav_drawer, and c_canvas_container_fullscreen consume var(--safe-area-inset-top) in their padding declarations. By overriding these CSS custom properties with inline style (which has higher specificity than the stylesheet rule from vars!), all var() references resolve to the cached pixel values, bypassing the stale env() function after a fullscreen exit.

The canvas fullscreen container is position: fixed and outside the app root subtree, so it does not inherit the inline overrides — it must be patched separately.