From 7b2312637925cfdcdcfab5b4c84788fe09f4496b Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Thu, 20 Aug 2020 21:40:52 -0400
Subject: [PATCH] fix side navigation on mac  mac has an extra header height to
 handle the top level menu buttons

---
 ui/component/sideNavigation/view.jsx | 16 +++++++++++++---
 ui/scss/component/_navigation.scss   | 10 +++++++++-
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/ui/component/sideNavigation/view.jsx b/ui/component/sideNavigation/view.jsx
index 227857ad5..c55f74355 100644
--- a/ui/component/sideNavigation/view.jsx
+++ b/ui/component/sideNavigation/view.jsx
@@ -6,6 +6,7 @@ import React from 'react';
 import Button from 'component/button';
 import classnames from 'classnames';
 import NotificationBubble from 'component/notificationBubble';
+import { IS_MAC } from 'component/app/view';
 
 const ESCAPE_KEY_CODE = 27;
 const BACKSLASH_KEY_CODE = 220;
@@ -241,7 +242,7 @@ function SideNavigation(props: Props) {
       })}
     >
       {!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 })}>
             {TOP_LEVEL_LINKS.map(linkProps =>
               !email && linkProps.hideForUnauth && IS_WEB ? null : (
@@ -281,7 +282,11 @@ function SideNavigation(props: Props) {
 
       {(isOnFilePage || isMediumScreen) && sidebarOpen && (
         <>
-          <nav className={classnames('navigation--filepage')}>
+          <nav
+            className={classnames('navigation--absolute', {
+              'navigation--mac': IS_MAC,
+            })}
+          >
             <ul className="navigation-links--absolute">
               {TOP_LEVEL_LINKS.map(linkProps =>
                 !email && linkProps.hideForUnauth && IS_WEB ? null : (
@@ -331,7 +336,12 @@ function SideNavigation(props: Props) {
               </ul>
             )}
           </nav>
-          <div className="navigation__overlay" onClick={() => setSidebarOpen(false)} />
+          <div
+            className={classnames('navigation__overlay', {
+              'navigation__overlay--mac': IS_MAC,
+            })}
+            onClick={() => setSidebarOpen(false)}
+          />
         </>
       )}
     </div>
diff --git a/ui/scss/component/_navigation.scss b/ui/scss/component/_navigation.scss
index 558a3214d..82e257e71 100644
--- a/ui/scss/component/_navigation.scss
+++ b/ui/scss/component/_navigation.scss
@@ -29,7 +29,11 @@
   padding-bottom: var(--spacing-l);
 }
 
-.navigation--filepage {
+.navigation--mac {
+  top: calc(var(--header-height) + var(--mac-titlebar-height));
+}
+
+.navigation--absolute {
   @extend .navigation;
   z-index: 4;
   width: var(--side-nav-width--large);
@@ -214,4 +218,8 @@
   z-index: 3;
   left: 0;
   top: var(--header-height);
+
+  &.navigation__overlay--mac {
+    top: calc(var(--header-height) + var(--mac-titlebar-height));
+  }
 }