diff --git a/packages/app/src/components/Layout/sidebar/index.jsx b/packages/app/src/components/Layout/sidebar/index.jsx index 21a73d15..449cf49c 100755 --- a/packages/app/src/components/Layout/sidebar/index.jsx +++ b/packages/app/src/components/Layout/sidebar/index.jsx @@ -227,6 +227,7 @@ export default class Sidebar extends React.Component { classnames( "app_sidebar", { + ["floating"]: window.app?.settings.get("sidebar.floating"), ["collapsed"]: this.state.visible && this.state.collapsed, ["elevated"]: this.state.visible && this.state.elevated, ["hidden"]: !this.state.visible, diff --git a/packages/app/src/components/Layout/sidebar/index.less b/packages/app/src/components/Layout/sidebar/index.less index 05a4518e..b81306b2 100755 --- a/packages/app/src/components/Layout/sidebar/index.less +++ b/packages/app/src/components/Layout/sidebar/index.less @@ -25,6 +25,10 @@ border-radius: 0 @app_sidebar_borderRadius @app_sidebar_borderRadius 0; border: 1px solid var(--sidebar-background-color); + &.floating { + position: absolute; + } + &.collapsed { width: 80px; min-width: 80px; diff --git a/packages/app/src/components/Layout/sidedrawer/index.jsx b/packages/app/src/components/Layout/sidedrawer/index.jsx index 1285ac7c..da85c3d5 100755 --- a/packages/app/src/components/Layout/sidedrawer/index.jsx +++ b/packages/app/src/components/Layout/sidedrawer/index.jsx @@ -224,7 +224,12 @@ export default class SidedrawerController extends React.Component { render() { return
{this.state.drawers}
diff --git a/packages/app/src/components/Layout/sidedrawer/index.less b/packages/app/src/components/Layout/sidedrawer/index.less index 88528d52..fe5c5153 100755 --- a/packages/app/src/components/Layout/sidedrawer/index.less +++ b/packages/app/src/components/Layout/sidedrawer/index.less @@ -3,6 +3,12 @@ .sidedrawers-wrapper { display: flex; flex-direction: row; + + &.floating-sidebar { + z-index: 950; + position: absolute; + margin-left: @app_sidebar_collapsed_width; + } .sidedrawer { position: relative;