@learningpool/ui 1.6.0-beta.2 → 1.6.0-beta.4

package/components/navigation/MobileNavigation/MobileNavigationToggleX.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const ToggleX: () => React.ReactElement;

package/components/navigation/MobileNavigation/MobileNavigationToggleX.js

@@ -0,0 +1,26 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion } from 'framer-motion';
+var Path = function (props) { return (_jsx(motion.path, __assign({ fill: 'transparent', strokeWidth: '3', stroke: 'inherit', strokeLinecap: 'round' }, props))); };
+export var ToggleX = function () {
+    return (_jsxs("svg", __assign({ width: "40", height: "40", viewBox: "0 0 50 50" }, { children: [_jsx(Path, { variants: {
+                    closed: { d: 'M 10 15 L 40 15' },
+                    open: { d: 'M 15 15 L 35 35' }
+                } }), _jsx(Path, { d: 'M 10 25 L 40 25', variants: {
+                    closed: { opacity: 1, scale: 1 },
+                    open: { opacity: 0, scale: 0 }
+                } }), _jsx(Path, { variants: {
+                    closed: { d: 'M 10 35 L 40 35' },
+                    open: { d: 'M 15 35 L 35 15' }
+                } })] })));
+};

package/components/navigation/MobileNavigation/MobileNavigationToggleXStyles.d.ts

@@ -0,0 +1,36 @@
+/// <reference types="react" />
+export declare const StyledButtonBase: import("@emotion/styled").StyledComponent<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
+    tabIndex?: number | undefined;
+    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
+} & Omit<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
+    tabIndex?: number | undefined;
+    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
+}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "children" | "sx" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

package/components/navigation/MobileNavigation/MobileNavigationToggleXStyles.js

@@ -0,0 +1,10 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { ButtonBase } from '../../../index';
+import { styled } from '@mui/material/styles';
+export var StyledButtonBase = styled(ButtonBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  stroke: ", ";\n  padding: 0px;\n  min-width: 80px;\n  max-width: 168px;\n  height: 56px;\n"], ["\n  stroke: ", ";\n  padding: 0px;\n  min-width: 80px;\n  max-width: 168px;\n  height: 56px;\n"])), function (props) { return props.theme.palette.mode === 'dark'
+    ? props.theme.palette.primary.contrastText
+    : props.theme.palette.text.primary; });
+var templateObject_1;

package/components/navigation/VerticalNavigation/AvatarPanel.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface IAvatarPanelProps {
+    avatarName: string;
+    editProfileText?: string;
+    logoutText?: string;
+}
+declare const AvatarPanel: (props: IAvatarPanelProps) => React.ReactElement;
+export default AvatarPanel;

package/components/navigation/VerticalNavigation/AvatarPanel.js

@@ -0,0 +1,97 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect } from 'react';
+import { Avatar, Box, Typography, IconButton, Button, Link, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Tooltip } from '../../../index';
+import { useTheme } from '@mui/material/styles';
+import EditIcon from '@mui/icons-material/Edit';
+import GroupIcon from '@mui/icons-material/Group';
+import BarChartIcon from '@mui/icons-material/BarChart';
+import ArchiveIcon from '@mui/icons-material/Archive';
+import LogoutIcon from '@mui/icons-material/Logout';
+import { tooltipDelay } from '../../../utils/theme';
+var AvatarPanel = function (props) {
+    var _a;
+    var theme = useTheme();
+    var avatarName = props.avatarName, editProfileText = props.editProfileText, logoutText = props.logoutText, rest = __rest(props, ["avatarName", "editProfileText", "logoutText"]);
+    useEffect(function () { return setAvatarInitials(handleAvatarInitials(avatarName)); }, [
+        avatarName
+    ]);
+    var handleAvatarInitials = function (avatar) {
+        var _a, _b;
+        var firstInitial = avatar.split('')[0] || '';
+        var secondInitial = '';
+        if (((_a = avatarName.split(' ')) === null || _a === void 0 ? void 0 : _a.length) > 1) {
+            firstInitial = avatarName.split(' ')[0][0];
+            if (((_b = avatar.split(' ')[1]) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+                secondInitial = avatar === null || avatar === void 0 ? void 0 : avatar.split(' ')[1][0];
+            }
+        }
+        return "".concat(firstInitial).concat(secondInitial);
+    };
+    var _b = React.useState((_a = handleAvatarInitials(avatarName)) !== null && _a !== void 0 ? _a : 'AN'), avatarInitials = _b[0], setAvatarInitials = _b[1];
+    return (_jsxs(Box, __assign({ style: {
+            alignItems: 'center',
+            backgroundColor: theme.palette.mode === 'dark'
+                ? theme.palette.primary.dark
+                : '#E6EAF0',
+            boxSizing: 'border-box',
+            display: 'flex',
+            flexDirection: 'column',
+            height: '100%',
+            justifyContent: 'space-between',
+            overflow: 'hidden',
+            padding: theme.spacing(2),
+            width: '100%',
+            zIndex: '1'
+        } }, rest, { children: [_jsx(Tooltip, __assign({ title: logoutText !== null && logoutText !== void 0 ? logoutText : 'Log out', placement: 'bottom', enterDelay: tooltipDelay.start, leaveDelay: tooltipDelay.end }, { children: _jsx(IconButton, __assign({ style: {
+                        left: theme.direction === 'rtl' ? theme.spacing(1) : 'auto',
+                        position: 'absolute',
+                        right: theme.direction === 'rtl' ? 'auto' : theme.spacing(1),
+                        top: theme.spacing(1)
+                    } }, { children: _jsx(LogoutIcon, {}) })) })), _jsxs(Box, __assign({ style: {
+                    alignItems: 'center',
+                    display: 'flex',
+                    flexDirection: 'column'
+                } }, { children: [_jsx(Avatar, __assign({ style: {
+                            fontSize: '3.75rem',
+                            height: 150,
+                            marginBottom: theme.spacing(2),
+                            width: 150
+                        } }, { children: avatarInitials })), _jsxs(Typography, __assign({ component: "h3", variant: "h4", style: {
+                            marginBottom: theme.spacing(2)
+                        } }, { children: [_jsx("span", __assign({ style: { fontWeight: 300 } }, { children: "Hi," })), " ", _jsx("strong", { children: avatarName.split(' ')[0] })] })), _jsxs(Box, __assign({ style: {
+                            marginBottom: theme.spacing(1)
+                        } }, { children: [_jsx(Button, __assign({ variant: 'contained', color: 'primary', size: 'medium', style: { marginRight: '0.5rem' } }, { children: "View Profile" })), _jsx(Tooltip, __assign({ title: editProfileText !== null && editProfileText !== void 0 ? editProfileText : 'Edit profile', placement: 'bottom', enterDelay: tooltipDelay.start, leaveDelay: tooltipDelay.end }, { children: _jsx(IconButton, { children: _jsx(EditIcon, {}) }) }))] }))] })), _jsxs(Box, __assign({ style: {
+                    alignItems: 'center',
+                    display: 'flex',
+                    flexDirection: 'column'
+                } }, { children: [_jsxs(List, __assign({ style: { marginBottom: theme.spacing(2) } }, { children: [_jsx(ListItem, __assign({ disablePadding: true }, { children: _jsxs(ListItemButton, __assign({ component: Link, role: 'link' }, { children: [_jsx(ListItemIcon, __assign({ "aria-hidden": true, style: {
+                                                minWidth: theme.spacing(5)
+                                            } }, { children: _jsx(GroupIcon, {}) })), _jsx(ListItemText, { children: "My Team" })] })) })), _jsx(ListItem, __assign({ disablePadding: true }, { children: _jsxs(ListItemButton, __assign({ component: Link, role: 'link' }, { children: [_jsx(ListItemIcon, __assign({ "aria-hidden": true, style: {
+                                                minWidth: theme.spacing(5)
+                                            } }, { children: _jsx(BarChartIcon, {}) })), _jsx(ListItemText, { children: "My Reports" })] })) })), _jsx(ListItem, __assign({ disablePadding: true }, { children: _jsxs(ListItemButton, __assign({ component: Link, role: 'link' }, { children: [_jsx(ListItemIcon, __assign({ "aria-hidden": true, style: {
+                                                minWidth: theme.spacing(5)
+                                            } }, { children: _jsx(ArchiveIcon, {}) })), _jsx(ListItemText, { children: "Archived Playlists" })] })) }))] })), _jsx(Button, __assign({ variant: 'outlined', color: 'primary', size: 'medium' }, { children: "Admin Portal" }))] }))] })));
+};
+export default AvatarPanel;

package/components/navigation/VerticalNavigation/VerticalNavigation.d.ts

@@ -1,21 +1,19 @@
 import React from 'react';
-interface VerticalNaviationItemProps {
-    label: string;
-    icon: React.ReactElement;
-    onClick?: any;
-    isActive?: boolean;
-}
-interface VerticalNaviationProps {
+import { IVerticalNavigationItemProps } from './VerticalNavigationItem/VerticalNavigationItem';
+interface VerticalNavigationProps {
     logo?: string;
     logoText?: string;
-    items?: VerticalNaviationItemProps[];
-    secondaryItems?: VerticalNaviationItemProps[];
+    logoOnClick?: any;
+    items?: IVerticalNavigationItemProps[];
+    secondaryItems?: IVerticalNavigationItemProps[];
     hasStreamHome?: boolean;
     streamHomeAccessToken?: string;
     streamHomeBaseUrl?: string;
     streamHomeApiKey?: string;
     avatarName?: string;
     isDrawerOpen?: boolean;
+    isPersistent?: boolean;
+    setIsPersistent?: any;
 }
-declare const VerticalNavigation: (props: VerticalNaviationProps) => React.ReactElement;
+declare const VerticalNavigation: (props: VerticalNavigationProps) => React.ReactElement;
 export default VerticalNavigation;

package/components/navigation/VerticalNavigation/VerticalNavigation.js

@@ -11,44 +11,42 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect } from 'react';
-import { styled, useTheme } from '@mui/material/styles';
-import useMediaQuery from '@mui/material/useMediaQuery';
-import { Avatar, Drawer, Modal, List, Tooltip } from '../../../index';
-import { Box, Link } from '@mui/material';
-import MailIcon from '@mui/icons-material/Mail';
-import { StreamSuiteLogo, NotchSVG } from '../../../assets/Images';
+import { useTheme } from '@mui/material/styles';
+import { Avatar, Modal, List, Tooltip } from '../../../index';
+import { Box } from '@mui/material';
+import { StreamSuiteLogo, NotchSVG, NotchExtendSVG } from '../../../assets/Images';
 import { AppSwitcher } from '@learningpool/app-switcher';
-import { ChevronLeft, ChevronRight } from '@mui/icons-material';
-import { DRAWER_WIDTH, DrawerHeader, ListItem, DrawerToggle, DrawerToggleHitboxContent, ListItemButton, ListItemAvatar, ListItemIcon, ListItemText, StyledNav, DrawerShadow, StyledAside, NotchContainer, NotchBackground, NotchBackgroundClip, NotchSeemMask, paperStyles, closedMixin, openedMixin } from './VerticalNavigationStyles';
-var StyledDrawer = styled(Drawer)(function (_a) {
-    var theme = _a.theme, open = _a.open;
-    return (__assign(__assign({ boxShadow: 'none', boxSizing: 'border-box', flexShrink: 0, whiteSpace: 'nowrap', width: DRAWER_WIDTH.Expanded }, (open && __assign(__assign({}, openedMixin()), { '& .MuiDrawer-paper': __assign(__assign({}, paperStyles(theme)), openedMixin()) }))), (!open && __assign(__assign({}, closedMixin(theme)), { '& .MuiDrawer-paper': __assign(__assign({}, paperStyles(theme)), closedMixin(theme)) }))));
-});
+import { ChevronLeft, ChevronRight, PushPin } from '@mui/icons-material';
+import VerticalNavigationItem from './VerticalNavigationItem/VerticalNavigationItem';
+import { DRAWER_WIDTH, DrawerHeader, DrawerToggle, DrawerToggleHitboxContent, StyledDivider, StyledNav, StyledNavSecondary, DrawerShadow, StyledAside, NotchContainer, NotchBackground, NotchBackgroundClip, NotchSeemMask, StyledDrawer } from './VerticalNavigationStyles';
+import { ListItem, ListItemButton, ListItemIcon, ListItemText } from './VerticalNavigationItem/VerticalNavigationItemStyles';
+import AvatarPanel from './AvatarPanel';
+import { motion } from '../../../utils/theme';
+import { handleAvatarInitials } from '../../../utils/helpers';
 var VerticalNavigation = function (props) {
     var _a, _b;
     var theme = useTheme();
-    var items = props.items, secondaryItems = props.secondaryItems, hasStreamHome = props.hasStreamHome, logo = props.logo, logoText = props.logoText, streamHomeApiKey = props.streamHomeApiKey, streamHomeBaseUrl = props.streamHomeBaseUrl, streamHomeAccessToken = props.streamHomeAccessToken;
+    var items = props.items, secondaryItems = props.secondaryItems, logo = props.logo, logoText = props.logoText, logoOnClick = props.logoOnClick, hasStreamHome = props.hasStreamHome, streamHomeApiKey = props.streamHomeApiKey, streamHomeBaseUrl = props.streamHomeBaseUrl, streamHomeAccessToken = props.streamHomeAccessToken;
     var propIsDrawerOpen = typeof (props === null || props === void 0 ? void 0 : props.isDrawerOpen) === 'boolean' ? props.isDrawerOpen : undefined;
+    var propIsPersistent = typeof (props === null || props === void 0 ? void 0 : props.isPersistent) === 'boolean' ? props.isPersistent : undefined;
     var avatarName = (_a = props === null || props === void 0 ? void 0 : props.avatarName) !== null && _a !== void 0 ? _a : 'Avatar name';
     var _c = React.useState(propIsDrawerOpen !== null && propIsDrawerOpen !== void 0 ? propIsDrawerOpen : false), isDrawerOpen = _c[0], setIsDrawerOpen = _c[1];
-    var isMediumAndUp = useMediaQuery(theme.breakpoints.up('sm'));
-    var logoHeight = isMediumAndUp ? '46px' : '38px';
-    var logoWidth = isMediumAndUp ? '46px' : '38px';
+    var _d = React.useState(propIsPersistent !== null && propIsPersistent !== void 0 ? propIsPersistent : false), isPersistent = _d[0], setIsPersistent = _d[1];
+    var logoHeight = 38;
+    var logoWidth = 38;
     useEffect(function () { return setIsDrawerOpen(propIsDrawerOpen !== null && propIsDrawerOpen !== void 0 ? propIsDrawerOpen : false); }, [propIsDrawerOpen]);
+    useEffect(function () { return setIsDrawerOpen(propIsPersistent !== null && propIsPersistent !== void 0 ? propIsPersistent : false); }, [propIsPersistent]);
     useEffect(function () { return setAvatarInitials(handleAvatarInitials(avatarName)); }, [avatarName]);
-    var handleAvatarInitials = function (avatarName) {
+    var handleIsPersistent = function () {
         var _a, _b;
-        var firstInitial = avatarName.split('')[0] || '';
-        var secondInitial = '';
-        if (((_a = avatarName.split(' ')) === null || _a === void 0 ? void 0 : _a.length) > 1) {
-            firstInitial = avatarName.split(' ')[0][0];
-            if (((_b = avatarName.split(' ')[1]) === null || _b === void 0 ? void 0 : _b.length) > 0) {
-                secondInitial = avatarName === null || avatarName === void 0 ? void 0 : avatarName.split(' ')[1][0];
-            }
+        if (props === null || props === void 0 ? void 0 : props.setIsPersistent) {
+            props.setIsPersistent((_a = !propIsPersistent) !== null && _a !== void 0 ? _a : false);
+            setIsPersistent((_b = !propIsPersistent) !== null && _b !== void 0 ? _b : false);
+            return;
         }
-        return "".concat(firstInitial).concat(secondInitial);
+        setIsPersistent(propIsPersistent !== null && propIsPersistent !== void 0 ? propIsPersistent : false);
     };
-    var _d = React.useState((_b = handleAvatarInitials(avatarName)) !== null && _b !== void 0 ? _b : 'AN'), avatarInitials = _d[0], setAvatarInitials = _d[1];
+    var _e = React.useState((_b = handleAvatarInitials(avatarName)) !== null && _b !== void 0 ? _b : 'AN'), avatarInitials = _e[0], setAvatarInitials = _e[1];
     var toggleDrawer = function (open) { return function (event) {
         event === null || event === void 0 ? void 0 : event.stopPropagation();
         if (event.type === 'keydown') {
@@ -62,76 +60,141 @@ var VerticalNavigation = function (props) {
             display: 'flex',
             flex: '1 auto',
             flexDirection: 'column',
-            justifyContent: 'flex-start'
-        } }, { children: [_jsxs(DrawerHeader, { children: [_jsx(Tooltip, __assign({ disableHoverListener: isDrawerOpen, disableFocusListener: isDrawerOpen, disableTouchListener: isDrawerOpen, title: logoText !== null && logoText !== void 0 ? logoText : '', placement: theme.direction === 'rtl' ? 'left' : 'right' }, { children: logo
-                            ? typeof logo === 'string'
-                                ? (_jsx("img", { src: logo, height: logoHeight, width: logoWidth, style: {
-                                        marginRight: isMediumAndUp ? '20px' : '24px'
-                                    }, alt: "Site Logo" }))
-                                : logo
-                            : (_jsx(StreamSuiteLogo, { style: {
-                                    height: logoHeight,
-                                    width: logoWidth,
-                                    marginRight: isMediumAndUp ? '20px' : '24px',
+            justifyContent: 'flex-start',
+            '.wrapper': {
+                display: 'flex',
+                position: 'relative'
+            },
+            '.wrapper > :not(:first-child)': {
+                position: 'absolute',
+                right: 0,
+                background: 'transparent',
+                fontSize: 0
+            }
+        }, className: 'grid-container' }, { children: [_jsx("div", __assign({ className: 'wrapper', style: {
+                    backgroundColor: theme.palette.mode === 'dark'
+                        ? theme.palette.primary.main
+                        : theme.palette.background.paper
+                } }, { children: _jsxs(DrawerHeader, __assign({ onClick: logoOnClick !== null && logoOnClick !== void 0 ? logoOnClick : null, isDrawerOpen: isDrawerOpen || isPersistent }, { children: [_jsx(Tooltip, __assign({ disableHoverListener: isDrawerOpen || isPersistent, disableFocusListener: isDrawerOpen || isPersistent, disableTouchListener: isDrawerOpen || isPersistent, title: logoText !== null && logoText !== void 0 ? logoText : '', placement: theme.direction === 'rtl' ? 'left' : 'right' }, { children: logo
+                                ? typeof logo === 'string'
+                                    ? (_jsx("img", { src: logo, height: "".concat(logoHeight, "px"), width: "".concat(logoWidth, "px"), style: {
+                                            marginRight: '16px'
+                                        }, alt: "Site Logo" }))
+                                    : logo
+                                : (_jsx(StreamSuiteLogo, { style: {
+                                        height: "".concat(logoHeight, "px"),
+                                        width: "".concat(logoWidth, "px"),
+                                        marginRight: '16px',
+                                        fill: theme.palette.mode === 'dark'
+                                            ? theme.palette.primary.contrastText
+                                            : theme.palette.primary.main
+                                    } })) })), _jsx(ListItemText, { primary: logoText !== null && logoText !== void 0 ? logoText : '', isDrawerOpen: isDrawerOpen || isPersistent })] })) })), _jsxs("div", __assign({ className: 'wrapper' }, { children: [_jsxs(NotchContainer, __assign({ sx: { height: '85px', position: 'relative !important' } }, { children: [_jsx(NotchBackground, {}), !isPersistent && _jsx(NotchBackgroundClip, {}), _jsx(NotchSeemMask, {})] })), !isPersistent && _jsx(DrawerToggle, __assign({ onClick: toggleDrawer(!isDrawerOpen), "aria-label": isDrawerOpen ? 'Close Navigation Menus' : 'Open Navigation Menus', "aria-expanded": isDrawerOpen ? 'true' : 'false', "aria-controls": "vertical-navigation" }, { children: _jsx(DrawerToggleHitboxContent, { children: isDrawerOpen
+                                ? (_jsx(ChevronLeft, { style: {
+                                        fontSize: '1.75rem',
+                                        height: '1.75rem',
+                                        width: '1.75rem'
+                                    } }))
+                                : (_jsx(ChevronRight, { style: {
+                                        fontSize: '1.75rem',
+                                        height: '1.75rem',
+                                        width: '1.75rem'
+                                    } })) }) })), _jsx(Box, { style: {
+                            borderRadius: '50%',
+                            boxShadow: '5px 0 15px 0 rgb(0 0 0 / 10%)',
+                            display: 'none',
+                            height: '50px',
+                            left: '12px',
+                            position: 'fixed',
+                            right: 'auto !important',
+                            top: '50%',
+                            transform: 'translate(50%, -50%)',
+                            width: '50px'
+                        } }), _jsxs(DrawerToggle, __assign({ onClick: handleIsPersistent, "aria-label": isDrawerOpen ? 'Close Navigation Menus' : 'Open Navigation Menus', "aria-expanded": isDrawerOpen ? 'true' : 'false', "aria-controls": "vertical-navigation", style: {
+                            display: 'none',
+                            position: 'fixed',
+                            top: '50%',
+                            transform: 'translate(50%, -50%)',
+                            zIndex: 10
+                        } }, { children: [_jsx(NotchExtendSVG, { style: {
+                                    display: 'block',
                                     fill: theme.palette.mode === 'dark'
-                                        ? theme.palette.primary.contrastText
-                                        : theme.palette.primary.main
-                                } })) })), _jsx(ListItemText, { primary: logoText !== null && logoText !== void 0 ? logoText : '', isDrawerOpen: isDrawerOpen })] }), _jsxs(NotchContainer, { children: [_jsx(NotchBackground, {}), _jsx(NotchBackgroundClip, {}), _jsx(NotchSeemMask, {})] }), _jsx(NotchSVG, { style: { height: '0', position: 'absolute', width: '0' } }), _jsxs(StyledNav, { children: [_jsx(List, __assign({ sx: {
+                                        ? theme.palette.primary.main
+                                        : theme.palette.background.paper,
+                                    height: '165px',
+                                    left: '-12px',
+                                    padding: '0',
+                                    position: 'absolute',
+                                    top: '-61px',
+                                    transition: 'none',
+                                    width: '90px',
+                                    zIndex: '-1'
+                                } }), _jsx(DrawerToggleHitboxContent, __assign({ style: {
+                                    background: 'transparent',
+                                    boxShadow: 'none',
+                                    fontSize: '1.3rem',
+                                    height: '1.3rem',
+                                    padding: theme.spacing(1),
+                                    width: '1.3rem'
+                                } }, { children: isPersistent
+                                    ? (_jsx(PushPin, { style: {
+                                            fontSize: '1.3rem',
+                                            height: '1.3rem',
+                                            width: '1.3rem'
+                                        } }))
+                                    : (_jsx(PushPin, { style: {
+                                            fontSize: '1.3rem',
+                                            height: '1.3rem',
+                                            width: '1.3rem'
+                                        } })) }))] }))] })), _jsx(NotchSVG, { style: { height: '0', position: 'absolute', width: '0' } }), _jsx("div", __assign({ className: 'wrapper', style: {
+                    backgroundColor: theme.palette.mode === 'dark'
+                        ? theme.palette.primary.main
+                        : theme.palette.background.paper,
+                    flex: '1 1px',
+                    overflow: 'auto',
+                    position: 'relative'
+                } }, { children: _jsx(StyledNav, __assign({ tabIndex: -1, "aria-label": 'Primary' }, { children: _jsx(List, __assign({ style: {
                             height: '100%',
                             width: DRAWER_WIDTH.Expanded,
-                            marginTop: "-".concat(theme.spacing(0.5))
-                        } }, { children: items && items.length > 0 && items.map(function (item, index) {
-                            var _a;
-                            return (_jsx(ListItem, __assign({ disablePadding: true }, { children: _jsxs(ListItemButton
-                                // @ts-expect-error
-                                , __assign({ 
-                                    // @ts-expect-error
-                                    component: Link, onClick: item.onClick, isActive: item.isActive, isDrawerOpen: isDrawerOpen }, { children: [_jsx(Tooltip, __assign({ disableHoverListener: isDrawerOpen, disableFocusListener: isDrawerOpen, disableTouchListener: isDrawerOpen, title: item.label, placement: theme.direction === 'rtl' ? 'left' : 'right' }, { children: _jsx(ListItemIcon, __assign({ "aria-hidden": true }, { children: (_a = item.icon) !== null && _a !== void 0 ? _a : _jsx(MailIcon, {}) })) })), _jsx(ListItemText, { primary: item.label, isDrawerOpen: isDrawerOpen, index: index })] }), item.label) })));
-                        }) })), _jsxs(List, __assign({ sx: {
-                            width: DRAWER_WIDTH.Expanded,
-                            marginTop: 'auto',
-                            backgroundColor: theme.palette.mode === 'dark'
-                                ? theme.palette.primary.main
-                                : theme.palette.background.paper
-                        } }, { children: [hasStreamHome
-                                ? (_jsx(ListItem, __assign({ disablePadding: true }, { children: _jsxs(ListItemButton, __assign({ sx: {
-                                            minHeight: 48,
-                                            justifyContent: isDrawerOpen ? 'initial' : 'center'
-                                        } }, { children: [_jsx(Tooltip, __assign({ disableHoverListener: isDrawerOpen, disableFocusListener: isDrawerOpen, disableTouchListener: isDrawerOpen, title: 'App switcher', placement: theme.direction === 'rtl' ? 'left' : 'right' }, { children: _jsx(ListItemIcon, __assign({ sx: {
-                                                        minWidth: 0,
-                                                        mr: isDrawerOpen ? 2.5 : 'auto',
-                                                        justifyContent: 'center'
-                                                    } }, { children: _jsx(AppSwitcher, { apiKey: streamHomeApiKey !== null && streamHomeApiKey !== void 0 ? streamHomeApiKey : '', baseUrl: streamHomeBaseUrl !== null && streamHomeBaseUrl !== void 0 ? streamHomeBaseUrl : '', token: streamHomeAccessToken !== null && streamHomeAccessToken !== void 0 ? streamHomeAccessToken : '' }) })) })), _jsx(ListItemText, { primary: 'App switcher', isDrawerOpen: isDrawerOpen })] })) })))
-                                : null, secondaryItems && secondaryItems.length > 0 && secondaryItems.map(function (item, index) {
-                                var _a;
-                                return (_jsx(ListItem, __assign({ disablePadding: true }, { children: _jsxs(ListItemButton
-                                    // @ts-expect-error
-                                    , __assign({ 
-                                        // @ts-expect-error
-                                        component: Link, onClick: item.onClick, isActive: item.isActive, isDrawerOpen: isDrawerOpen, index: index }, { children: [_jsx(Tooltip, __assign({ disableHoverListener: isDrawerOpen, disableFocusListener: isDrawerOpen, disableTouchListener: isDrawerOpen, title: item.label, placement: theme.direction === 'rtl' ? 'left' : 'right' }, { children: _jsx(ListItemIcon, __assign({ "aria-hidden": true }, { children: (_a = item.icon) !== null && _a !== void 0 ? _a : _jsx(MailIcon, {}) })) })), _jsx(ListItemText, { primary: item.label, isDrawerOpen: isDrawerOpen })] }), item.label) })));
-                            }), avatarName
-                                ? (_jsx(ListItem, __assign({ disablePadding: true, sx: {
-                                        overflow: 'hidden'
-                                    } }, { children: _jsxs(ListItemAvatar, __assign({ isDrawerOpen: isDrawerOpen, component: Link }, { children: [_jsx(Tooltip, __assign({ disableHoverListener: isDrawerOpen, disableFocusListener: isDrawerOpen, disableTouchListener: isDrawerOpen, title: avatarName, placement: theme.direction === 'rtl' ? 'left' : 'right' }, { children: _jsx(ListItemIcon, __assign({ "aria-hidden": true, sx: { mr: 3 } }, { children: _jsx(Avatar, __assign({ sx: {
-                                                            bgcolor: theme.palette.mode === 'dark'
-                                                                ? theme.palette.primary.contrastText
-                                                                : theme.palette.primary.main
-                                                        } }, { children: avatarInitials })) })) })), _jsx(ListItemText, { primary: avatarName, isDrawerOpen: isDrawerOpen })] })) })))
-                                : null] }))] })] }))); };
-    return (_jsxs(StyledAside, { children: [_jsx(DrawerShadow, { className: 'drawerShadow', "aria-hidden": 'true', isDrawerOpen: isDrawerOpen }), _jsx(Modal, __assign({ "aria-hidden": false, keepMounted: true, disablePortal: true, open: isDrawerOpen, onClose: toggleDrawer(false) }, { children: _jsxs(StyledDrawer, __assign({ "aria-label": 'Navigation Menu', id: 'vertical-navigation', anchor: 'left', open: isDrawerOpen, onClose: toggleDrawer(false), ModalProps: {
+                            marginTop: "-".concat(theme.spacing(0.5), " !important")
+                        } }, { children: items && items.length > 0 && items.map(function (item, index) { return (_jsx(VerticalNavigationItem, __assign({}, item, { index: index, isDrawerOpen: isDrawerOpen || isPersistent }))); }) })) })) })), _jsx("div", __assign({ className: 'wrapper', style: {
+                    backgroundColor: theme.palette.mode === 'dark'
+                        ? theme.palette.primary.main
+                        : theme.palette.background.paper
+                } }, { children: _jsxs(StyledNavSecondary, __assign({ "aria-label": 'Secondary navigation menu' }, { children: [_jsx(StyledDivider, { isDrawerOpen: isDrawerOpen || isPersistent }), _jsxs(List, __assign({ style: {
+                                width: DRAWER_WIDTH.Expanded,
+                                backgroundColor: theme.palette.mode === 'dark'
+                                    ? theme.palette.primary.main
+                                    : theme.palette.background.paper
+                            } }, { children: [hasStreamHome
+                                    ? (_jsx(ListItem, __assign({ disablePadding: true, isDrawerOpen: isDrawerOpen || isPersistent }, { children: _jsxs(ListItemButton, __assign({ sx: {
+                                                minHeight: 48,
+                                                justifyContent: isDrawerOpen || isPersistent ? 'initial' : 'center'
+                                            } }, { children: [_jsx(Tooltip, __assign({ disableHoverListener: isDrawerOpen || isPersistent, disableFocusListener: isDrawerOpen || isPersistent, disableTouchListener: isDrawerOpen || isPersistent, title: 'App switcher', placement: theme.direction === 'rtl' ? 'left' : 'right' }, { children: _jsx(ListItemIcon, __assign({ sx: {
+                                                            minWidth: 0,
+                                                            mr: isDrawerOpen || isPersistent ? 2.5 : 'auto',
+                                                            justifyContent: 'center'
+                                                        } }, { children: _jsx(AppSwitcher, { apiKey: streamHomeApiKey !== null && streamHomeApiKey !== void 0 ? streamHomeApiKey : '', baseUrl: streamHomeBaseUrl !== null && streamHomeBaseUrl !== void 0 ? streamHomeBaseUrl : '', token: streamHomeAccessToken !== null && streamHomeAccessToken !== void 0 ? streamHomeAccessToken : '' }) })) })), _jsx(ListItemText, { primary: 'App switcher', isDrawerOpen: isDrawerOpen || isPersistent })] })) })))
+                                    : null, secondaryItems && secondaryItems.length > 0 && secondaryItems.map(function (item, index) { return (_jsx(VerticalNavigationItem, __assign({}, item, { index: index, isDrawerOpen: isDrawerOpen || isPersistent, isSecondary: true }))); }), avatarName
+                                    ? (_jsx(VerticalNavigationItem, { label: avatarName, icon: _jsx(Avatar, __assign({ style: {
+                                                // backgroundColor: mainTheme.colorButtonText,
+                                                // color: mainTheme.colorButton,
+                                                fontSize: '0.75rem',
+                                                height: 22,
+                                                width: 22
+                                            } }, { children: avatarInitials })), style: {
+                                            maxHeight: isDrawerOpen ? '200px' : '48px',
+                                            overflow: 'hidden',
+                                            padding: 0,
+                                            minHeight: 52,
+                                            transition: "max-height 225ms ".concat(motion.easeInOut, " 0ms !important")
+                                        }, hasFlyout: true, fullHeightFlyout: true, content: _jsx(AvatarPanel, { avatarName: avatarName }), isDrawerOpen: isDrawerOpen }))
+                                    : null] }))] })) }))] }))); };
+    return (_jsxs(StyledAside, { children: [_jsx(DrawerShadow, { className: 'drawerShadow', "aria-hidden": 'true', isDrawerOpen: isDrawerOpen || isPersistent, style: {
+                    display: isPersistent ? 'none' : 'block'
+                } }), _jsx(Modal, __assign({ "aria-hidden": false, keepMounted: true, disablePortal: true, open: isDrawerOpen || isPersistent, onClose: toggleDrawer(false), hideBackdrop: isPersistent, disableScrollLock: isPersistent, disableEnforceFocus: isPersistent, style: {
+                    right: isPersistent ? 'auto' : 0 // @TODO: rtl support
+                } }, { children: _jsx(StyledDrawer, __assign({ "aria-label": 'Navigation Menus', id: 'vertical-navigation', anchor: 'left', open: isDrawerOpen || isPersistent, onClose: toggleDrawer(false), ModalProps: {
                         keepMounted: true
-                    }, variant: 'permanent' }, { children: [_jsx(DrawerToggle, __assign({ onClick: toggleDrawer(!isDrawerOpen), "aria-label": isDrawerOpen ? 'Close Navigation Menu' : 'Open Navigation Menu', "aria-expanded": isDrawerOpen ? 'true' : 'false', "aria-controls": "vertical-navigation", sx: {
-                                left: isDrawerOpen ? "".concat(DRAWER_WIDTH.Expanded - 21, "px") : (isMediumAndUp ? '44px' : '36px')
-                            } }, { children: _jsx(DrawerToggleHitboxContent, { children: isDrawerOpen
-                                    ? (_jsx(ChevronLeft, { sx: {
-                                            fontSize: '1.75rem',
-                                            height: '1.75rem',
-                                            width: '1.75rem'
-                                        } }))
-                                    : (_jsx(ChevronRight, { sx: {
-                                            fontSize: '1.75rem',
-                                            height: '1.75rem',
-                                            width: '1.75rem'
-                                        } })) }) })), listContent()] })) }))] }));
+                    }, variant: 'permanent' }, { children: listContent() })) }))] }));
 };
 export default VerticalNavigation;

package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItem.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export interface IVerticalNavigationItemProps {
+    label: string;
+    icon: React.ReactElement;
+    onClick?: any;
+    isActive?: boolean;
+    children?: IVerticalNavigationItemProps[];
+    isDrawerOpen?: boolean;
+    index?: number;
+    isSecondary?: boolean;
+    hasFlyout?: boolean;
+    fullHeightFlyout?: boolean;
+    content?: React.ReactElement;
+    style?: any;
+    open?: boolean;
+}
+declare const VerticalNavigationItem: (props: IVerticalNavigationItemProps) => React.ReactElement;
+export default VerticalNavigationItem;