LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

fix side navigation on mac

Browse source 
mac has an extra header height to handle the top level menu buttons
This commit is contained in:
Sean Yesmunt 2020-08-20 21:40:52 -04:00
parent 514f934148
commit 7b23126379
2 changed files with 22 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
ui/component/sideNavigation/view.jsx
View file

@ -6,6 +6,7 @@ import React from 'react';
import Button from 'component/button'; import Button from 'component/button';
import classnames from 'classnames'; import classnames from 'classnames';
import NotificationBubble from 'component/notificationBubble'; import NotificationBubble from 'component/notificationBubble';
import { IS_MAC } from 'component/app/view';
const ESCAPE_KEY_CODE = 27; const ESCAPE_KEY_CODE = 27;
const BACKSLASH_KEY_CODE = 220; const BACKSLASH_KEY_CODE = 220;
@ -241,7 +242,7 @@ function SideNavigation(props: Props) {
})} })}
> >
{!isOnFilePage && ( {!isOnFilePage && (
<nav className={classnames('navigation', { 'navigation--micro': microNavigation })}> <nav className={classnames('navigation', { 'navigation--micro': microNavigation, 'navigation--mac': IS_MAC })}>
<ul className={classnames('navigation-links', { 'navigation-links--micro': !sidebarOpen })}> <ul className={classnames('navigation-links', { 'navigation-links--micro': !sidebarOpen })}>
{TOP_LEVEL_LINKS.map(linkProps => {TOP_LEVEL_LINKS.map(linkProps =>
!email && linkProps.hideForUnauth && IS_WEB ? null : ( !email && linkProps.hideForUnauth && IS_WEB ? null : (
@ -281,7 +282,11 @@ function SideNavigation(props: Props) {
{(isOnFilePage || isMediumScreen) && sidebarOpen && ( {(isOnFilePage || isMediumScreen) && sidebarOpen && (
<> <>
<nav className={classnames('navigation--filepage')}> <nav
className={classnames('navigation--absolute', {
'navigation--mac': IS_MAC,
})}
>
<ul className="navigation-links--absolute"> <ul className="navigation-links--absolute">
{TOP_LEVEL_LINKS.map(linkProps => {TOP_LEVEL_LINKS.map(linkProps =>
!email && linkProps.hideForUnauth && IS_WEB ? null : ( !email && linkProps.hideForUnauth && IS_WEB ? null : (
@ -331,7 +336,12 @@ function SideNavigation(props: Props) {
</ul> </ul>
)} )}
</nav> </nav>
<div className="navigation__overlay" onClick={() => setSidebarOpen(false)} /> <div
className={classnames('navigation__overlay', {
'navigation__overlay--mac': IS_MAC,
})}
onClick={() => setSidebarOpen(false)}
/>
</> </>
)} )}
</div> </div>

10
ui/scss/component/_navigation.scss
View file

@ -29,7 +29,11 @@
padding-bottom: var(--spacing-l); padding-bottom: var(--spacing-l);
} }
.navigation--filepage { .navigation--mac {
top: calc(var(--header-height) + var(--mac-titlebar-height));
}
.navigation--absolute {
@extend .navigation; @extend .navigation;
z-index: 4; z-index: 4;
width: var(--side-nav-width--large); width: var(--side-nav-width--large);
@ -214,4 +218,8 @@
z-index: 3; z-index: 3;
left: 0; left: 0;
top: var(--header-height); top: var(--header-height);
&.navigation__overlay--mac {
top: calc(var(--header-height) + var(--mac-titlebar-height));
}
} }