Merge pull request #1440 from cozy/nav-secondary-items

feat: Secondary nav items
cozy · Apr 22, 2020 · dad6792 · dad6792
2 parents 33415af + 799920d
commit dad6792
Show file tree

Hide file tree

Showing 5 changed files with 113 additions and 17 deletions.
diff --git a/react/Layout/Layout.jsx b/react/Layout/Layout.jsx
@@ -17,9 +17,7 @@ export const Layout = ({ children, className, monoColumn, ...rest }) => {
   )
 }
 
-export const Main = ({ children, ...rest }) => {
-  return <main {...rest}>{children}</main>
-}
+export const Main = ({ children, ...rest }) => <main {...rest}>{children}</main>
 
 export class Content extends Component {
   render() {

diff --git a/react/Layout/Layout.md b/react/Layout/Layout.md
@@ -2,51 +2,90 @@ The Layout component brings a strong context for apps with any screen resolution
 
 * `<Main />` is considered the wrapper of your app content. `<Content />` should be a direct children of it but you can add other components as well, like a toolbar and such.
 * `<Content />` is the main content or your app.
+* ⚠️ Secondary `<NavItem />` are not visible on mobile and tablets
 
 ```jsx
+import { useState } from 'react'
 import { Layout, Main, Content } from 'cozy-ui/transpiled/react/Layout';
 import Sidebar from 'cozy-ui/transpiled/react/Sidebar';
 import Nav, { NavItem, NavIcon, NavText, genNavLink } from 'cozy-ui/transpiled/react/Nav';
+import cx from 'classnames'
+import isEqual from 'lodash/isEqual'
 
-const NavLink = genNavLink(({ children, className }) =>
-  <a className={className}>{ children }</a>)
+/**
+ * In a normal app, ExampleRouterNavLink is from react-router
+ * 
+ * import { NavLink } from 'react-router'
+ * const NavLink = genNavLink(NavLink)
+ */
+const ExampleRouterNavLink = ({ children, className, active, activeClassName, onClick }) => (
+  <a onClick={onClick} className={cx(className, active ? activeClassName : null)}>
+    { children }
+  </a>
+)
 
+const NavLink = genNavLink(ExampleRouterNavLink)
+
+// Not necessary in a normal app
 const styles = {
   layout: {
     position: 'relative',
     transform: 'translateZ(0)'
   }
 };
 
-<Layout style={styles.layout}>
+const Example = () => {
+  const [active, setActive] = useState(['Section 1', 'Subsection 1'])
+
+  // makeProps is not necessary in a normal app since react-router sets active
+  // and onClick by itself
+  const makeProps = route => {
+    const routeIsMatching = isEqual(active.slice(0, route.length), route)
+    return { onClick: () => setActive(route), active: routeIsMatching }
+  }
+  return <Layout style={styles.layout}>
     <Sidebar>
       <Nav>
         <NavItem>
-          <NavLink>
+          <NavLink {...makeProps(['Section 1'])}>
             <NavIcon icon='warn' />
-            <NavText>Warn</NavText>
+            <NavText>Section 1</NavText>
+          </NavLink>
+        </NavItem>
+        <NavItem secondary>
+          <NavLink {...makeProps(['Section 1', 'Subsection 1'])}>
+            <NavText>Subsection 1</NavText>
+          </NavLink>
+        </NavItem>
+        <NavItem secondary>
+          <NavLink {...makeProps(['Section 1', 'Subsection 2'])}>
+            <NavText>Subsection 2</NavText>
           </NavLink>
         </NavItem>
         <NavItem>
-          <NavLink>
+          <NavLink {...makeProps(['Section 2'])}>
             <NavIcon icon='check' />
-            <NavText>Check</NavText>
+            <NavText>Section 2</NavText>
           </NavLink>
         </NavItem>
         <NavItem>
-          <NavLink>
+          <NavLink {...makeProps(['Section 3'])}>
             <NavIcon icon='download' />
-            <NavText>Download</NavText>
+            <NavText>Section 3</NavText>
           </NavLink>
         </NavItem>
       </Nav>
     </Sidebar>
     <Main>
       <Content className='u-p-1'>
+        <h2 className='u-mt-0'>{ active.join(' / ') }</h2>
         { content.ada.short }
       </Content>
     </Main>
-</Layout>
+  </Layout>
+}
+
+<Example />
 ```
 
 `monoColumn` option (without sidebar)

diff --git a/react/Nav/index.jsx b/react/Nav/index.jsx
@@ -3,8 +3,14 @@ import Icon from '../Icon'
 import styles from './styles.styl'
 import cx from 'classnames'
 
-export const NavItem = ({ children, ...restProps }) => (
-  <li className={styles['c-nav-item']} {...restProps}>
+export const NavItem = ({ children, secondary, ...restProps }) => (
+  <li
+    className={cx(
+      styles['c-nav-item'],
+      secondary ? styles['c-nav-item-secondary'] : null
+    )}
+    {...restProps}
+  >
     {children}
   </li>
 )
@@ -18,11 +24,12 @@ export const NavLink = {
   activeClassName: styles['is-active']
 }
 
-export const genNavLink = RRNavLink => ({ to, children }) => (
+export const genNavLink = RRNavLink => ({ to, children, ...rest }) => (
   <RRNavLink
     to={to}
     className={NavLink.className}
     activeClassName={NavLink.activeClassName}
+    {...rest}
   >
     {children}
   </RRNavLink>

diff --git a/react/Nav/styles.styl b/react/Nav/styles.styl
@@ -17,3 +17,9 @@
 
 .c-nav-text
     @extend $nav-item-text
+
+.c-nav-item-secondary
+    @extend $nav-item-secondary
+
+    .c-nav-link
+        @extend $nav-link-secondary
diff --git a/stylus/components/nav.styl b/stylus/components/nav.styl
@@ -1,5 +1,6 @@
 @require '../settings/breakpoints'
 @require '../settings/z-index'
+@require '../settings/typography'
 @require '../tools/mixins'
 
 /*------------------------------------*\
@@ -22,6 +23,8 @@ $nav-item
     position        relative
     z-index         $app-index
     height          rem(48)
+    box-sizing      border-box
+    cursor          pointer
 
     &:hover::before
         content        ''
@@ -32,7 +35,7 @@ $nav-item
         left 0
         right rem(16)
         bottom 0
-        background     var(--silver)
+        background     rgba(0, 0, 0, .10)
 
         // Prevent double tap on tablets
         @media (hover: none)
@@ -79,6 +82,7 @@ $nav-item-text
 
 $nav-link
     display              flex
+    box-shadow           border-box
     padding-left         rem(24)
     padding-right        rem(16)
     line-height          1.5
@@ -126,3 +130,45 @@ $nav-link
     @media not all and (pointer: fine)
         &:hover
             color var(--slateGrey)
+
+
+$nav-item-secondary
+    height auto
+    margin-top .125rem
+
+    +medium-screen()
+        &
+            display none
+
+
+    &:hover::before
+        content        ''
+        position       absolute
+        z-index        $below-index
+        border-radius  rem(3 0 0 3)
+        top 0
+        right 0
+        left rem(48)
+        bottom 0
+        background     rgba(0, 0, 0, .10)
+
+        // Prevent double tap on tablets
+        @media (hover: none)
+            content none
+
+$nav-link-secondary
+    padding .5rem 1rem
+    margin-left 3rem
+    border-radius 4px 0 0 4px
+    box-shadow none
+    font-size $small-font-size
+    color var(--charcoalGrey)
+    text-decoration none
+    height auto
+
+    &.is-active
+        color white
+        border-right 1px solid var(--slateGrey)
+        background-color var(--slateGrey)
+
+