@dvrd/dvr-controls 1.0.40 → 1.0.41

package/index.ts

@@ -56,6 +56,7 @@ import DvrdSwitch from './src/js/switch/dvrdSwitch';
 import DvrdHeaderController from './src/js/header/v2/dvrdHeaderController';
 import FileUpload from './src/js/fileUpload/fileUpload';
 import DvrdRadioController from './src/js/radio/dvrdRadioController';
+import MobileNavigation from "./src/js/navigation/mobileNavigation";
 
 export {
     // Components
@@ -104,6 +105,7 @@ export {
     DvrdHeaderController as DvrdHeader,
     FileUpload,
     DvrdRadioController as DvrdRadio,
+    MobileNavigation,
 
     // Interfaces / Enums
     DialogActionShape,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dvrd/dvr-controls",
-  "version": "1.0.40",
+  "version": "1.0.41",
   "description": "Custom web controls",
   "main": "index.ts",
   "files": [
@@ -13,13 +13,21 @@
   "author": "Dave van Rijn",
   "license": "ISC",
   "browserslist": {
-    "0": ">0.2%",
-    "1": "not dead",
-    "2": "ie >= 11"
+    "production": [
+      ">0.2%",
+      "not dead",
+      "ie >= 11"
+    ],
+    "development": [
+      ">0.2%",
+      "not dead",
+      "ie >= 11"
+    ]
   },
   "peerDependencies": {
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "react-router-dom": "6.15.0"
   },
   "devDependencies": {
     "@types/dompurify": "2.4.0",
@@ -45,7 +53,6 @@
     "moment": "2.29.4",
     "react-color": "2.19.3",
     "react-rnd": "10.4.1",
-    "react-router-dom": "6.15.0",
     "uuid": "9.0.0"
   }
 }

package/src/js/date/dvrdDatePicker.tsx

@@ -5,12 +5,13 @@ import './style/dvrdDatePicker.scss';
 
 import classNames from 'classnames';
 import {Moment} from 'moment';
-import React, {PureComponent, useState} from 'react';
+import React, {PureComponent, useMemo, useState} from 'react';
 import {ChangeFunction, ErrorType} from '../util/interfaces';
 import AwesomeIcon from '../icon/awesomeIcon';
 import {toMoment} from '../util/momentUtil';
 import WithBackground from '../popup/withBackground';
 import DvrdButton from "../button/dvrdButton";
+import {generateComponentId} from "../util/componentUtil";
 
 interface Props {
     onChange: ChangeFunction<Moment>;
@@ -23,13 +24,26 @@ interface Props {
     dateFormat?: string;
     disabled?: boolean;
     alwaysShowArrows?: boolean;
+    useMobileNative?: boolean;
+    id?: string;
 }
 
 export default function DvrdDatePicker(props: Props) {
     const {
-            onChange, className, closeOnChange, error, label, value, dateFormat, placeholder, disabled, alwaysShowArrows
-        } = props,
-        [pickerOpen, setPickerOpen] = useState(false);
+        onChange, className, closeOnChange, error, label, value, placeholder, disabled, alwaysShowArrows,
+        useMobileNative
+    } = props;
+    const [pickerOpen, setPickerOpen] = useState(false);
+    const dateFormat = useMemo(() => {
+        return props.dateFormat ?? 'YYYY-MM-DD';
+    }, [props.dateFormat]);
+    const id = useMemo(() => {
+        return generateComponentId(props.id);
+    }, [props.id]);
+
+    function onChangeNative(evt: React.ChangeEvent<HTMLInputElement>) {
+        onChange(toMoment(evt.target.value), evt);
+    }
 
     function onClickContainer() {
         if (!disabled)
@@ -45,14 +59,24 @@ export default function DvrdDatePicker(props: Props) {
         setPickerOpen(false)
     }
 
-    const format = dateFormat ?? 'YYYY-MM-DD';
+    function renderMobilePicker() {
+        if (!useMobileNative) return null;
+        return (
+            <div className='native-picker-container'>
+                <input type='date' onChange={onChangeNative} value={value?.format('YYYY-MM-DD') ?? ''}
+                       placeholder={placeholder} className='native-date-field' id={`${id}-native`}/>
+                <AwesomeIcon name='calendar-alt' className='calendar-icon' htmlFor={`${id}-native`}/>
+            </div>
+        )
+    }
 
     return (
         <div className={classNames('dvrd-date-picker', className, error && 'error', disabled && 'disabled')}>
             <label className='field-label'>{label}</label>
-            <div className='value-container' onClick={onClickContainer}>
-                <label className={classNames('value', !value && 'placeholder')}>{value?.format(format) ?? placeholder ??
-                    ''}</label>
+            {renderMobilePicker()}
+            <div className={classNames('value-container', useMobileNative && 'no-mob')} onClick={onClickContainer}>
+                <label className={classNames('value', !value && 'placeholder')}>{value?.format(dateFormat) ??
+                    placeholder ?? ''}</label>
                 <AwesomeIcon name='calendar-alt' className='calendar-icon'/>
             </div>
             <Picker onClose={onClosePicker} onChange={onChangePicker} open={pickerOpen} value={value}
@@ -250,7 +274,7 @@ class Picker extends PureComponent<PickerProps> {
         if (open && !prevOpen) {
             document.addEventListener('keydown', this.keyListener);
             this.addMountClass();
-            window.setTimeout(this.removeMountClass, 500);
+            window.setTimeout(this.removeMountClass, 1000);
         } else if (!open && prevOpen) document.removeEventListener('keydown', this.keyListener);
     };
 

package/src/js/date/style/dvrdDatePicker.scss

@@ -41,6 +41,12 @@
       top: 50%;
       transform: translateY(-50%);
     }
+
+    &.no-mob {
+      @include break-xs {
+        display: none;
+      }
+    }
   }
 
   .picker {

package/src/js/label/label.tsx

@@ -2,12 +2,13 @@
  * Copyright (c) 2021. Dave van Rijn Development
  */
 
-import React from 'react';
+import React, {useContext, useEffect, useMemo, useRef, useState} from 'react';
 import classNames from 'classnames';
 
 import {ControlContext} from "../util/controlContext";
 import {convertColor} from "../util/colorUtil";
 import {calculateTextWidth, getComputedProperty, remToPx} from "../util/controlUtil";
+import { defer } from 'lodash';
 
 export enum LabelType {
     LABEL, SPAN, PAR,
@@ -17,137 +18,112 @@ export enum BreakType {
     CHAR, WORD
 }
 
+type LabelProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement> &
+    React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement> &
+    React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
+
 interface Props {
-    labelType: LabelType,
-    className: string,
-    text: string,
-    color?: string,
-    maxLines: number,
-    width?: string | number,
-    labelProps: object,
-    breakMode: BreakType,
+    text: string;
+    labelType?: LabelType;
+    className?: string;
+    color?: string;
+    maxLines?: number;
+    width?: string | number;
+    labelProps?: LabelProps;
+    breakMode?: BreakType;
+}
+
+function getCurrentFontSize(element: HTMLLabelElement & HTMLSpanElement & HTMLParagraphElement): number {
+    let fontSize: number | string = getComputedProperty('font-size', element);
+    fontSize = parseInt(fontSize.slice(0, fontSize.length - 2), 10);
+    return fontSize;
 }
 
-interface State {
-    text: string,
+/**
+ * Break a line by removing characters from the end until a whitespace or dash is found. Removed characters are
+ * returned as remainingChars.
+ * @param validLine Text to break
+ * @return Object containing the remainder of the the line and the removed characters.
+ */
+function breakLine(validLine: string): { validLine: string, remainingChars: string } {
+    let remainingChars = '';
+    if (/[ -]$/.test(validLine)) {
+        validLine = validLine.slice(0, -1);
+        remainingChars = ' ';
+    }
+
+    while (!/[ -]$/.test(validLine) && validLine.length) {
+        remainingChars = validLine.slice(-1) + remainingChars;
+        validLine = validLine.slice(0, -1);
+    }
+    return {validLine, remainingChars};
 }
 
 /**
  * Label component which breaks its contents automatically. If maxLines is specified, the label will only break the
  * text until the number of lines is reached. Remaining text will be shown in the title.
  */
-export default class Label extends React.Component<Props, State> {
-    declare context: React.ContextType<typeof ControlContext>;
-    static contextType = ControlContext;
-
-    static defaultProps = {
-        labelType: LabelType.LABEL,
-        className: '',
-        labelProps: {},
-        breakMode: BreakType.CHAR,
-        maxLines: 0,
-    };
-
-    label: HTMLElement | null = null;
-
-    state = {
-        text: '',
-    };
-
-    getColor = (): string => {
-        const {contrastColor} = this.context, {color} = this.props, finalColor: string = color ? color : contrastColor;
-        return convertColor(finalColor);
-    };
-
-    getWidth = (): string => {
-        const {width} = this.props;
-        let finalWidth: string = 'initial';
-        if (width !== undefined && width !== null) {
-            if (typeof width === 'string') finalWidth = width;
-            else finalWidth = width + 'px';
+export default function Label(props: Props) {
+    const context = useContext(ControlContext);
+    const [text, setText] = useState(props.text);
+    const labelRef = useRef<HTMLLabelElement & HTMLParagraphElement & HTMLSpanElement>(null);
+    const labelType = props.labelType ?? LabelType.LABEL;
+    const breakMode = props.breakMode ?? BreakType.CHAR;
+    const maxLines = props.maxLines ?? 0;
+    const color = useMemo(() => {
+        return convertColor(props.color ?? context.contrastColor);
+    }, [props.color, context.contrastColor]);
+    const width = useMemo(() => {
+        let width = 'initial';
+        if (props.width) {
+            if (typeof props.width === 'string') width = props.width;
+            else width = `${width}px`;
         }
-        return finalWidth;
-    };
-
-    getLabelProps = () => {
-        const {className, labelProps, text} = this.props;
+        return width;
+    }, [props.width]);
+    const labelProps: LabelProps = useMemo(() => {
         return {
-            className: classNames('dvr-label', className),
+            className: classNames('dvr-label', props.className),
             style: {
-                color: this.getColor(),
-                width: this.getWidth(),
+                color,
+                width,
                 display: 'inline-block',
             },
             title: text,
-            ref: (ref: HTMLElement | null) => {
-                this.label = ref
-            },
-            ...labelProps,
+            ref: labelRef,
+            ...(props.labelProps ?? {}),
         };
-    };
-
-    getFontSize = (): number | undefined => {
-        if (this.label) {
-            let fontSize: number | string = getComputedProperty('font-size', this.label);
-            fontSize = parseInt(fontSize.slice(0, fontSize.length - 2), 10);
-            return fontSize;
-        }
-        return undefined;
-    };
+    }, [props.className, color, width, props.labelProps]);
 
     /**
      * Truncate given text to given maxWidth. Truncating is done by removing characters from the end until the text + ...
-     * width is less then the given maxWidth. Trailing white spaces are removed and ... are appended.
-     * @param text Text to truncate
-     * @param maxWidth Max width in px
+     * width is less than the given maxWidth. Trailing white spaces are removed and ... are appended.
      */
-    reduceText = (text: string, maxWidth: number): string => {
+    function truncateText(text: string, maxWidth: number): string {
         let fontSize, fontFamily;
-        if (this.label) {
-            fontSize = this.getFontSize();
-            fontFamily = getComputedProperty('font-family', this.label);
+        if (labelRef.current) {
+            fontSize = getCurrentFontSize(labelRef.current);
+            fontFamily = getComputedProperty('font-family', labelRef.current);
         }
         while (calculateTextWidth(text + '...', fontSize, fontFamily) >= maxWidth)
             text = text.slice(0, -1);
-        return text.trimRight() + '...';
-    };
-
-    /**
-     * Break a line by removing characters from the end until a whitespace or dash is found. Removed characters are
-     * returned as remainingChars.
-     * @param validLine Text to break
-     * @return Object containing the remainder of the the line and the removed characters.
-     */
-    breakLine = (validLine: string): { validLine: string, remainingChars: string } => {
-        let remainingChars = '';
-        if (/[ -]$/.test(validLine)) {
-            validLine = validLine.slice(0, -1);
-            remainingChars = ' ';
-        }
-
-        while (!/[ -]$/.test(validLine) && validLine.length) {
-            remainingChars = validLine.slice(-1) + remainingChars;
-            validLine = validLine.slice(0, -1);
-        }
-        return {validLine, remainingChars};
-    };
+        return text.trimEnd() + '...';
+    }
 
     /**
      * Process the given text. This function divides the text into lines, by breaking the text according to the break
      * mode given in the props. The width of the text is calculating by using a non-mounted canvas. The font family and
      * font size are calculated from the computed properties of the rendered label.
      */
-    renderText = () => {
-        const {text, maxLines, breakMode} = this.props, chars = text.split(''), width = this.getWidth();
-        if (width === 'initial') return text;
+    function renderText() {
+        const text = props.text;
+        if (width === 'initial' || !labelRef.current) return text;
 
-        const pxWidth: number = width.endsWith('px') ? Number(width.slice(0, -2)) : remToPx(Number(width.slice(0, -3))),
-            lines: string[] = new Array<string>();
-        let fontSize, fontFamily;
-        if (this.label) {
-            fontSize = this.getFontSize();
-            fontFamily = getComputedProperty('font-family', this.label);
-        }
+        const chars = text.split('');
+        const pxWidth: number = width.endsWith('px') ? Number(width.slice(0, -2)) : remToPx(Number(width.slice(0, -3)));
+        const lines: Array<string> = [];
+        const fontSize = getCurrentFontSize(labelRef.current);
+        const fontFamily = getComputedProperty('font-family', labelRef.current);
 
         let line = '';
         for (let i = 0; i < chars.length; i++) {
@@ -157,7 +133,7 @@ export default class Label extends React.Component<Props, State> {
             else {
                 let processedLine = line;
                 if (breakMode === BreakType.WORD) {
-                    const {validLine, remainingChars} = this.breakLine(line);
+                    const {validLine, remainingChars} = breakLine(line);
                     processedLine = validLine;
                     line = remainingChars;
                 } else line = '';
@@ -165,8 +141,8 @@ export default class Label extends React.Component<Props, State> {
                 lines.push(processedLine);
                 if (maxLines > 0 && lines.length === maxLines) {
                     if (i < chars.length)
-                    // Truncate last line if chars remaining
-                        lines[lines.length - 1] = this.reduceText(lines[lines.length - 1], pxWidth);
+                        // Truncate last line if chars remaining
+                        lines[lines.length - 1] = truncateText(lines[lines.length - 1], pxWidth);
                     line = '';
                     break;
                 }
@@ -174,23 +150,178 @@ export default class Label extends React.Component<Props, State> {
             }
         }
         if (line.length) lines.push(line);
-        this.setState({text: lines.join('\n')});
-    };
-
-    componentDidMount = () => {
-        // Make sure the label has mounted before calculating the text
-        window.setTimeout(this.renderText, 0);
-    };
-
-    render = () => {
-        const {labelType} = this.props, {text} = this.state, labelProps = this.getLabelProps();
-        switch (labelType) {
-            case LabelType.LABEL:
-                return <label {...labelProps}>{text}</label>;
-            case LabelType.PAR:
-                return <p {...labelProps}>{text}</p>;
-            case LabelType.SPAN:
-                return <span {...labelProps}>{text}</span>;
-        }
-    };
-}
+        setText(lines.join('\n'));
+    }
+
+    useEffect(() => {
+        defer(renderText);
+    }, []);
+
+    switch (labelType) {
+        case LabelType.LABEL:
+            return <label {...labelProps}>{text}</label>;
+        case LabelType.PAR:
+            return <p {...labelProps}>{text}</p>;
+        case LabelType.SPAN:
+            return <span {...labelProps}>{text}</span>;
+    }
+}
+
+// class _Label extends React.Component<Props, State> {
+//     declare context: React.ContextType<typeof ControlContext>;
+//     static contextType = ControlContext;
+//
+//     static defaultProps = {
+//         labelType: LabelType.LABEL,
+//         className: '',
+//         labelProps: {},
+//         breakMode: BreakType.CHAR,
+//         maxLines: 0,
+//     };
+//
+//     label: HTMLElement | null = null;
+//
+//     state = {
+//         text: '',
+//     };
+//
+//     getColor = (): string => {
+//         const {contrastColor} = this.context, {color} = this.props, finalColor: string = color ? color : contrastColor;
+//         return convertColor(finalColor);
+//     };
+//
+//     getWidth = (): string => {
+//         const {width} = this.props;
+//         let finalWidth: string = 'initial';
+//         if (width !== undefined && width !== null) {
+//             if (typeof width === 'string') finalWidth = width;
+//             else finalWidth = width + 'px';
+//         }
+//         return finalWidth;
+//     };
+//
+//     getLabelProps = (): LabelProps => {
+//         const {className, labelProps, text} = this.props;
+//         return {
+//             className: classNames('dvr-label', className),
+//             style: {
+//                 color: this.getColor(),
+//                 width: this.getWidth(),
+//                 display: 'inline-block',
+//             },
+//             title: text,
+//             ref: (ref: HTMLElement | null) => {
+//                 this.label = ref
+//             },
+//             ...labelProps,
+//         };
+//     };
+//
+//     getFontSize = (): number | undefined => {
+//         if (this.label) {
+//             let fontSize: number | string = getComputedProperty('font-size', this.label);
+//             fontSize = parseInt(fontSize.slice(0, fontSize.length - 2), 10);
+//             return fontSize;
+//         }
+//         return undefined;
+//     };
+//
+//     /**
+//      * Truncate given text to given maxWidth. Truncating is done by removing characters from the end until the text + ...
+//      * width is less then the given maxWidth. Trailing white spaces are removed and ... are appended.
+//      * @param text Text to truncate
+//      * @param maxWidth Max width in px
+//      */
+//     reduceText = (text: string, maxWidth: number): string => {
+//         let fontSize, fontFamily;
+//         if (this.label) {
+//             fontSize = this.getFontSize();
+//             fontFamily = getComputedProperty('font-family', this.label);
+//         }
+//         while (calculateTextWidth(text + '...', fontSize, fontFamily) >= maxWidth)
+//             text = text.slice(0, -1);
+//         return text.trimEnd() + '...';
+//     };
+//
+//     /**
+//      * Break a line by removing characters from the end until a whitespace or dash is found. Removed characters are
+//      * returned as remainingChars.
+//      * @param validLine Text to break
+//      * @return Object containing the remainder of the the line and the removed characters.
+//      */
+//     breakLine = (validLine: string): { validLine: string, remainingChars: string } => {
+//         let remainingChars = '';
+//         if (/[ -]$/.test(validLine)) {
+//             validLine = validLine.slice(0, -1);
+//             remainingChars = ' ';
+//         }
+//
+//         while (!/[ -]$/.test(validLine) && validLine.length) {
+//             remainingChars = validLine.slice(-1) + remainingChars;
+//             validLine = validLine.slice(0, -1);
+//         }
+//         return {validLine, remainingChars};
+//     };
+//
+//     /**
+//      * Process the given text. This function divides the text into lines, by breaking the text according to the break
+//      * mode given in the props. The width of the text is calculating by using a non-mounted canvas. The font family and
+//      * font size are calculated from the computed properties of the rendered label.
+//      */
+//     renderText = () => {
+//         const {text, maxLines, breakMode} = this.props, chars = text.split(''), width = this.getWidth();
+//         if (width === 'initial') return text;
+//
+//         const pxWidth: number = width.endsWith('px') ? Number(width.slice(0, -2)) : remToPx(Number(width.slice(0, -3))),
+//             lines: string[] = new Array<string>();
+//         let fontSize, fontFamily;
+//         if (this.label) {
+//             fontSize = this.getFontSize();
+//             fontFamily = getComputedProperty('font-family', this.label);
+//         }
+//
+//         let line = '';
+//         for (let i = 0; i < chars.length; i++) {
+//             const char = chars[i];
+//             if (calculateTextWidth(line + char, fontSize, fontFamily) < pxWidth)
+//                 line += char;
+//             else {
+//                 let processedLine = line;
+//                 if (breakMode === BreakType.WORD) {
+//                     const {validLine, remainingChars} = this.breakLine(line);
+//                     processedLine = validLine;
+//                     line = remainingChars;
+//                 } else line = '';
+//
+//                 lines.push(processedLine);
+//                 if (maxLines > 0 && lines.length === maxLines) {
+//                     if (i < chars.length)
+//                         // Truncate last line if chars remaining
+//                         lines[lines.length - 1] = this.reduceText(lines[lines.length - 1], pxWidth);
+//                     line = '';
+//                     break;
+//                 }
+//                 line += char;
+//             }
+//         }
+//         if (line.length) lines.push(line);
+//         this.setState({text: lines.join('\n')});
+//     };
+//
+//     componentDidMount = () => {
+//         // Make sure the label has mounted before calculating the text
+//         window.setTimeout(this.renderText, 0);
+//     };
+//
+//     render = () => {
+//         const {labelType} = this.props, {text} = this.state, labelProps = this.getLabelProps();
+//         switch (labelType) {
+//             case LabelType.LABEL:
+//                 return <label {...labelProps}>{text}</label>;
+//             case LabelType.PAR:
+//                 return <p {...labelProps}>{text}</p>;
+//             case LabelType.SPAN:
+//                 return <span {...labelProps}>{text}</span>;
+//         }
+//     };
+// }

package/src/js/navigation/mobileNavigation.tsx

@@ -0,0 +1,150 @@
+import './style/mobileNavigation.scss';
+
+import classNames from 'classnames';
+import React, {
+    ForwardedRef,
+    forwardRef,
+    MouseEventHandler,
+    ReactElement, useEffect,
+    useImperativeHandle,
+    useMemo, useRef,
+    useState
+} from 'react';
+import {useMatch, useNavigate} from 'react-router';
+import {NavigationItem} from "../util/interfaces";
+import {AwesomeIcon, hasHover} from "../../../index";
+import {defer} from 'lodash';
+
+interface Props {
+    onClickItem?: (item: NavigationItem) => MouseEventHandler;
+    navigationItems: Array<NavigationItem>;
+    className?: string;
+    menuIcon?: ReactElement;
+    id?: string;
+    keepOpen?: true;
+}
+
+export interface MobileNavigationRef {
+    toggle: (forceState?: boolean) => void;
+}
+
+function MobileNavigation(props: Props, ref: ForwardedRef<MobileNavigationRef>) {
+    const {navigationItems, onClickItem, className, menuIcon, id, keepOpen} = props;
+    const [open, setOpen] = useState(false);
+    const [topItems, bottomItems] = useMemo(() => {
+        const topItems: Array<NavigationItem> = [];
+        const bottomItems: Array<NavigationItem> = [];
+        for (const item of navigationItems) {
+            if (item.placement === 'bottom') bottomItems.push(item);
+            // Default placement top
+            else topItems.push(item);
+        }
+        return [topItems, bottomItems];
+    }, [navigationItems]);
+    const navigate = useNavigate();
+    const menuRef = useRef<HTMLDivElement>(null);
+
+    function toggle(forceState?: boolean) {
+        if (forceState !== undefined) setOpen(forceState);
+        else setOpen(!open);
+    }
+
+    function onClickIcon() {
+        toggle();
+    }
+
+    function _onClick(item: NavigationItem) {
+        return function (evt: React.MouseEvent) {
+            if (!item.passPropagation) evt.stopPropagation();
+            if (!keepOpen) toggle(false);
+            if (onClickItem) return onClickItem(item)(evt);
+            else if (item.onClick) item.onClick(evt);
+            else if (item.route) _navigate(item.route);
+            else throw new Error(`Mobile navigation item ${item.id} has no click handler.`)
+        }
+    }
+
+    function _navigate(route: string) {
+        if (route.startsWith('http'))
+            window.open(route, '_blank');
+        else navigate(route);
+    }
+
+    function renderNavigationItem(item: NavigationItem) {
+        return (
+            <MobileNavigationItem key={item.id} item={item} onClick={_onClick}/>
+        );
+    }
+
+    function renderIcon() {
+        let icon: React.ReactElement;
+        if (!!menuIcon) {
+            const className = classNames(menuIcon.props.className, 'mobile-navigation-icon');
+            icon = React.cloneElement(menuIcon, {...menuIcon.props, className});
+        } else icon = <AwesomeIcon name='bars' className='mobile-navigation-icon'/>;
+        return (
+            <div className='mobile-navigation-icon-container' onClick={onClickIcon}>
+                {icon}
+            </div>
+        )
+    }
+
+    function renderMenu() {
+        return (
+            <>
+                {open && <div className='click-catcher'/>}
+                <div className='mobile-navigation-container' ref={menuRef}>
+                    <AwesomeIcon name='times' className='mobile-navigation-close' onClick={onClickIcon}/>
+                    <div className='mobile-navigation-items'>
+                        {topItems.map(renderNavigationItem)}
+                    </div>
+                    <div className='mobile-navigation-items'>
+                        {bottomItems.map(renderNavigationItem)}
+                    </div>
+                </div>
+            </>
+        )
+    }
+
+    function outsideClickListener() {
+        const menu = menuRef.current;
+        if (!hasHover(menu)) toggle(false);
+    }
+
+    useEffect(() => {
+        defer(() => {
+            if (open) document.addEventListener('click', outsideClickListener);
+            else document.removeEventListener('click', outsideClickListener);
+        });
+        return function () {
+            document.removeEventListener('click', outsideClickListener);
+        }
+    }, [open]);
+
+    useImperativeHandle(ref, () => ({toggle}));
+
+    return (
+        <div className={classNames('dvrd-mobile-navigation', open && 'open', className)} id={id}>
+            {renderIcon()}
+            {renderMenu()}
+        </div>
+    )
+}
+
+interface ItemProps {
+    item: NavigationItem;
+    onClick: (item: NavigationItem) => MouseEventHandler;
+}
+
+function MobileNavigationItem(props: ItemProps) {
+    const {item, onClick} = props;
+    const isActive = item.route && Boolean(useMatch(item.route));
+    return (
+        <div key={item.id} className={classNames('mobile-navigation-item', isActive && 'active', item.className)}
+             id={item.id} onClick={onClick(item)}>
+            {item.content}
+        </div>
+    )
+}
+
+export default forwardRef<MobileNavigationRef, Props>(MobileNavigation);

package/src/js/navigation/style/mobileNavigation.scss

@@ -0,0 +1,88 @@
+@import '../../../style/variables';
+
+.dvrd-mobile-navigation {
+  @media(min-width: 750px) {
+    display: none;
+  }
+
+  color: $color-blue-text;
+  position: fixed;
+  z-index: 2000;
+
+  .mobile-navigation-icon-container {
+    visibility: visible;
+    opacity: 1;
+    position: fixed;
+    top: 1rem;
+    left: 1rem;
+    padding: .5rem; // For better UX, makes the touch surface bigger
+
+    .mobile-navigation-icon {
+      @include backgroundShadow2;
+      font-size: 2rem;
+      padding: .25rem;
+      background-color: white;
+      border-radius: .5rem;
+    }
+  }
+
+  .click-catcher {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100dvw;
+    height: 100dvh;
+  }
+
+  .mobile-navigation-container {
+    @include backgroundShadow3($borderRadius: 0);
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100dvh;
+    max-width: 100dvw;
+    overflow-y: auto;
+    background-color: white;
+    transform: translateX(-100%);
+    transition: transform .2s ease-in-out;
+    display: grid;
+    grid-template-rows: fit-content(100%) 1fr fit-content(100%);
+
+    .mobile-navigation-close {
+      position: sticky;
+      top: 1rem;
+      left: 1rem;
+      font-size: 2rem;
+      padding: .5rem;
+      z-index: 1;
+      margin-bottom: 1rem;
+    }
+
+    .mobile-navigation-items {
+      display: grid;
+      align-content: start;
+
+      .mobile-navigation-item {
+        padding: 1rem;
+        font-size: 1.1rem;
+
+        &.active {
+          color: $color-blue-1;
+          font-weight: 500;
+        }
+      }
+    }
+  }
+
+  &.open {
+    .mobile-navigation-icon-container {
+      visibility: hidden;
+      opacity: 0;
+      transition: visibility .2s ease-in-out, opacity .2s ease-in-out;
+    }
+
+    .mobile-navigation-container {
+      transform: none;
+    }
+  }
+}

package/src/js/pdf/history/pdfHistory.ts

@@ -13,7 +13,6 @@ export const addToHistory = (items: PDFElementParams<any, any>[], mainFont: PdfF
     if (history !== HISTORY[currentIdx]) {
         HISTORY.push(history);
         currentIdx++;
-        console.debug('Current history', HISTORY.map((hist: string) => JSON.parse(hist)));
     }
 };
 

package/src/js/pdf/pdfTemplateCreator.tsx

@@ -78,6 +78,14 @@ export default class PDFTemplateCreator extends PureComponent<Props, State> {
         this.state = {elements, focusedElement: null, canRedo: false, canUndo: false};
     }
 
+    reloadTemplate(items: DefaultPDFElementParams<any, any>[]) {
+        const elements: IndexedObject<{
+            element: React.ReactElement,
+            config: DefaultPDFElementParams<any, any>
+        }> = this.processItems(items);
+        this.setState({elements, canRedo: false, canUndo: false, focusedElement: null});
+    }
+
     processItems = (items?: DefaultPDFElementParams<any, any>[],
                     convertUnits: boolean = true): IndexedObject<{
         element: React.ReactElement,
@@ -276,8 +284,7 @@ export default class PDFTemplateCreator extends PureComponent<Props, State> {
         const supportMultiPage = this.props.options?.supportMultiPage ?? this.props.supportMultiPage;
         const enableTableHeaderColor = this.props.options?.enableTableHeaderColor;
         return (
-            <div className='pdf-creator' onClick={this.onResetElement}
-                 style={{maxWidth: maxWidth ?? '100%'}}>
+            <div className='pdf-creator' onClick={this.onResetElement} style={{maxWidth: maxWidth ?? '100%'}}>
                 <div className='footer-container'>
                     <div className='left-buttons'>
                         {onPreview !== undefined ? <DvrdButton onClick={this.onPreview} label='Voorbeeld'/> : <div/>}

package/src/js/util/interfaces.ts

@@ -14,6 +14,20 @@ export interface MenuItem {
     normalCase?: boolean;
     id?: string;
     allowPropagation?: boolean;
+    index?: number;
+    route?: string;
+}
+
+export interface NavigationItem {
+    content: React.ReactNode;
+    children?: Array<NavigationItem>;
+    onClick?: MouseEventHandler;
+    id: string;
+    passPropagation?: true;
+    index?: number;
+    route?: string;
+    placement?: 'top' | 'bottom';
+    className?: string;
 }
 
 export interface PasswordRule {
@@ -78,7 +92,7 @@ export interface HeaderItem {
 
 export enum ModeEnum {DETAIL = 'detail', EDIT = 'edit', NEW = 'new'}
 
-export enum Breakpoint {XS = 0, SM = 600, MD = 960, LG = 1280, XL = 1920}
+export enum Breakpoint {XS = 0, SM = 750, MD = 960, LG = 1280, XL = 1920}
 
 export enum MenuPlacement {TOP_LEFT, TOP_RIGHT, BOTTOM_RIGHT, BOTTOM_LEFT}
 

package/src/style/common-variables.scss

@@ -220,6 +220,11 @@ $hoverColor: white, $duration: .2s) {
   border-radius: .5rem;
 }
 
+@mixin backgroundShadow3($color: black, $alpha: .1, $borderRadius: .5rem) {
+  box-shadow: 0 4px 4px rgba($color, $alpha), 0 0 4px rgba($color, $alpha);
+  border-radius: $borderRadius;
+}
+
 @mixin popupContainer() {
   position: fixed;
   top: 0;

package/src/style/display-breakpoints.scss

@@ -11,7 +11,7 @@ Ref: https://medium.com/@catalinbridinel/this-makes-more-sense-than-the-counter-
 // Material-UI Breakpoints
 //===========================
 @mixin break-xs {
-  @media(max-width: 599px) {
+  @media(max-width: 750px) {
     @content;
   }
 }