material-designnavigation-drawerkivy-languagekivymd

How can I create a Navigation Rail that works together with a Navigation Drawer?


I'm learning material design inside the kivymd. Seeing the material design website, I noted that it uses a Navigation Rail with a hover event for some buttons that add a Navigation Drawer. The image:

Material design website

So I am trying to create it inside my python program with kivymd, but my problem is that when I move the hover, the navigation drawer stand above the navigation rail, like this:

Before hover

After hover

I tried to use pos, padding and spacing, but they do not change the position. The pos_hint works, but the navigation rail has an absolute size, so it isn't solved. My resumed kv language:

MDNavigationRail:
    id: nav_rail
    selected_color_background: app.theme_cls.primary_color
    ripple_color_item: app.theme_cls.primary_color
    font_name: app.COMFORTAA
    on_item_release: root._item_clicked(*args)
    MDNavigationRailContent:

MDNavigationLayout:
    MDScreenManager:

MDNavigationDrawer:
    id: nav_drawer
    radius: 0, 16, 16, 0
    elevation: 0.5
    font_size: '16dp'
    font_name: app.COMFORTAA
    padding_x: '100dp'
    width: "240dp"

Solution

  • I got a way to do it with pos_hint:

    <MyScreen>:
        MDFloatLayout:
            MDBoxLayout:
                size: root.size
                pos: root.pos
                MDNavigationRail:
                    id: nav_rail
                    [...]
                MDBoxLayout:
                    MDScreenManager:
                        [...]
            MDNavigationDrawer:
                id: nav_drawer
                pos_hint: {'x': nav_rail.width / root.width}
                [...]
    

    First I created a MDFloatLayout, to the MDNavigationDrawer can have a float position.

    The pos_hint was the width from the MDNavigationRail divided by the width from the root, it will give me the rail end percent position, in relation to the root width.

    Perhaps I needed to put the ScreenManager and the rail inside a Box Layout, like the guidance from documentation, and give the root size and position from the MDBoxLayout inside the MDFloatLayout.