feat: Navbar2 (#474)

* feat: first Navbar2 mockup. style: run prettier

* fix: theme dark/light switch

* style: desktop

* refactor: update naming

* feat: renew UserMenu component

* feat: include UserMenu into NavBar2

* feat: UserMenu and Navbar2 stories

* feat: split UserMenu in different components

* style: reorganized

* style: UserMenu mobile. refactor: UserMenu types

* feat: Navbar2 mobile

* style: change prettier rules

* feat: change prettier rule

* style: navbar2 hover

* feat: add Navbar2 links and copy

* feat: UserMenu links, reorganize config json constants

* feat: change user menu link to my assets

* feat: renove hardcoded function

* feat: change Navbar2 arrow

* feat: navbar2 subitem hover link

* style: sign out

* style: UserMenu arrow

* style: Notification icon fill color

* fix: set onClickMenuOption as optional

* style: mobile menu icon

* style: Navbar in mobile

* fix: related PR comments

* feat: handle user menu without profile

* feat: change copy of DAO Grants

* style: Navbar font size and hover sign out

* feat: hide UserMenu when leave

* refactor: Navbar and sub component

* style: color and hover in Navbar2

* feat: remove useless isSomeBalanceTooHigh

* feat: changed requested from PR

* feat: add i18n support and menu tracking action

* fix: stories

* refactor: Navbar2 i18n and types

* style: prettier

* refactor: naming

.prettierrc.json

@@ -1,4 +1,5 @@
 {
+  "endOfLine": "lf",
   "semi": false,
   "singleQuote": true,
   "trailingComma": "none"

.storybook/theme.tsx

@@ -43,7 +43,8 @@ const LIGHT_THEME = `
   --toast-text: #ffffff;
   --modal: #ffffff;
   --dimmer: #ffffffdd;
-  --clear-divider: #A09BA8;
+  --text-area-border: #67637033;
+  --clear-divider: #a09ba8;
   --navbar-icons: #000;
 
   /* shadows */
@@ -56,7 +57,19 @@ const LIGHT_THEME = `
   --shadow-color-3: 0px 16px 32px 0px rgba(0, 0, 0, 0.24);
 
   /* svgs */
-  --brightness: brightness(0.1); /* black svgs */
+  --brightness: brightness(0.1);
+  /* black svgs */
+  --notification-onboarding-bell: url(../../assets/bell-onboarding-light.png);
+
+  /* Navbar2 */
+  --navbar-menu-enabled: #a09ba8;
+  --navbar-menu-hover: #000;
+  --navbar-item-text-enabled: #716b7c;
+  --navbar-item-text-hover: #000;
+  --navbar-item-border-enabled: #cfcdd4;
+  --navbar-item-border-hover: #000;
+  --usermenu-item-text-enabled: #43404a;
+  --usermenu-item-border-enabled: #43404a;
 }
 `
 
@@ -86,7 +99,7 @@ const DARK_THEME = `
 
   /* ui */
   --divider: #67637033;
-  --dropdown: #676370;
+  --dropdown: #716b7c;
   --dropdown-hover: #24212933;
   --popup: #676370;
   --popup-text: #ffffff;
@@ -98,8 +111,8 @@ const DARK_THEME = `
   --toast-text: #ffffff;
   --modal: #242129;
   --dimmer: #000000dd;
-  --cloud-sky: #716B7C;
-  --clear-divider: #A09BA8;
+  --text-area-border: #676370;
+  --clear-divider: #a09ba8;
   --navbar-icons: #fff;
 
   /* shadows */
@@ -112,7 +125,20 @@ const DARK_THEME = `
   --shadow-color-3: 0px 16px 32px 0px rgba(0, 0, 0, 0.32);
 
   /* svgs */
-  --brightness: brightness(100); /* black svgs */
+  --brightness: brightness(100);
+  /* black svgs */
+
+  --notification-onboarding-bell: url(../../assets/bell-onboarding-dark.png);
+
+  /* Navbar2 */
+  --navbar-menu-enabled: #ecebed;
+  --navbar-menu-hover: #fff;
+  --navbar-item-text-enabled: #cfcdd4;
+  --navbar-item-text-hover: #fff;
+  --navbar-item-border-enabled: #716b7c;
+  --navbar-item-border-hover: #cfcdd4;
+  --usermenu-item-text-enabled: #cfcdd4;
+  --usermenu-item-border-enabled: #cfcdd4;
 }
 `
 

src/components/Back/Back.tsx

@@ -4,7 +4,7 @@ import './Back.css'
 export type BackProps = {
   className?: string
   absolute?: boolean
-  onClick?: () => void
+  onClick?: (e: React.MouseEvent) => void
 }
 
 export class Back extends React.PureComponent<BackProps> {

src/components/Icons/ArrowIcon.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import classNames from 'classnames'
+
+import './styles.css'
+
+const ArrowIcon = () => (
+  <div className={classNames('dui-icon-container', 'centered')}>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="19"
+      height="16"
+      viewBox="0 0 19 16"
+      fill="none"
+    >
+      <path
+        fill={'var(--navbar-icons)'}
+        d="M10.303 15.8894L8.94081 14.5416L14.5763 8.92003H0.016949L0.021785 6.96933L14.5812 6.96933L8.97347 1.36549L10.3424 0L18.2674 7.94468L10.303 15.8894Z"
+      />
+    </svg>
+  </div>
+)
+
+export default ArrowIcon

src/components/Icons/ChevronIcon.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import classNames from 'classnames'
+
+import './styles.css'
+
+const ChevronIcon = ({ down = false }: { down?: boolean }) => (
+  <div
+    className={classNames(
+      'dui-icon-container',
+      'centered',
+      down && 'rotate-180'
+    )}
+  >
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="10"
+      height="6"
+      viewBox="0 0 10 6"
+    >
+      <g fill="none" fillRule="evenodd">
+        <path d="M-7 15h24V-9H-7z" />
+        <path
+          fill={'var(--navbar-icons)'}
+          d="M5 0l4.756 4.6a.806.806 0 0 1 .002 1.156.856.856 0 0 1-1.192.003L5 2.317 1.434 5.759a.856.856 0 0 1-1.192-.003A.806.806 0 0 1 .244 4.6L5 0z"
+        />
+      </g>
+    </svg>
+  </div>
+)
+
+export default ChevronIcon

src/components/Icons/ExternalIcon.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import classNames from 'classnames'
+
+import './styles.css'
+
+const ExternalIcon = () => (
+  <div className={classNames('dui-icon-container', 'centered')}>
+    <svg
+      width="14"
+      height="15"
+      viewBox="0 0 14 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M13.7158 11.9549L11.7997 11.9674L11.7997 4.00746L1.51738 14.3152L0.139735 12.9342L10.422 2.62639L2.49426 2.63894L2.49426 0.705449H13.7158L13.7158 11.9549Z"
+        fill={'var(--navbar-icons)'}
+      />
+    </svg>
+  </div>
+)
+
+export default ExternalIcon

src/components/Icons/Notifications/ManaMainnet.tsx

@@ -5,7 +5,7 @@ const ManaMainnet = (props: React.SVGAttributes<SVGElement>) => {
     <svg width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
       <circle cx="12" cy="12" r="12" fill="url(#paint0_linear_32_9725)" />
       <path
-        fill-rule="evenodd"
+        fillRule="evenodd"
         clip-rule="evenodd"
         d="M12 5L19 12L12 19L5 12L12 5ZM12 6.96L17.04 12L12 17.04L6.96 12L12 6.96ZM12 14.52C12.6683 14.5201 13.3093 14.2547 13.782 13.7821C14.2546 13.3096 14.5202 12.6686 14.5203 12.0003C14.5204 11.3319 14.2549 10.6909 13.7824 10.2183C13.3099 9.74565 12.6689 9.48008 12.0006 9.48C11.3322 9.48 10.6913 9.7455 10.2187 10.2181C9.74608 10.6907 9.48058 11.3317 9.48058 12C9.48058 12.6683 9.74608 13.3093 10.2187 13.7819C10.6913 14.2545 11.3317 14.52 12 14.52Z"
         fill="#FCFCFC"

src/components/Icons/Notifications/NotificationBell.tsx

@@ -4,7 +4,7 @@ const NotificationBell = () => (
   <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
     <path
       d="M16 23C15.6021 22.9982 15.2209 22.8503 14.9388 22.5884C14.6568 22.3264 14.4964 21.9714 14.4925 21.6H17.4925C17.4941 21.7872 17.4558 21.9727 17.38 22.146C17.283 22.3537 17.1345 22.5369 16.9467 22.6806C16.7589 22.8242 16.5373 22.9241 16.3 22.972H16.2647C16.1776 22.9889 16.089 22.9983 16 23ZM22 20.9H10V19.5L11.5 18.8L11.5 14.95C11.4605 13.9624 11.6995 12.9824 12.193 12.108C12.4359 11.7071 12.7671 11.3588 13.1647 11.0861C13.5624 10.8134 14.0175 10.6225 14.5 10.526V9L17.5 9V10.526C19.4342 10.9558 20.5 12.5266 20.5 14.95V18.8L22 19.5V20.9Z"
-      fill="#FCFCFC"
+      fill={'var(--navbar-icons)'}
     />
   </svg>
 )

src/components/Icons/Notifications/NotificationBellActive.tsx

@@ -5,7 +5,7 @@ const NotificationBellActive = () => (
     <circle cx="16" cy="16" r="16" fill="#FF2D55" />
     <path
       d="M16 23C15.6021 22.9982 15.2209 22.8503 14.9388 22.5884C14.6568 22.3264 14.4964 21.9714 14.4925 21.6H17.4925C17.4941 21.7872 17.4558 21.9727 17.38 22.146C17.283 22.3537 17.1345 22.5369 16.9467 22.6806C16.7589 22.8242 16.5373 22.9241 16.3 22.972H16.2647C16.1776 22.9889 16.089 22.9983 16 23ZM22 20.9H10V19.5L11.5 18.8L11.5 14.95C11.4605 13.9624 11.6995 12.9824 12.193 12.108C12.4359 11.7071 12.7671 11.3588 13.1647 11.0861C13.5624 10.8134 14.0175 10.6225 14.5 10.526V9L17.5 9V10.526C19.4342 10.9558 20.5 12.5266 20.5 14.95V18.8L22 19.5V20.9Z"
-      fill="#FCFCFC"
+      fill={'var(--navbar-icons)'}
     />
   </svg>
 )

src/components/Icons/styles.css

@@ -2,3 +2,16 @@
   width: 24px;
   height: 24px;
 }
+
+.dui-icon-container.centered {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.iconContainer.rotate-180 svg,
+.dui-icon-container.rotate-180 svg {
+  transform: rotateZ(180deg);
+}

src/components/Navbar/Navbar.stories.tsx

@@ -7,6 +7,7 @@ import { Hero } from '../Hero/Hero'
 import { Parallax } from '../Parallax/Parallax'
 import { UserMenu } from '../UserMenu/UserMenu'
 import { avatar } from '../../data/avatar'
+import { i18n as i18nUserMenu } from '../UserMenu/UserMenu.i18n'
 
 import { Navbar } from './Navbar'
 import './Navbar.stories.css'
@@ -218,7 +219,9 @@ storiesOf('Navbar', module)
           address="0x68FFc53C43C65C8Dd778969320e21B85b10363cE"
           mana={200000}
           onClickAccount={() => console.log('Clicked on account menu')}
-          rightMenu={<UserMenu avatar={avatar} isSignedIn />}
+          rightMenu={
+            <UserMenu avatar={avatar} isSignedIn i18n={i18nUserMenu} />
+          }
         />
       </div>
     )

src/components/Navbar2/MainMenu/MainMenu.css

@@ -0,0 +1,24 @@
+.dui-navbar2__menu.dui-navbar2__menu-desktop {
+  display: flex;
+  height: 100%;
+}
+
+.dui-navbar2__menu.dui-navbar2__menu-mobile {
+  position: fixed;
+  display: none;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  background-color: var(--background);
+  width: 100vw;
+  height: 100vh;
+  top: -150vh;
+  left: 0;
+  transition: top 200ms ease-in-out;
+}
+
+@media (max-width: 991px) {
+  .dui-navbar2__menu.dui-navbar2__menu-mobile {
+    display: flex;
+  }
+}

src/components/Navbar2/MainMenu/MainMenu.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import classNames from 'classnames'
+
+import { MenuItem } from '../MenuItem/MenuItem'
+import { Navbar2Pages } from '../Navbar2.types'
+import { MainMenuProps } from './MainMenu.types'
+
+import './MainMenu.css'
+
+export const MainMenu = (props: MainMenuProps) => {
+  const { i18n, ...menuItemProps } = props
+  return (
+    <div
+      className={classNames(
+        'dui-navbar2__menu',
+        !props.isMobile && 'dui-navbar2__menu-desktop',
+        props.isMobile && 'dui-navbar2__menu-mobile'
+      )}
+    >
+      <MenuItem
+        {...menuItemProps}
+        section={Navbar2Pages.MARKETPLACE}
+        title={i18n.marketplace}
+      />
+      <MenuItem
+        {...menuItemProps}
+        section={Navbar2Pages.CREATE}
+        title={i18n.create}
+      />
+      <MenuItem
+        {...menuItemProps}
+        section={Navbar2Pages.EXPLORE}
+        title={i18n.explore}
+      />
+      <MenuItem
+        {...menuItemProps}
+        section={Navbar2Pages.LEARN}
+        title={i18n.learn}
+      />
+      <MenuItem
+        {...menuItemProps}
+        section={Navbar2Pages.GOVERNANCE}
+        title={i18n.governance}
+      />
+    </div>
+  )
+}

src/components/Navbar2/MainMenu/MainMenu.types.ts

@@ -0,0 +1,12 @@
+import { Navbar2MenuI18nProps, Navbar2Pages } from '../Navbar2.types'
+
+export type MainMenuProps = {
+  activePage: Navbar2Pages | string
+  onToggleShowSubMenu: (
+    e: React.MouseEvent,
+    show: boolean,
+    section?: Navbar2Pages
+  ) => void
+  i18n: Navbar2MenuI18nProps
+  isMobile?: boolean
+}

src/components/Navbar2/MenuItem/MenuItem.css

@@ -0,0 +1,32 @@
+.dui-menu-item .dui-icon-container.centered {
+  margin-top: 4px;
+  margin-left: 4px;
+}
+
+.dui-menu-item .dui-icon-container.centered svg path:nth-child(2) {
+  fill: var(--navbar-item-text-enabled);
+}
+
+.dui-menu-item.active .dui-icon-container.centered svg path:nth-child(2),
+.dui-menu-item:hover .dui-icon-container.centered svg path:nth-child(2) {
+  fill: var(--text);
+}
+
+@media (max-width: 991px) {
+  .item.dui-menu-item.mobile {
+    cursor: pointer;
+    padding: 40px 0 23.66px;
+    display: flex;
+    align-items: center;
+    border-bottom-color: var(--navbar-menu-hover);
+    color: var(--navbar-menu-hover);
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 18px;
+    border-bottom-style: solid;
+    width: calc(100% - 50px);
+    margin: 0 25px;
+    justify-content: space-between;
+  }
+}

src/components/Navbar2/MenuItem/MenuItem.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import Menu from 'semantic-ui-react/dist/commonjs/collections/Menu'
+import classNames from 'classnames'
+
+import ArrowIcon from '../../Icons/ArrowIcon'
+import ChevronIcon from '../../Icons/ChevronIcon'
+import { MenuItemProps } from './MenuItem.types'
+
+import './MenuItem.css'
+
+export const MenuItem = (props: MenuItemProps) => {
+  const { activePage, section, title, onToggleShowSubMenu, isMobile } = props
+
+  return (
+    <Menu.Item
+      active={activePage === section}
+      onMouseEnter={(e: React.MouseEvent) =>
+        !isMobile && onToggleShowSubMenu(e, true, section)
+      }
+      onMouseLeave={(e: React.MouseEvent) =>
+        !isMobile && onToggleShowSubMenu(e, false, section)
+      }
+      onClick={(e: React.MouseEvent) => {
+        isMobile && onToggleShowSubMenu(e, true, section)
+      }}
+      className={classNames('dui-menu-item', section, isMobile && 'mobile')}
+    >
+      {title}
+      {!isMobile && <ChevronIcon down={true} />}
+      {isMobile && <ArrowIcon />}
+    </Menu.Item>
+  )
+}