Sidebar(ui.left_drawer) width and resizing by mouse

[s71m]

Hi!

Just wanted to share a quick idea: How to set the width of a sidebar and make it resizable using the cursor. It's just a simple feature.

Thanks NiceGUI frontend, the content within layouts automatically adjusts to fit the changes. I hope someone finds it useful or can even improve it.

nicegui_drawer_resize.mp4

from nicegui import ui

@ui.page('/')
def main_page():

    ui.add_head_html('''
        <style>
            .drawer-resizer {
                width: 3px;
                height: 100%;
                position: absolute;
                right: 0;
                top: 0;
                cursor: col-resize;
                z-index: 1000;
                background-color: rgba(255, 255, 255, 0.05);
                transition: background-color 0.2s ease;
            }

            .drawer-resizer:hover {
                background-color: rgba(255, 255, 255, 0.2);
            }
        </style>

        <script>
            function createResizer() {
                const resizer = document.createElement('div');
                resizer.className = 'drawer-resizer';
                return resizer;
            }

            function updateDrawerWidth(newWidth) {
                const parentDrawer = document.querySelector('.q-drawer');
                if (parentDrawer) {
                    parentDrawer.style.width = `${newWidth}px`;
                    // Store the current width in a data attribute
                    parentDrawer.setAttribute('data-drawer-width', newWidth);
                }
            }

            function setupDrawerResize() {
                const drawer = document.querySelector('.nicegui-drawer');
                if (!drawer) return;

                drawer.style.position = 'relative';

                const resizer = createResizer();
                drawer.appendChild(resizer);

                let isResizing = false;

                resizer.onmousedown = (e) => {
                    isResizing = true;
                    const startX = e.pageX;
                    const startWidth = parseInt(getComputedStyle(drawer.parentElement).width);

                    const onMouseMove = (e) => {
                        if (!isResizing) return;
                        const newWidth = startWidth + e.pageX - startX;
                        updateDrawerWidth(newWidth);
                        const page = document.querySelector('.q-page-container');
                        if (page) {
                            page.style.paddingLeft = `${newWidth}px`;
                        }
                    };

                    const onMouseUp = () => {
                        isResizing = false;
                        document.removeEventListener('mousemove', onMouseMove);
                        document.removeEventListener('mouseup', onMouseUp);
                    };

                    document.addEventListener('mousemove', onMouseMove);
                    document.addEventListener('mouseup', onMouseUp);
                };
            }

            document.addEventListener('DOMContentLoaded', () => {
                const drawer = document.querySelector('.q-drawer');
                if (!drawer) return; 

                setupDrawerResize();

                // Read the saved width from the data attribute or use default
                let drawerWidth = 350; // default width
                const savedWidth = drawer.getAttribute('data-drawer-width');
                if (savedWidth) {
                    drawerWidth = parseInt(savedWidth);
                } else {
                    const computedWidth = parseInt(getComputedStyle(drawer).width);
                    if (computedWidth) {
                        drawerWidth = computedWidth;
                    }
                }
                updateDrawerWidth(drawerWidth);

                const page = document.querySelector('.q-page-container');
                if (page) {
                    // Check if the drawer is currently closed
                    const isClosed = drawer.classList.contains('q-layout--prevent-focus');
                    page.style.paddingLeft = isClosed ? '0px' : `${drawerWidth}px`;
                }

                drawer.addEventListener('transitionend', () => {
                    const isClosed = drawer.classList.contains('q-layout--prevent-focus');
                    let drawerWidth = 350; // default width
                    const savedWidth = drawer.getAttribute('data-drawer-width');
                    if (savedWidth) {
                        drawerWidth = parseInt(savedWidth);
                    } else {
                        const computedWidth = parseInt(getComputedStyle(drawer).width);
                        if (computedWidth) {
                            drawerWidth = computedWidth;
                        }
                    }
                    if (!isClosed) {
                        updateDrawerWidth(drawerWidth);
                    }
                    const page = document.querySelector('.q-page-container');
                    if (page) {
                        page.style.paddingLeft = isClosed ? '0px' : `${drawerWidth}px`;
                    }
                });
            });
        </script>
    ''')


    with ui.header().classes('w-full flex justify-between items-center p-4 bg-gray-800'):
        with ui.row().classes('items-center'):
            ui.button(icon='menu', on_click=lambda: left_drawer.toggle())

    width = 350
    with ui.left_drawer().props(f'width={width}') as left_drawer:
        ui.label("Resizable drawer")
    ui.label("Resizable content")
ui.run(dark=True)

And it might be better to listen transition events..

Object.keys(window).forEach(key => {
    if (/^on(transition)/.test(key)) {
        window.addEventListener(key.slice(2), () => {
            window.dispatchEvent(new Event('resize'));
        });
    }
});