diff --git a/browser/components/SideNavFilter.styl b/browser/components/SideNavFilter.styl index bad5661b4..b7fd7dc67 100644 --- a/browser/components/SideNavFilter.styl +++ b/browser/components/SideNavFilter.styl @@ -102,4 +102,4 @@ body[data-theme="dark"] background-color alpha($ui-dark-button--active-backgroundColor, 50%) color $ui-favorite-star-button-color .menu-button-label - color $ui-dark-text-color \ No newline at end of file + color $ui-dark-text-color diff --git a/browser/main/SideNav/SideNav.styl b/browser/main/SideNav/SideNav.styl index f3de5803b..586692871 100644 --- a/browser/main/SideNav/SideNav.styl +++ b/browser/main/SideNav/SideNav.styl @@ -15,7 +15,8 @@ navButtonColor() position absolute top 22px - right 5px + left 200px + height 23px &:hover color $ui-text-color &:active, &:active:hover @@ -49,6 +50,7 @@ .top-menu-label margin-left 5px overflow ellipsis + opacity 0 .tabBody flex 1 @@ -65,6 +67,40 @@ overflow-y auto flex: 1 +.root--folded + height 100vh + width $sideNav--folded-width + .switch-buttons + display none + .top + height 60px + .top-menu + position static + width $sideNav--folded-width + height 60px + text-align center + &:hover .top-menu-label + transition opacity 0.15s + opacity 1 + .top-menu-label + position fixed + display inline-block + height 30px + left $sideNav--folded-width + padding 0 10px + margin-top -8px + opacity 0 + margin-left 0 + overflow hidden + background-color $ui-tooltip-backgroundColor + z-index 10 + color white + line-height 30px + border-top-right-radius 2px + border-bottom-right-radius 2px + pointer-events none + font-size 12px + body[data-theme="dark"] .root, .root--folded border-color $ui-dark-borderColor diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js index 9fe198ad4..d93eb87e2 100644 --- a/browser/main/SideNav/index.js +++ b/browser/main/SideNav/index.js @@ -150,6 +150,7 @@ class SideNav extends React.Component { onClick={(e) => this.handleMenuButtonClick(e)} > + Preferences