Restructure header navigation (#1611)

* Restructure header navigation

* Hide theme button in guest mode

* Update channel selector width and navigation top in header

ui/component/headerMenuButtons/index.js

@@ -3,7 +3,7 @@ import { doSetClientSetting } from 'redux/actions/settings';
 import { selectClientSetting } from 'redux/selectors/settings';
 import * as SETTINGS from 'constants/settings';
 import HeaderMenuButtons from './view';
-import { selectUserVerifiedEmail, selectUser, selectOdyseeMembershipName } from 'redux/selectors/user';
+import { selectUserVerifiedEmail, selectUser } from 'redux/selectors/user';
 import { doOpenModal } from 'redux/actions/app';
 
 const select = (state) => ({
@@ -11,7 +11,6 @@ const select = (state) => ({
   automaticDarkModeEnabled: selectClientSetting(state, SETTINGS.AUTOMATIC_DARK_MODE_ENABLED),
   currentTheme: selectClientSetting(state, SETTINGS.THEME),
   user: selectUser(state),
-  odyseeMembership: selectOdyseeMembershipName(state),
 });
 
 const perform = (dispatch) => ({

ui/component/headerMenuButtons/view.jsx

@@ -2,9 +2,10 @@
 import 'scss/component/_header.scss';
 
 import { ENABLE_UI_NOTIFICATIONS, ENABLE_NO_SOURCE_CLAIMS } from 'config';
-import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button';
+import { Menu, MenuList, MenuButton } from '@reach/menu-button';
 import * as ICONS from 'constants/icons';
 import * as PAGES from 'constants/pages';
+import Button from 'component/button';
 import HeaderMenuLink from 'component/common/header-menu-link';
 import Icon from 'component/common/icon';
 import NotificationHeaderButton from 'component/headerNotificationButton';
@@ -19,13 +20,10 @@ type HeaderMenuButtonProps = {
   user: ?User,
   handleThemeToggle: (boolean, string) => void,
   doOpenModal: (string, {}) => void,
-  odyseeMembership: ?string,
 };
 
 export default function HeaderMenuButtons(props: HeaderMenuButtonProps) {
-  const { authenticated, automaticDarkModeEnabled, currentTheme, user, handleThemeToggle, odyseeMembership } = props;
-
-  const isOnMembershipPage = window.location.pathname === `/$/${PAGES.ODYSEE_MEMBERSHIP}`;
+  const { authenticated, automaticDarkModeEnabled, currentTheme, user, handleThemeToggle } = props;
 
   const notificationsEnabled = ENABLE_UI_NOTIFICATIONS || (user && user.experimental_ui);
   const livestreamEnabled = Boolean(ENABLE_NO_SOURCE_CLAIMS && user && !user.odysee_live_disabled);
@@ -58,27 +56,18 @@ export default function HeaderMenuButtons(props: HeaderMenuButtonProps) {
 
       {notificationsEnabled && <NotificationHeaderButton />}
 
-      <Menu>
-        <Tooltip title={__('Settings')}>
-          <MenuButton className="header__navigationItem--icon">
-            <Icon size={18} icon={ICONS.SETTINGS} aria-hidden />
-          </MenuButton>
-        </Tooltip>
-
-        <MenuList className="menu__list--header">
-          <HeaderMenuLink page={PAGES.SETTINGS} icon={ICONS.SETTINGS} name={__('Settings')} />
-          {/* don't show upgrade button if on membership page or already have a membership */}
-          {!isOnMembershipPage && !odyseeMembership && (
-            <HeaderMenuLink page={PAGES.ODYSEE_MEMBERSHIP} icon={ICONS.UPGRADE} name={__('Odysee Premium')} />
-          )}
-          <HeaderMenuLink page={PAGES.HELP} icon={ICONS.HELP} name={__('Help')} />
-
-          <MenuItem className="menu__link" onSelect={() => handleThemeToggle(automaticDarkModeEnabled, currentTheme)}>
-            <Icon icon={currentTheme === 'light' ? ICONS.DARK : ICONS.LIGHT} />
-            {currentTheme === 'light' ? __('Dark') : __('Light')}
-          </MenuItem>
-        </MenuList>
-      </Menu>
+      {authenticated && (
+        <Menu>
+          <Tooltip title={currentTheme === 'light' ? __('Dark') : __('Light')}>
+            <Button
+              className="header__navigationItem--icon"
+              onClick={() => handleThemeToggle(automaticDarkModeEnabled, currentTheme)}
+            >
+              <Icon icon={currentTheme === 'light' ? ICONS.DARK : ICONS.LIGHT} />
+            </Button>
+          </Tooltip>
+        </Menu>
+      )}
     </div>
   );
 }

ui/component/headerProfileMenuButton/view.jsx

@@ -88,6 +88,9 @@ export default function HeaderProfileMenuButton(props: HeaderMenuButtonProps) {
         )}
         {authenticated ? (
           <MuiMenu {...menuProps}>
+            <ChannelSelector storeSelection isHeaderMenu />
+
+            <hr className="menu__separator" />
             <HeaderMenuLink useMui page={PAGES.UPLOADS} icon={ICONS.PUBLISH} name={__('Uploads')} />
             <HeaderMenuLink useMui page={PAGES.CHANNELS} icon={ICONS.CHANNEL} name={__('Channels')} />
             <HeaderMenuLink
@@ -96,11 +99,17 @@ export default function HeaderProfileMenuButton(props: HeaderMenuButtonProps) {
               icon={ICONS.ANALYTICS}
               name={__('Creator Analytics')}
             />
+
+            <hr className="menu__separator" />
             <HeaderMenuLink useMui page={PAGES.REWARDS} icon={ICONS.REWARDS} name={__('Rewards')} />
             <HeaderMenuLink useMui page={PAGES.INVITE} icon={ICONS.INVITE} name={__('Invites')} />
             <HeaderMenuLink useMui page={PAGES.ODYSEE_MEMBERSHIP} icon={ICONS.UPGRADE} name={__('Odysee Premium')} />
-            <ChannelSelector storeSelection isHeaderMenu />
 
+            <hr className="menu__separator" />
+            <HeaderMenuLink useMui page={PAGES.SETTINGS} icon={ICONS.SETTINGS} name={__('Settings')} />
+            <HeaderMenuLink useMui page={PAGES.HELP} icon={ICONS.HELP} name={__('Help')} />
+
+            <hr className="menu__separator" />
             <MuiMenuItem onClick={signOut}>
               <div className="menu__link" style={{ flexDirection: 'column', alignItems: 'flex-start' }}>
                 <div className="menu__link-label">

ui/scss/component/_header.scss

@@ -475,3 +475,21 @@
     margin: 0;
   }
 }
+
+.channel__selector {
+  width: 100%;
+  .menu__link {
+    width: 100% !important;
+    .claim-preview__title {
+      text-align: left;
+    }
+    .comment__badge {
+      flex: 1;
+      text-align: left;
+    }
+    .icon--ChevronDown {
+      margin-left: auto;
+      margin-right: 0;
+    }
+  }
+}

ui/scss/component/menu-button.scss

@@ -144,6 +144,8 @@ reach-portal {
 .menu__list--header {
   @extend .menu__list;
 
+  margin-top: 10px;
+
   .channel__selector {
     margin: 0px;
     display: flex;
@@ -153,6 +155,13 @@ reach-portal {
     }
   }
 
+  .MuiPaper-root {
+    top: calc(var(--header-height) - 11px) !important;
+    @media (max-width: $breakpoint-small) {
+      top: calc(var(--header-height-mobile) - 11px) !important;
+    }
+  }
+
   [data-reach-menu-item][data-selected] {
     .menu__link {
       color: var(--color-odysee-contrast) !important;
@@ -175,8 +184,6 @@ reach-portal {
       color: var(--color-odysee-contrast) !important;
     }
   }
-
-  margin-top: 10px;
 }
 
 .menu__list--comments {