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

Question

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:

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:

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"

Answer 1

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.