You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I have a DrawerSidebar anchored at the bottom of my page.
If I set it collapsible it will collapse horizontally on the left of the screen.
I'd like it to collapse vertically toward the bottom of the screen.
I'd like to be able to set its collapsed height as well (or that the collapsedWidth key be used as such)
If I add a CollapseBtn to it no Icon is displayed in the button
Here is an example code derived form the dashboard react starter:
importReactfrom"react";importstyledfrom"styled-components";importToolbarfrom"@material-ui/core/Toolbar";importCssBaselinefrom"@material-ui/core/CssBaseline";import{HeaderMockUp,NavHeaderMockUp,NavContentMockUp,ContentMockUp,FooterMockUp,}from"@mui-treasury/mockup/layout";importLayout,{Root,getHeader,getDrawerSidebar,getSidebarTrigger,getSidebarContent,getCollapseBtn,getContent,getFooter,}from"@mui-treasury/layout";import{DailyCheckout}from"@mui-treasury/mockup/brands/dailyShopping";constHeader=getHeader(styled);constDrawerSidebar=getDrawerSidebar(styled);constSidebarTrigger=getSidebarTrigger(styled);constSidebarContent=getSidebarContent(styled);constCollapseBtn=getCollapseBtn(styled);constContent=getContent(styled);constFooter=getFooter(styled);constscheme=Layout();scheme.configureHeader((builder)=>{builder.registerConfig("xs",{position: "sticky",}).registerConfig("md",{position: "relative",clipped: {unique_id: true},});});scheme.configureEdgeSidebar((builder)=>{builder.create("unique_id",{anchor: "bottom"})// changed to bottom// I created only 1 permanent config but using temp or persistent does not change the issue.registerPermanentConfig("xs",{anchor: "bottom",// changed to bottomwidth: "auto",collapsible: true,collapsedWidth: 64,});});scheme.enableAutoCollapse("unique_id","md");constDashboard=()=>{return(<Rootscheme={scheme}>{({state: { sidebar }})=>(<><CssBaseline/><Header><Toolbar><SidebarTriggersidebarId="unique_id"/><HeaderMockUp/></Toolbar></Header><DrawerSidebarsidebarId="unique_id"><SidebarContent><NavHeaderMockUpcollapsed={sidebar.unique_id.collapsed}/><NavContentMockUp/></SidebarContent><CollapseBtn/></DrawerSidebar><Content><ContentMockUp/><DailyCheckout/></Content><Footer><FooterMockUp/></Footer></>)}</Root>);};exportdefaultDashboard;
The text was updated successfully, but these errors were encountered:
raphaelfavier
changed the title
Horizontal DrawerSidebar don't show CollapseBtn and collapse on the side
Bottom/Top DrawerSidebar don't show CollapseBtn and collapses on the side
Jan 31, 2021
Thanks for reporting this, variant: bottom is not supported at this point. Can you explain more about the use case, it might be worth to add this feature to V5 that I'm working on.
I have a DrawerSidebar anchored at the bottom of my page.
If I set it collapsible it will collapse horizontally on the left of the screen.
I'd like it to collapse vertically toward the bottom of the screen.
I'd like to be able to set its collapsed height as well (or that the collapsedWidth key be used as such)
If I add a CollapseBtn to it no Icon is displayed in the button
Here is an example code derived form the dashboard react starter:
The text was updated successfully, but these errors were encountered: