MDNavigationDrawer on top of everything blocking the MDToolBar Menu button

Question

Trying to make the toolbar work as open and close button for the drawer, but for some reason after the drawer opens, the menu button is not active anymore and the drawer is on top of it (invisible). You can drag the drawer form the toolbar menu region, even that they are separated in a BoxLayout.

from kivy.app import App
from kivymd.theming import ThemeManager
from kivymd.app import MDApp
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.screenmanager import ScreenManager, Screen
from kivy.uix.widget import Widget
from kivymd.uix.button import MDIconButton
from kivy.lang import Builder

KV = """
#:import Clock kivy.clock.Clock

Screen:
    BoxLayout:
        orientation: 'vertical'
        
        MDToolbar:
            size_hint_y: 0.1
            elevation: -10
            left_action_items: [["menu", lambda x: nav_drawer.set_state('toggle')]]
                
        NavigationLayout:        
            ScreenManager:
                id: screen_manager
                Screen:
                    name: 'menu'
                    BoxLayout:
                        orientation: 'vertical'
                        
                        Widget:
                
                Screen2:
                    name: 's2'
                    BoxLayout:
                        orientation: 'vertical'

                        Widget:
                        MDLabel:
                            text: 'Profile'
                            halign: 'center'

            MDNavigationDrawer:
                id: nav_drawer
                scrim_color: [0, 0, 0, 0.0]
                elevation: 0

                ContentNavigationDrawer:
                    id: drawerContent
                    BoxLayout:
                        orientation: 'vertical'
                        MDLabel:
                            text: 'App'
                            font_style: 'H1'                  
                        MDRectangleFlatButton:
                            text: 'Select 1'
                            pos_hint: {'center_x':0.5,'center_y':0.1}
                            on_release: Clock.schedule_once(lambda x: app.set_screen(screen_manager, nav_drawer, "s2"), .3)
                

                        MDRectangleFlatButton:
                            text: 'Main'
                            pos_hint: {'center_x':0.5,'center_y':0.1}
                            on_release: Clock.schedule_once(lambda x: app.set_screen(screen_manager, nav_drawer, "menu"), .3) 

"""

class ContentNavigationDrawer(BoxLayout):
    pass

class Screen2(Screen):
    pass

#sm = ScreenManager()
#sm.add_widget(Screen2(name='s2'))

class MainApp(MDApp):
    def build(self):
        self.theme_cls.primary_palette = "Orange"
        sm = ScreenManager()
        sm.add_widget(Screen2(name='s2'))
        Builder.load_string(KV)
    
    def set_screen(self, manager, nav_drawer, name_screen):
        manager.current = name_screen
        nav_drawer.set_state("toggle")

     

MainApp().run()

How can i resize the area the drawer is covering ?

Thank you!

Answer 1

from kivy.uix.boxlayout import BoxLayout
from kivy.uix.screenmanager import ScreenManager, Screen
from kivy.lang import Builder

from kivymd.app import MDApp

KV = """
#:import Clock kivy.clock.Clock

Screen:

    MDToolbar:
        id: toolbar
        pos_hint: {"top": 1}
        elevation: 0
        left_action_items: [["menu", lambda x: nav_drawer.set_state('toggle')]]

    NavigationLayout:  
        x: toolbar.height 
   
        ScreenManager:
            id: screen_manager

            Screen:
                name: 'menu'

                BoxLayout:
                    orientation: 'vertical'

                    Widget:

            Screen2:
                name: 's2'
                
                BoxLayout:
                    orientation: 'vertical'

                    Widget:
                    
                    MDLabel:
                        text: 'Profile'
                        halign: 'center'

        MDNavigationDrawer:
            id: nav_drawer
            scrim_color: [0, 0, 0, 0.0]
            elevation: 0

            ContentNavigationDrawer:
                id: drawerContent
                
                BoxLayout:
                    orientation: 'vertical'
                    
                    MDLabel:
                        text: 'App'
                        font_style: 'H1'    
                                      
                    MDRectangleFlatButton:
                        text: 'Select 1'
                        pos_hint: {'center_x':0.5,'center_y':0.1}
                        on_release: Clock.schedule_once(lambda x: app.set_screen(screen_manager, nav_drawer, "s2"), .3)

                    MDRectangleFlatButton:
                        text: 'Main'
                        pos_hint: {'center_x':0.5,'center_y':0.1}
                        on_release: Clock.schedule_once(lambda x: app.set_screen(screen_manager, nav_drawer, "menu"), .3) 

"""


class ContentNavigationDrawer(BoxLayout):
    pass


class Screen2(Screen):
    pass


class MainApp(MDApp):
    def build(self):
        self.theme_cls.primary_palette = "Orange"
        sm = ScreenManager()
        sm.add_widget(Screen2(name='s2'))
        return Builder.load_string(KV)

    def set_screen(self, manager, nav_drawer, name_screen):
        manager.current = name_screen
        nav_drawer.set_state("toggle")


MainApp().run()