dmc AppShell demo

[WheatMaThink]

I've just started learning DMC and am still getting familiar with many of its techniques. I wrote a demo application that I find quite interesting and hope it might be helpful to others.

It would be great if someone could suggest optimizations and reply to this post.

I won't go into too much detail; the functionality is relatively simple and should be clear from the pictures. The second picture shows the result with some added CSS.


Below is the code to run it:

import dash_mantine_components as dmc
from dash import (
    Dash,
    Input,
    Output,
    State,
    _dash_renderer,
    callback,
    clientside_callback,
    html,
)
from dash_iconify import DashIconify

app = Dash(external_stylesheets=dmc.styles.ALL)

logo = "https://github.com/user-attachments/assets/c1ff143b-4365-4fd1-880f-3e97aab5c302"

theme_toggle = dmc.Switch(
    offLabel=DashIconify(icon="radix-icons:sun", width=15, color=dmc.DEFAULT_THEME["colors"]["yellow"][8]),
    onLabel=DashIconify(icon="radix-icons:moon", width=15, color=dmc.DEFAULT_THEME["colors"]["yellow"][6]),
    id="color-scheme-toggle",
    persistence=True,
    color="grey",
)

layout = dmc.AppShell(
    [
        dmc.AppShellHeader(
            id="appshell-header",
            children=dmc.Group(
                [
                    dmc.Group(
                        [
                            dmc.ActionIcon(
                                children=DashIconify(icon="ri:menu-fold-line", width=24),  # Change to the Tabler icon set
                                id="navbar-collapsed-visible",
                                radius="sm",
                                variant="default",
                            ),
                            dmc.Image(src=logo, h=40),
                            dmc.Title("Demo App", c="blue"),
                        ]
                    ),
                    dmc.Group(
                        [
                            theme_toggle,
                            dmc.ActionIcon(
                                DashIconify(icon="tabler:arrow-right", width=24),  # Change to the Tabler icon set
                                id="aside-collapsed-visible",
                                radius="sm",
                                variant="default",
                            ),
                            # Add hidden control for resizer initialization
                            html.Div(id="resizer-initializer", style={"display": "none"}),
                        ]
                    ),
                ],
                justify="space-between",
                style={"flex": 1},
                h="100%",
                px=3,
            ),
        ),
        dmc.AppShellNavbar(
            id="appshell-navbar",
            children=[
                "Navbar",
                *[dmc.Skeleton(height=28, mt="sm", animate=False) for _ in range(15)],
                html.Div(
                    id="navbar-resizer",
                    style={
                        "width": "1px",
                        "cursor": "ew-resize",
                        "height": "100%",
                        "position": "absolute",
                        "top": 0,
                        "right": 0,
                        "zIndex": 100,
                        "background": "transparent",  # Initially transparent
                    },
                ),
            ],
        ),
        dmc.AppShellMain(
            id="appshell-main",
            children=[
                dmc.Group(
                    [dmc.Text("Set footer height:"), dmc.NumberInput(id="footer-height-input", value=80, min=5, max=300, step=10, style={"width": 300}), dmc.Button("apply", id="apply-footer-height", variant="filled", color="blue")],
                    gap="md",
                    p="md",
                    style={"flex": 1, "width": 200},
                ),
                "Main",
            ],
        ),
        dmc.AppShellAside(
            id="appshell-aside",
            children=[
                html.Div(
                    id="aside-resizer",
                    style={
                        "width": "1px",
                        "cursor": "ew-resize",
                        "height": "100%",
                        "position": "absolute",
                        "top": 0,
                        "left": 0,
                        "zIndex": 1000,
                        "background": "transparent",  # Initially transparent
                    },
                ),
                html.Div("Aside content", style={"marginLeft": "6px", "padding": "16px"}),
            ],
        ),
        dmc.AppShellFooter(
            id="appshell-footer",
            children=[
                html.Div(
                    id="footer-resizer",
                    style={
                        "height": "1px",
                        "cursor": "ns-resize",
                        "width": "100%",
                        "position": "absolute",
                        "top": 0,
                        "left": 0,
                        "zIndex": 1000,
                        "background": "transparent",
                    },
                ),
                html.Div("Footer", style={"marginTop": "6px", "padding": "16px"}),
            ],
        ),
    ],
    id="appshell",
    layout="default",
    padding="md",
    header={"height": 60},
    navbar={
        "width": 250,
        "breakpoint": "sm",
        "collapsed": {"desktop": False, "mobile": False},
    },
    aside={
        "width": 200,
        "breakpoint": "sm",
        "collapsed": {"desktop": False, "mobile": False},
    },
    footer={"height": 60},
)

app.layout = dmc.MantineProvider(layout)

clientside_callback(
    """ 
    (switchOn) => {
       document.documentElement.setAttribute('data-mantine-color-scheme', switchOn ? 'dark' : 'light');  
       return window.dash_clientside.no_update
    }
    """,
    Output("color-scheme-toggle", "id"),
    Input("color-scheme-toggle", "checked"),
)


@callback(
    Output("appshell", "navbar", allow_duplicate=True),
    Output("navbar-collapsed-visible", "children"),
    Input("navbar-collapsed-visible", "n_clicks"),
    State("appshell", "navbar"),
    prevent_initial_call=True,
)
def toggle_navbar(n_clicks, navbar):
    # First get the collapsed attribute and value of navbar
    open_state = navbar["collapsed"]["desktop"]

    # Toggle icon #ri:menu-fold-line ri:menu-unfold-line
    if open_state:
        icon = (DashIconify(icon="ri:menu-fold-line", width=24),)
    else:
        icon = (DashIconify(icon="ri:menu-unfold-line", width=24),)

    navbar["collapsed"] = {
        "mobile": not open_state,
        "desktop": not open_state,
    }
    return navbar, icon


@callback(
    Output("appshell", "aside", allow_duplicate=True),
    Output("aside-collapsed-visible", "children"),
    Input("aside-collapsed-visible", "n_clicks"),
    State("appshell", "aside"),
    prevent_initial_call=True,
)
def toggle_aside(desktop_opened, aside):
    # First get the collapsed attribute and value of aside
    open_state = aside["collapsed"]["desktop"]

    # Toggle icon
    if open_state:
        icon = (DashIconify(icon="tabler:arrow-right", width=24),)
    else:
        icon = (DashIconify(icon="tabler:arrow-left", width=24),)

    aside["collapsed"] = {
        "mobile": not open_state,
        "desktop": not open_state,
    }
    return aside, icon


# Footer height adjustment callback
@callback(
    Output("appshell", "footer", allow_duplicate=True),
    Input("apply-footer-height", "n_clicks"),
    State("footer-height-input", "value"),
    prevent_initial_call=True,
)
def update_footer_height(n_clicks, height_value):
    if not height_value:
        height_value = 80  # Default value
    # Restrict height range
    height_value = max(1, min(300, height_value))
    # Update footer properties
    footer = {"height": height_value}
    return footer


clientside_callback(
    """
    function(dummy, navbar, aside, footer) {
        // Helper function to set up resizer
        function setupResizer(resizerId, type, updateCallback) {
            const resizer = document.getElementById(resizerId);
            // If resizer element is not found, return
            if (!resizer) {
                console.log('Resizer not found:', resizerId);
                return;
            }

            let startX, startY, startValue;

            // Add mouse enter and leave events
            resizer.addEventListener('mouseenter', () => {
                resizer.style.background = '#1c7ed6'; // Blue background
                resizer.style.width = type === 'footer' ? '100%' : '2px'; // Increase width for visibility
                resizer.style.height = type === 'footer' ? '2px' : '100%';
                resizer.style.opacity = '0.7'; // Semi-transparent effect
                resizer.style.transition = 'all 0.2s ease'; // Smooth transition effect
            });

            resizer.addEventListener('mouseleave', () => {
                resizer.style.background = 'transparent'; // Restore transparent background
                resizer.style.width = type === 'footer' ? '100%' : '1px';
                resizer.style.height = type === 'footer' ? '1px' : '100%';
                resizer.style.opacity = '1';
            });

            const onMouseDown = (e) => {
                // Prevent default event
                e.preventDefault();
                startX = e.clientX;
                startY = e.clientY;
                // Dynamically set initial value, using the actual rendered width or height of the element
                if (type === 'navbar') {
                    const navbarElement = document.querySelector('.mantine-AppShell-navbar');
                    startValue = navbarElement ? navbarElement.getBoundingClientRect().width : (navbar.width || 300);
                    // console.log('Navbar initial width:', startValue, 'State width:', navbar.width);
                } else if (type === 'aside') {
                    const asideElement = document.querySelector('.mantine-AppShell-aside');
                    startValue = asideElement ? asideElement.getBoundingClientRect().width : (aside.width || 300);
                    // console.log('Aside initial width:', startValue, 'State width:', aside.width);
                } else if (type === 'footer') {
                    const footerElement = document.querySelector('.mantine-AppShell-footer');
                    startValue = footerElement ? footerElement.getBoundingClientRect().height : (footer.height || 60);
                    // console.log('Footer initial height:', startValue, 'State height:', footer.height);
                }

                // Add mouse move and mouse up event listeners
                document.addEventListener('mousemove', onMouseMove);
                document.addEventListener('mouseup', onMouseUp);
            };

            const onMouseMove = (e) => {
                // Prevent default event
                e.preventDefault();
                let newValue;

                if (type === 'navbar') {
                    // Navbar: Drag right to increase width
                    const deltaX = e.clientX - startX;
                    // Restrict width between 10px and 500px
                    newValue = Math.max(150, Math.min(500, startValue + deltaX));
                    // Set to collapsed state (true) when width is less than or equal to 10px, otherwise expanded (false)
                    const isCollapsed = newValue <= 150 ? true : false; // true means collapsed, false means expanded
                    //console.log('Resizing navbar:', isCollapsed);
                    // Update navbar width, preserving other properties

                    updateCallback({
                        ...navbar,
                        width: Math.round(newValue),
                        breakpoint: navbar.breakpoint,
                        collapsed: {
                            desktop: isCollapsed,
                            mobile: isCollapsed,
                        }
                    });
                    
                    // Update navbar-collapsed-visible icon
                    updateNavbarIcon(isCollapsed);

                } else if (type === 'aside') {
                    // Aside: Drag left to increase width
                    const deltaX = startX - e.clientX; // Reverse drag
                    // Restrict width between 5px and 500px
                    newValue = Math.max(5, Math.min(500, startValue + deltaX));
                    const isCollapsed = newValue <= 100 ? true : false; // true means collapsed, false means expanded
                    
                    // Update aside width, preserving other properties
                    updateCallback({
                        ...aside,
                        width: Math.round(newValue),
                        breakpoint: aside.breakpoint,
                        collapsed: {
                            desktop: isCollapsed,
                            mobile: isCollapsed,
                        }
                    });

                    // Update aside-collapsed-visible icon
                    updateAsideIcon(isCollapsed);
                } else if (type === 'footer') {
                    // Footer: Drag up to increase height
                    const deltaY = startY - e.clientY; // Reverse: Drag up to increase height
                    // Restrict height between 5px and 300px
                    newValue = Math.max(5, Math.min(300, startValue + deltaY));
                    console.log('Resizing footer:', newValue);
                    // Update footer height, preserving other properties
                    updateCallback({
                        ...footer,
                        height: Math.round(newValue)
                    });
                }
            };

            const onMouseUp = () => {
                // Remove mouse move and mouse up event listeners
                document.removeEventListener('mousemove', onMouseMove);
                document.removeEventListener('mouseup', onMouseUp);
            };

            // Remove existing mouse down listener to prevent duplication
            resizer.removeEventListener('mousedown', onMouseDown);
            // Add new mouse down listener
            resizer.addEventListener('mousedown', onMouseDown);
        }

        // Define function to update navbar icon
        function updateNavbarIcon(isCollapsed) {
            // Determine icon name
            const iconName = isCollapsed ? "ri:menu-unfold-line" : "ri:menu-fold-line";
            
            // Define new icon component structure
            const newIconComponent = {
                // Namespace points to the component library (from import dash_iconify)
                namespace: 'dash_iconify',
                // Type points to the component class name
                type: 'DashIconify',
                // Props contain the properties passed to the component
                props: {
                    icon: iconName, // New icon name
                    width: 24
                }
            };

            // Use window.dash_clientside.set_props to update the target component's properties
            // The second parameter is an object where the key is the property name to update ('children'), and the value is the new property value
            window.dash_clientside.set_props('navbar-collapsed-visible', { children: newIconComponent });
        }

        // Define function to update aside icon
        function updateAsideIcon(isCollapsed) {
            // Determine icon name
            const iconName = isCollapsed ? "tabler:arrow-left" : "tabler:arrow-right" ;
            
            // Define new icon component structure
            const newIconComponent = {
                namespace: 'dash_iconify',
                type: 'DashIconify',
                props: {
                    icon: iconName,
                    width: 24
                }
            };

            // Update component properties
            window.dash_clientside.set_props('aside-collapsed-visible', { children: newIconComponent });
        }

        // Set up navbar resizer
        setupResizer('navbar-resizer', 'navbar', (updatedNavbar) => {
            // Update appshell navbar properties
            window.dash_clientside.set_props('appshell', { navbar: updatedNavbar });
        });

        // Set up aside resizer
        setupResizer('aside-resizer', 'aside', (updatedAside) => {
            // Update appshell aside properties
            window.dash_clientside.set_props('appshell', { aside: updatedAside });
        });

        // Set up footer resizer
        setupResizer('footer-resizer', 'footer', (updatedFooter) => {
            // Update appshell footer properties
            window.dash_clientside.set_props('appshell', { footer: updatedFooter });
        });

        // Return no_update to prevent unnecessary updates
        return window.dash_clientside.no_update;
    }
    """,
    Output("appshell", "id"),
    Input("resizer-initializer", "n_clicks"),  # Use hidden control to initialize
    State("appshell", "navbar"),
    State("appshell", "aside"),
    State("appshell", "footer"),
    prevent_initial_call=False,  # Allow initial call to set up listeners
)

if __name__ == "__main__":
    app.run(debug=True)

css file

.mantine-AppShell-root {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.mantine-AppShell-body {
    flex: 1;
    display: flex;
}

.mantine-AppShell-navbar,
.mantine-AppShell-aside {
    height: 100%;
}

[AnnMarieW]

That's a cool demo - thanks for sharing!
I'm going to move this to discussions so it stays open and is easier to find. We like to keep the issue for bugs and feature requests.

Feel free to share this on the Dash forum and on Discord too 🙂

[WheatMaThink]

Thanks for moving it! I'll share on the forum and Discord — appreciate the suggestion. 😊