The MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.
import Html exposing (Html, text)
import Html.Attributes exposing (style)
import Material.Drawer as Drawer
exposing
( permanentDrawer
, permanentDrawerConfig
)
import Material.List
exposing
( list
, listConfig
, listItem
, listItemConfig
)
main =
Html.div
[ style "display" "flex"
, style "flex-flow" "row nowrap"
]
[ permanentDrawer permanentDrawerConfig
[ drawerContent []
[ list listConfig
[ listItem listItemConfig
[ text "Home" ]
, listItem listItemConfig
[ text "Log out" ]
]
]
]
, Html.div [] [ text "Main Content" ]
]Default configuration of a permanent drawer
Configuration of a permanent drawer
Drawer content
Drawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.
Drawer header view function
permanentDrawer permanentDrawerConfig
[ drawerHeader []
[ Html.h3 [ drawerTitle ] [ text "Title" ]
, Html.h6 [ drawerSubtitle ] [ text "Subtitle" ]
]
, drawerContent [] []
]Attribute to mark the title text element of the drawer header
Attribute to mark the subtitle text element of the drawer header
Dismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.
Dismissible drawer view function
Html.div []
[ dismissibleDrawer
{ dismissibleDrawerConfig | open = True }
[ drawerContent [] [] ]
, Html.div [ Drawer.appContent ]
[ text "Main Content" ]
]Default configuration of a dismissible drawer
Configuration of a dismissible drawer
Dismissible drawer's app content marker
Apply this attribute to the page's content for open/close animation to work. The page content has to be the next sibling of the dismissible drawer.
Modal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.
Modal drawer view function
Html.div []
[ modalDrawer
{ modalDrawerConfig
| open = True
, onClick = Just DrawerClosed
}
[ drawerContent [] [] ]
, drawerScrim [] []
, Html.div [] [ text "Main Content" ]
]Default configuration of a modal drawer
Configuration of a model drawer
Modal drawer's scrim element
Prevents the application from interaction while the modal drawer is open. Has
to be the next sibling after the modalDrawer and before the page's content.
Permanent drawer view function