diff --git a/packages/apps/src/SideBar/SideBar.css b/packages/apps/src/SideBar/SideBar.css index b2d2d55b54..c4ef5335b5 100644 --- a/packages/apps/src/SideBar/SideBar.css +++ b/packages/apps/src/SideBar/SideBar.css @@ -52,6 +52,7 @@ flex-flow: column; height: auto; left: 0; + position: relative; transition: left 0.3s linear; width: 100%; @@ -59,7 +60,7 @@ display: flex; height: 100vh; margin: 0; - position: sticky; + padding-bottom: 5rem; top: 0px; width: 100%; } @@ -95,29 +96,20 @@ } .apps--SideBar-collapse { - align-items: flex-end; background: #3f3f3f; bottom: 0; - display: flex; - flex-direction: row wrap; - flex-grow: 1; - justify-content: flex-start; - padding: 3.5rem 0 1rem 0; + left: 0; + padding: 1rem 0 0.75rem 0.5rem; position: sticky; + right: 0; + text-align: left; width: 100%; - /* aligned with hidden tesxt, don't let button jump - or at least ... less */ - &.collapsed { - padding-left: 0.5rem; - } - .ui.circular.button { - bottom: 0.75rem; background: white !important; color: #3f3f3f !important; box-shadow: 0 0 0 1px #eee inset !important; margin: 0; - position: absolute; transition: transform 0.15s; } } @@ -139,7 +131,10 @@ &.expanded .apps--SideBar { text-align: left; - padding-left: 0.7rem; + + .ui.vertical.menu { + padding-left: 0.7rem; + } } &.collapsed .apps--SideBar { diff --git a/packages/apps/src/SideBar/index.tsx b/packages/apps/src/SideBar/index.tsx index 6476dfe9f6..d41a9fcb47 100644 --- a/packages/apps/src/SideBar/index.tsx +++ b/packages/apps/src/SideBar/index.tsx @@ -96,8 +96,8 @@ class SideBar extends React.PureComponent { : } - {this.renderCollapse()} + {this.renderCollapse()} {this.renderToggleBar()}