WIP navigation

Author: EranNL

src/components/Navigation/Vertical/ListItem.tsx

@@ -1,9 +1,11 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
+import { NavigationContext } from './NavigationContext';
 
 interface NavigationListItemProps extends React.HTMLAttributes<HTMLDivElement> {
     active?: boolean;
+    content?: React.ReactNode;
     icon?: React.ReactElement;
 }
 
@@ -15,25 +17,31 @@ const NavigationListItem = React.forwardRef<HTMLDivElement, NavigationListItemPr
         icon
     },
     ref
-): React.ReactElement => (
-    <div
-        ref={ref}
-        className={clsx(
-            'vertical-navigation-list-item',
-            active && 'active',
-            className
-        )}
-    >
-        {icon && (
-            <div className="vertical-navigation-list-item-icon">
-                {icon}
-            </div>
-        )}
-        <span className="vertical-navigation-list-item-text">
-            {children}
-        </span>
-    </div>
-));
+): React.ReactElement => {
+    return (
+        <NavigationContext.Consumer>
+            {() => (
+                <div
+                    ref={ref}
+                    className={clsx(
+                        'vertical-navigation-list-item',
+                        active && 'active',
+                        className
+                    )}
+                >
+                    {icon && (
+                        <div className="vertical-navigation-list-item-icon">
+                            {icon}
+                        </div>
+                    )}
+                    <span className="vertical-navigation-list-item-text">
+                        {children}
+                    </span>
+                </div>
+            )}
+        </NavigationContext.Consumer>
+    )
+});
 
 NavigationListItem.displayName = 'NavigationListItem';
 NavigationListItem.propTypes = {

src/components/Navigation/Vertical/NavigationContext.ts

@@ -0,0 +1,10 @@
+import { createContext } from 'react';
+export interface NavigationContextProps {
+    tooltipsWhenCollapsed: boolean;
+    collapsed: boolean;
+}
+
+export const NavigationContext = createContext<NavigationContextProps>({
+    tooltipsWhenCollapsed: true,
+    collapsed: false
+});

src/components/Navigation/VerticalNavigation.tsx

@@ -7,8 +7,9 @@ import NavigationTop from '@/components/Navigation/Vertical/Top';
 import NavigationList from '@/components/Navigation/Vertical/List';
 import NavigationListItem from '@/components/Navigation/Vertical/ListItem';
 import NavigationDivider from '@/components/Navigation/Vertical/Divider';
-import { useState } from 'react';
-import { VerticalNavigationScope } from './Vertical/VerticalNavigationScope';
+import { useEffect, useState } from 'react';
+import { VerticalNavigationScope } from '@/components/Navigation/Vertical/VerticalNavigationScope';
+import { NavigationContext } from './Vertical/NavigationContext';
 
 export interface VerticalNavigationStatics {
     Top: typeof NavigationTop;
@@ -17,26 +18,51 @@ export interface VerticalNavigationStatics {
     Divider: typeof NavigationDivider;
 }
 
-export interface SideNavigationProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface VerticalNavigationProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Variant of the menu. With this prop, the color of the menu can be set.
+     */
     variant?: Variant | string;
+    /**
+     * Indicates whether the menu collapse is controllable.
+     */
     collapsable?: boolean;
+    /**
+     * Indicating whether the menu is collapsed. Can be used to make the navigation a controllable component
+     */
+    collapsed?: boolean;
+    /**
+     * Indicates whether a tooltip with the menu text must be shown when menu is collapsed. Default: true
+     */
+    tooltipsWhenCollapsed?: boolean;
+    /**
+     * Children of the menu. This can be either a React ChildNode or callback function to access various actions
+     */
     children: React.ReactNode | ((scope: VerticalNavigationScope) => React.ReactNode);
 }
 
 // @ts-ignore
-const VerticalNavigation: ForwardComponentWithStatics<HTMLDivElement, SideNavigationProps, VerticalNavigationStatics> =
+const VerticalNavigation: ForwardComponentWithStatics<HTMLDivElement, VerticalNavigationProps, VerticalNavigationStatics> =
     React.forwardRef((
         {
             children,
             className,
-            variant
+            variant,
+            collapsed,
+            tooltipsWhenCollapsed = true
         },
         ref
     ): React.ReactElement => {
-        const [collapsed, setCollapsed] = useState<boolean>(false);
+        const [isCollapsed, setCollapsed] = useState<boolean>(false);
+
+        useEffect(() => {
+            if (collapsed) {
+                setCollapsed(collapsed);
+            }
+        }, [collapsed])
 
         const makeScope = (): VerticalNavigationScope => ({
-            collapsed,
+            collapsed: isCollapsed,
             collapse: () => setCollapsed(!collapsed)
         });
 
@@ -45,25 +71,34 @@ const VerticalNavigation: ForwardComponentWithStatics<HTMLDivElement, SideNaviga
             : children;
 
         return (
-            <div
-                ref={ref}
-                className={clsx(
-                    'vertical-navigation-container',
-                    collapsed && 'is-collapsed',
-                    variant && `navigation-${variant}`,
-                    className
-                )}
+            <NavigationContext.Provider
+                value={{
+                    tooltipsWhenCollapsed: tooltipsWhenCollapsed,
+                    collapsed: isCollapsed
+                }}
             >
-                {children}
-            </div>
+                <div
+                    ref={ref}
+                    className={clsx(
+                        'vertical-navigation-container',
+                        isCollapsed && 'is-collapsed',
+                        variant && `navigation-${variant}`,
+                        className
+                    )}
+                >
+                    {children}
+                </div>
+            </NavigationContext.Provider>
         )
     });
 
 VerticalNavigation.displayName = 'VerticalNavigation';
 VerticalNavigation.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
-    variant: PropTypes.string
+    variant: PropTypes.string,
+    collapsed: PropTypes.bool,
+    tooltipsWhenCollapsed: PropTypes.bool
 }
 
 VerticalNavigation.Top = NavigationTop;

src/components/Overlay/OverlayTrigger.tsx

@@ -5,6 +5,7 @@ import Overlay from '@/components/Overlay/index';
 import { Placement, PositioningStrategy } from '@popperjs/core';
 import { Trigger, triggerPropTypes } from '@/components/Overlay/Trigger';
 import { AnimatePresence } from 'framer-motion';
+import { Modifier } from '@popperjs/core/lib/types';
 
 interface OverlayTriggerProps {
     arrow?: boolean;
@@ -15,6 +16,7 @@ interface OverlayTriggerProps {
     className?: string;
     trigger?: Trigger | string;
     motion?: string;
+    config?: Array<Partial<Modifier<any, any>>>;
 }
 
 const OverlayTrigger = ({
@@ -25,7 +27,8 @@ const OverlayTrigger = ({
     placement,
     positionStrategy,
     trigger = 'hover',
-    motion
+    motion,
+    config
 }: OverlayTriggerProps): React.ReactElement => {
     const [shown, setShown] = useState<boolean>(false);
     const triggerRef = useRef<HTMLElement>();
@@ -71,6 +74,7 @@ const OverlayTrigger = ({
             placement={placement}
             positionStrategy={positionStrategy}
             className={className}
+            config={config}
         >
             {overlay}
         </Overlay>

src/components/Overlay/index.tsx

@@ -20,6 +20,7 @@ interface OverlayProps {
     arrow?: boolean;
     positionStrategy?: PositioningStrategy;
     motion?: string;
+    config?: Array<Partial<Modifier<any, any>>>;
 }
 
 const Overlay = ({
@@ -29,7 +30,8 @@ const Overlay = ({
     placement = 'top',
     arrow = true,
     positionStrategy = 'absolute',
-    motion: triggerMotion
+    motion: triggerMotion,
+    config
 }: React.PropsWithChildren<OverlayProps>): React.ReactElement => {
     const ref = useRef<HTMLDivElement | null>(null);
     const popper = useRef<PopperInstance>();
@@ -40,7 +42,8 @@ const Overlay = ({
             options: {
                 element: '.arrow'
             }
-        }] : [])
+        }] : []),
+        ...(config || [])
     ]);
 
     const createPopperOptions = (): PopperOptions => ({

src/style/components/_navigation.scss

@@ -75,14 +75,6 @@
             .vertical-navigation-list-item-text {
                 display: none;
             }
-
-            &:hover {
-                white-space: nowrap;
-
-                .vertical-navigation-list-item-text {
-                    display: block;
-                }
-            }
         }
     }
 }
@@ -98,3 +90,8 @@
         background: var(--primary-color-light-background);
     }
 }
+
+.vertical-navigation-tooltip {
+    margin-left: 0.5rem;
+    background: #000;
+}

www/src/index.tsx

@@ -3,7 +3,8 @@ import { useState } from 'react';
 import * as ReactDom from 'react-dom';
 import '../../src/style/index.scss';
 import { Button, Card, Col, Grid, Icon, Page, Row, SelectField, Tag, TextField, Variant } from '../../src';
-import logo from '@/images/coderan/logo.svg';
+import logoFull from '@/images/coderan/logo.svg';
+import logoLetter from '@/images/coderan/logo-letter.svg';
 import Container from '../../src/components/Container/Container';
 import FormGroup from '../../src/components/Form/Group';
 import FormLabel from '../../src/components/Form/Label';
@@ -36,21 +37,27 @@ const TestControllable = () => {
 ReactDom.render(
     <Page>
         <Page.Left fixed>
-            <VerticalNavigation collapsable>
-                {({ collapse }) => (
+            <VerticalNavigation collapsed>
+                {({ collapse, collapsed }) => (
                     <>
                         <VerticalNavigation.Top className="justify-content-center mb-4">
-                            <button onClick={collapse}></button>
-                            <img src={logo} width={160} className="mb-8" />
+                            {collapsed ? (
+                                <img src={logoLetter} height={36} />
+                            ) : (
+                                <img src={logoFull} height={36} />
+                            )}
                         </VerticalNavigation.Top>
                         <VerticalNavigation.Divider />
                         <VerticalNavigation.List>
-                            <VerticalNavigation.Item active icon={<Icon icon="home" />}>
-                                Home
-                            </VerticalNavigation.Item>
-                            <VerticalNavigation.Item icon={<Icon icon="user" />}>
-                                User
-                            </VerticalNavigation.Item>
+                            <VerticalNavigation.Item
+                                active
+                                icon={<Icon icon="home" />}
+                                content="Home"
+                            />
+                            <VerticalNavigation.Item
+                                icon={<Icon icon="user" />}
+                                content="Tooltips"
+                            />
                         </VerticalNavigation.List>
                     </>
                 )}