Bottom/Top DrawerSidebar don't show CollapseBtn and collapses on the side

[raphaelfavier]

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:

import React from "react";
import styled from "styled-components";
import Toolbar from "@material-ui/core/Toolbar";
import CssBaseline from "@material-ui/core/CssBaseline";
import {
  HeaderMockUp,
  NavHeaderMockUp,
  NavContentMockUp,
  ContentMockUp,
  FooterMockUp,
} from "@mui-treasury/mockup/layout";
import Layout, {
  Root,
  getHeader,
  getDrawerSidebar,
  getSidebarTrigger,
  getSidebarContent,
  getCollapseBtn,
  getContent,
  getFooter,
} from "@mui-treasury/layout";

import { DailyCheckout } from "@mui-treasury/mockup/brands/dailyShopping";

const Header = getHeader(styled);
const DrawerSidebar = getDrawerSidebar(styled);
const SidebarTrigger = getSidebarTrigger(styled);
const SidebarContent = getSidebarContent(styled);
const CollapseBtn = getCollapseBtn(styled);
const Content = getContent(styled);
const Footer = getFooter(styled);

const scheme = 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 bottom
      width: "auto",
      collapsible: true,
      collapsedWidth: 64,
    });
});

scheme.enableAutoCollapse("unique_id", "md");

const Dashboard = () => {
  return (
    <Root scheme={scheme}>
      {({ state: { sidebar } }) => (
        <>
          <CssBaseline />
          <Header>
            <Toolbar>
              <SidebarTrigger sidebarId="unique_id" />
              <HeaderMockUp />
            </Toolbar>
          </Header>
          <DrawerSidebar sidebarId="unique_id">
            <SidebarContent>
              <NavHeaderMockUp collapsed={sidebar.unique_id.collapsed} />
              <NavContentMockUp />
            </SidebarContent>
            <CollapseBtn />
          </DrawerSidebar>
          <Content>
            <ContentMockUp />
            <DailyCheckout />
          </Content>
          <Footer>
            <FooterMockUp />
          </Footer>
        </>
      )}
    </Root>
  );
};

export default Dashboard;

[siriwatknp]

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.