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

package/assets/Images.d.ts

@@ -7,3 +7,12 @@ export declare const LearningPoolLogo: import("@mui/material/OverridableComponen
 export declare const NotchSVG: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
     muiName: string;
 };
+export declare const NotchMiniSVG: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+    muiName: string;
+};
+export declare const NotchExtendSVG: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+    muiName: string;
+};
+export declare const NotchBackgroundSVG: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+    muiName: string;
+};

package/assets/Images.js

@@ -9,8 +9,11 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createSvgIcon } from '@mui/material/utils';
 export var StreamSuiteLogo = createSvgIcon(_jsx("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", "data-name": "Layer 1", viewBox: "0 0 447.9 484.8" }, { children: _jsx("path", { d: "M447.9 304.4V321l-1 5.2c-3 21.8-12.5 40.5-27.4 56.4a102.6 102.6 0 0 1-34.1 24A98 98 0 0 1 325 413c-2.2-.5-3.2 0-4 2.1a100.5 100.5 0 0 1-32.4 47.2 101.3 101.3 0 0 1-48 21l-11 1.4h-11.7a6.8 6.8 0 0 0-1.5-.4A102.5 102.5 0 0 1 172 471a96.6 96.6 0 0 1-30.8-27.6 103.7 103.7 0 0 1-14.6-28.7c-.5-1.4-.8-2.5-2.8-2a98.5 98.5 0 0 1-32.5 1.5 101 101 0 0 1-35.8-10.8 97.8 97.8 0 0 1-29.7-23A102 102 0 0 1 7 350a105.4 105.4 0 0 1-5.5-55.2 100.7 100.7 0 0 1 13-35.3c2.7-4.7 6.3-5.1 10.2-1.3l4.8 4.3a102 102 0 0 0 37.7 20.6c5.1 1.6 6.5 5 3.7 9.6a35.7 35.7 0 0 0 7.9 48.3 36.3 36.3 0 0 0 22.4 9c15.2.5 26.3-6.9 33.8-19.3 10.5-17.2 20.3-34.8 30.3-52.2.6-1 1-2 1.7-3.5l-4-.2c-22.2 0-44.5 0-66.7-.3a103 103 0 0 1-76.3-41A95.8 95.8 0 0 1 .8 161a106 106 0 0 1 33.9-66A90 90 0 0 1 54 81.4c20.6-11 42.5-13.6 65.4-10.3 7.5 1.2 5.5 2.5 8.2-4.7a99 99 0 0 1 32-44.8A102.2 102.2 0 0 1 222.4 0a106 106 0 0 1 32.2 4.5A98.4 98.4 0 0 1 293 25.8a100.2 100.2 0 0 1 28 43.5c.8 2.2 1.6 2.9 4 2.4a102 102 0 0 1 28-1.9 92.8 92.8 0 0 1 37.9 10.6q46 24.9 55.6 76.4c.6 3 1 6 1.4 9.1v14.4a23.2 23.2 0 0 0-.6 2.6 100.8 100.8 0 0 1-14.6 43c-2.3 3.6-6 4-9.1 1-2.1-2-4.1-4-6.3-5.8a97.4 97.4 0 0 0-35.4-19.1c-7-2-8-5.7-4.3-11.5a32.5 32.5 0 0 0 5.1-22.2 37.6 37.6 0 0 0-15-25.7 36.4 36.4 0 0 0-52.8 8c-3.6 4.7-6.2 10-9.2 15l-24 41.6a17 17 0 0 0-.9 2.4l3.7.2 64.2.3a86.7 86.7 0 0 1 24.3 3.4 102.6 102.6 0 0 1 50 32.1 100.7 100.7 0 0 1 23 48l1.9 10.8ZM261.5 102.9a37.2 37.2 0 0 0-4-17c-7-13.4-17.8-21.3-33.2-21.4-13.3 0-24 5.8-31.5 16.7a34.9 34.9 0 0 0-2.3 38.2c7.6 14.2 16 28 24.2 42a9.8 9.8 0 0 1 1 8.7l-12.4 37.7a9.1 9.1 0 0 0 0 2.9 9.3 9.3 0 0 0 2.2-2c2.5-4 4.8-8.2 7.2-12.4l42-72.5c3.9-6.5 7-13.2 6.8-21Zm-.2 278.7a30.6 30.6 0 0 0-4-16c-8.3-14.8-16.9-29.5-25.4-44.2a6 6 0 0 1-.5-5.5l13.1-39.5a6.6 6.6 0 0 0-.2-2.5c-.6.5-1.5.9-1.9 1.5l-20 34.5-29.6 51.2a42.3 42.3 0 0 0-6.5 19.7 35 35 0 0 0 13 29.8 37.3 37.3 0 0 0 62-29Zm-94.2-172-1.4-2.9-27.7-48a54 54 0 0 0-11.5-15.4c-20.4-17-48.8-7-58.2 13.3-12 25.8 9.4 53.5 34 53.2 20.4-.2 41 0 61.4 0l3.4-.3ZM280.7 275a22.1 22.1 0 0 0 .9 2.2c10.4 18 20.7 36 31.3 54a35.5 35.5 0 0 0 29.4 18.6 37.7 37.7 0 0 0 39.9-43.7 37.9 37.9 0 0 0-36-31.2h-65.5Z" }) })), 'StreamSuite');
 export var LearningPoolLogo = createSvgIcon(_jsx("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 804 174" }, { children: _jsx("path", { fill: "#0069B4", d: "M155.5 0A44 44 0 0 0 121 16.5l-1 1.2-1.2-1a72.5 72.5 0 1 0-46.4 128.1 72.8 72.8 0 0 0 70.7-56.6l.4-1.5 1.5.4a44.2 44.2 0 0 0 44.8-15 44.2 44.2 0 0 0 5.6-47 44.2 44.2 0 0 0-40-25.1zM113 115.2H72.4a42.9 42.9 0 1 1 29.2-11.5l11.4 11.5zm42.5-47.8h-22l6.1-6.2a23.2 23.2 0 1 1 15.9 6.2zm56.2-8.5h14v84h-14zm76 54.3a31.1 31.1 0 0 0-7.5-21.1 29.2 29.2 0 0 0-40.7.2 31.8 31.8 0 0 0-7.8 22 31.2 31.2 0 0 0 7.9 22.2 27.8 27.8 0 0 0 20.9 8.3c2.8 0 5.6-.3 8.4-1a24 24 0 0 0 7.3-3 28.4 28.4 0 0 0 6.3-5.1c1.7-2 3.3-4 4.7-6.2l-12.7-7a28 28 0 0 1-6 6.9 12.3 12.3 0 0 1-7.4 2.1 13 13 0 0 1-9.6-3.7 15.6 15.6 0 0 1-4-9.1v-.4h40.1v-5.1zm-41.7-5.3.3-1.1a16.8 16.8 0 0 1 2-4.6 14 14 0 0 1 3-3.5 13.3 13.3 0 0 1 4.1-2.2 14.5 14.5 0 0 1 4.8-.8c6.8-.4 12.8 4.4 14 11l.3 1.2H246zm90.4-22.4V91a24.2 24.2 0 0 0-16.9-7.2 24.9 24.9 0 0 0-19.2 8.6 30.7 30.7 0 0 0-7.7 21.2 31.7 31.7 0 0 0 7.7 21.6 25.4 25.4 0 0 0 19.6 8.5 25 25 0 0 0 16.5-6.7v5.1h14.2V85.5h-14.2zm-3.6 41a14.3 14.3 0 0 1-11.1 4.7 13.5 13.5 0 0 1-10.6-4.9 18.9 18.9 0 0 1-4.1-12.6 18 18 0 0 1 4.1-12.2 13.8 13.8 0 0 1 10.9-4.8 14 14 0 0 1 10.8 4.8A18.3 18.3 0 0 1 337 114a18.5 18.5 0 0 1-4.3 12.5zm61.7-38.9-6.3 13-.6-.4a11.3 11.3 0 0 0-6.6-2.5c-6.5 0-9.7 5-9.7 15.4v29.7h-13.7V85.5h13.7v4a23.9 23.9 0 0 1 5.3-4.1 14.6 14.6 0 0 1 6.7-1.5 20.7 20.7 0 0 1 10.7 3.4l.5.3zm53 20.2v35H433v-32a19.7 19.7 0 0 0-2.2-11 8.8 8.8 0 0 0-7.8-3 9.4 9.4 0 0 0-8.7 4 28.9 28.9 0 0 0-2.6 14.3v27.7h-14.3V85.5h14.3v4.4a21.8 21.8 0 0 1 14.9-6 20.3 20.3 0 0 1 15.8 6.4c3.3 3.6 5 9.5 5 17.5m22.9-40a8.7 8.7 0 0 1-2.7 6.4 8.5 8.5 0 0 1-6.3 2.7 9 9 0 0 1-6.4-2.6 9 9 0 0 1-2.6-6.4 8.5 8.5 0 0 1 2.7-6.3 8.6 8.6 0 0 1 6.3-2.7 8.7 8.7 0 0 1 6.3 2.7 8.5 8.5 0 0 1 2.7 6.3m-16 18h14v57h-14zm71 22v35H511v-32a19.7 19.7 0 0 0-2.2-11.1 8.8 8.8 0 0 0-7.8-3 9.4 9.4 0 0 0-8.7 4 28.9 28.9 0 0 0-2.5 14.3v27.7h-14.4V85.5h14.4v4.4a21.8 21.8 0 0 1 14.8-6 20.2 20.2 0 0 1 15.8 6.4c3.3 3.6 5 9.5 5 17.5M574 85.4v5.4a23 23 0 0 0-16.9-6.9 24.4 24.4 0 0 0-19.9 9.3 32.9 32.9 0 0 0-7 21 31.2 31.2 0 0 0 7.6 21.3 25.1 25.1 0 0 0 17.8 8.5 25.2 25.2 0 0 0 18.4-7v6.3c0 11.2-4.4 16.7-13.5 16.7a13.4 13.4 0 0 1-11.2-5 14.2 14.2 0 0 1-2.4-6v-.6h-14.2v.7a25.2 25.2 0 0 0 8.8 17.5 28.4 28.4 0 0 0 19 6.2 26.9 26.9 0 0 0 21.3-9 24.1 24.1 0 0 0 5.4-11 51.2 51.2 0 0 0 .7-5.4c.2-2 .3-4.4.3-7v-55H574zm-3.3 40.6a13.6 13.6 0 0 1-11.2 5 13.6 13.6 0 0 1-11.1-5 18.9 18.9 0 0 1-3.7-12 19.1 19.1 0 0 1 3.7-12.3 13.3 13.3 0 0 1 11-5.1 13.9 13.9 0 0 1 11 4.7 18 18 0 0 1 4.1 12.6 18.6 18.6 0 0 1-3.8 12zm73.7-33.4a24.8 24.8 0 0 0-19.5-8.7 24.4 24.4 0 0 0-16.7 6.8v-5.2h-14v87.3h14V137a24.4 24.4 0 0 0 17 7 24.9 24.9 0 0 0 19.2-8.5 30.9 30.9 0 0 0 7.7-21.3 31.3 31.3 0 0 0-7.7-21.6m-32.5 8.8a14.3 14.3 0 0 1 11-4.7 13.5 13.5 0 0 1 10.7 5 18.6 18.6 0 0 1 4.1 12.5 17.8 17.8 0 0 1-4.3 12.3 13.5 13.5 0 0 1-10.6 4.8 14 14 0 0 1-11-4.8 18.4 18.4 0 0 1-4.2-12.5 18.2 18.2 0 0 1 4.2-12.6m97.4-7.9a31.3 31.3 0 0 0-43.2 0 28.3 28.3 0 0 0-9 21 29.4 29.4 0 0 0 9 21.5 29.3 29.3 0 0 0 21.5 8.8 30.4 30.4 0 0 0 21.9-8.6A28.8 28.8 0 0 0 718 115a29 29 0 0 0-8.8-21.4m-10 34a16.9 16.9 0 0 1-23.3 0 18.1 18.1 0 0 1-4.4-12.8 17.2 17.2 0 0 1 4.5-12.3 15.1 15.1 0 0 1 11.5-4.7c4.4-.1 8.7 1.6 11.7 4.7a17.7 17.7 0 0 1 4.4 12.6 17.7 17.7 0 0 1-4.4 12.5m75-35a31.3 31.3 0 0 0-43.3 0 28.2 28.2 0 0 0-8.9 21 29.4 29.4 0 0 0 8.7 21.5 29.3 29.3 0 0 0 21.5 8.8 30.4 30.4 0 0 0 21.9-8.6 28.8 28.8 0 0 0 8.8-21.4 29 29 0 0 0-8.8-21.3m-10 34a16.8 16.8 0 0 1-23.3 0 18.2 18.2 0 0 1-4.3-12.8 17.2 17.2 0 0 1 4.5-12.3 15.1 15.1 0 0 1 11.6-4.7 15.3 15.3 0 0 1 11.6 4.7 17.7 17.7 0 0 1 4.4 12.6 17.7 17.7 0 0 1-4.4 12.5M790 59h14v84h-14z" }) })), 'LearningPool');
 export var NotchSVG = createSvgIcon(_jsx("svg", __assign({ className: 'notch-svg' }, { children: _jsx("clipPath", __assign({ id: 'notch', clipPathUnits: 'objectBoundingBox' }, { children: _jsx("path", { d: 'M1,0 H0 v1 h1 v-0.105 c-0.017,-0.074,-0.109,-0.132,-0.168,-0.146 l-0.008,-0.002 a0.5,0.265,0,0,1,0.006,-0.493 c0.062,-0.015,0.16,-0.079,0.169,-0.158 V0' }) })) })), 'Notch');
+export var NotchMiniSVG = createSvgIcon(_jsxs("svg", __assign({ className: 'notch-mini-svg', width: "100%", height: "100%", viewBox: "0 0 15 26" }, { children: [_jsx("path", { d: "M15 13.09c0 4.456-3.358 8.069-7.5 8.069-4.142 0-7.5-3.613-7.5-8.07 0-4.456 3.358-8.068 7.5-8.068 4.142 0 7.5 3.612 7.5 8.069Z" }), _jsx("path", { d: "M7.333 26c.167-2.869-1.666-5.2-2.666-5.559H10L7.333 26ZM7.333 0C7.5 2.869 5.667 5.2 4.667 5.559H10L7.333 0Z" })] })), 'NotchMini');
+export var NotchExtendSVG = createSvgIcon(_jsx("svg", __assign({ className: 'notch-extend-svg', viewBox: "0 0 22 85", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M0 0V85V76.0381C0.774 69.7533 4.9101 64.7829 7.5488 63.5975C7.668 63.5518 7.7867 63.5052 7.9049 63.4576C16.1679 60.1279 22 52.035 22 42.5799C22 33.1612 16.2126 25.0941 8 21.7408C7.8723 21.6887 7.7441 21.6377 7.6153 21.5879C4.8325 20.3142 0.4173 14.8748 0 8.13255V0Z" }) })), 'NotchExtend');
+export var NotchBackgroundSVG = createSvgIcon(_jsx("svg", __assign({ className: 'notch-background-svg', viewBox: "0 0 25 865", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { fill: "#fff", "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M25 0H0V865H25V468.5V466.451C24.6432 460.704 21.3624 455.984 18.6792 453.948C9.58731 451.059 3 442.549 3 432.5C3 422.927 8.97844 414.75 17.4054 411.5H17C19.7393 410.587 24.563 405.088 25 398.049V396V0Z" }) })), 'NotchBackground');

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,31 +11,40 @@ 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';
 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 handleIsPersistent = function () {
+        var _a, _b;
+        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;
+        }
+        setIsPersistent(propIsPersistent !== null && propIsPersistent !== void 0 ? propIsPersistent : false);
+    };
     var handleAvatarInitials = function (avatarName) {
         var _a, _b;
         var firstInitial = avatarName.split('')[0] || '';
@@ -48,7 +57,7 @@ var VerticalNavigation = function (props) {
         }
         return "".concat(firstInitial).concat(secondInitial);
     };
-    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 +71,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;

package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItem.js

@@ -0,0 +1,91 @@
+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 from 'react';
+import { useTheme } from '@mui/material/styles';
+import { Link, List, Tooltip, Collapse } from '../../../../index';
+import MailIcon from '@mui/icons-material/Mail';
+import { ListItem, ListItemButton, ListItemButtonChild, ListItemIcon, ListItemText } from './VerticalNavigationItemStyles';
+import { tooltipDelay } from '../../../../utils/theme';
+import VerticalNavigationItemFlyoutMenu from './VerticalNavigationItemFlyoutMenu';
+var VerticalNavigationItem = function (props) {
+    var _a, _b, _c;
+    var theme = useTheme();
+    var label = props.label, icon = props.icon, onClick = props.onClick, isActive = props.isActive, children = props.children, isDrawerOpen = props.isDrawerOpen, index = props.index, hasFlyout = props.hasFlyout, fullHeightFlyout = props.fullHeightFlyout, isSecondary = props.isSecondary, content = props.content, style = props.style, rest = __rest(props, ["label", "icon", "onClick", "isActive", "children", "isDrawerOpen", "index", "hasFlyout", "fullHeightFlyout", "isSecondary", "content", "style"]);
+    var _d = React.useState(false), isExpanded = _d[0], setIsExpanded = _d[1];
+    var _e = React.useState(null), anchorEl = _e[0], setAnchorEl = _e[1];
+    var open = Boolean(anchorEl);
+    var handlePopoverOpen = function (event) {
+        if (open) {
+            handlePopoverClose();
+            return;
+        }
+        setAnchorEl(event === null || event === void 0 ? void 0 : event.currentTarget);
+    };
+    var handlePopoverClose = function () {
+        setAnchorEl(null);
+    };
+    var handleClick = function (event) {
+        if (fullHeightFlyout) {
+            handlePopoverOpen(event);
+            return;
+        }
+        if (children && children.length > 0) {
+            setIsExpanded(!isExpanded);
+            return;
+        }
+        if (onClick) {
+            onClick(event);
+        }
+        setAnchorEl(null);
+    };
+    return (_jsxs(ListItem, __assign({ disablePadding: true, style: style }, rest, { isDrawerOpen: isDrawerOpen }, { children: [_jsxs(ListItemButton
+            // @ts-expect-error
+            , __assign({ 
+                // @ts-expect-error
+                component: Link, onClick: handleClick, isActive: isActive, isDrawerOpen: isDrawerOpen, isExpanded: isExpanded, open: open, onMouseEnter: function (event) { return fullHeightFlyout
+                    ? null
+                    : handlePopoverOpen(event); }, onMouseLeave: function () { return fullHeightFlyout
+                    ? null
+                    : handlePopoverClose(); }, onFocus: function (event) { return fullHeightFlyout
+                    ? null
+                    : handlePopoverOpen(event); }, onBlur: function () { return fullHeightFlyout
+                    ? null
+                    : handlePopoverClose(); }, "aria-expanded": (children && children.length > 0) ? open : null, "aria-haspopup": (children && children.length > 0) ? 'true' : null, "aria-current": isActive ? 'page' : null, role: (children && children.length > 0) ? 'button' : 'link' }, { children: [_jsx(Tooltip, __assign({ disableHoverListener: (_a = (children && children.length > 0)) !== null && _a !== void 0 ? _a : isDrawerOpen, disableFocusListener: (_b = (children && children.length > 0)) !== null && _b !== void 0 ? _b : isDrawerOpen, disableTouchListener: (_c = (children && children.length > 0)) !== null && _c !== void 0 ? _c : isDrawerOpen, title: label, placement: theme.direction === 'rtl' ? 'left' : 'right', enterDelay: tooltipDelay.start, leaveDelay: tooltipDelay.end }, { children: _jsx(ListItemIcon, __assign({ "aria-hidden": true }, { children: icon !== null && icon !== void 0 ? icon : _jsx(MailIcon, {}) })) })), _jsx(ListItemText, { primary: label, isDrawerOpen: isDrawerOpen, index: index, sx: {
+                            '& .MuiTypography-root': {
+                                fontSize: isSecondary ? '14px' : 'inherit'
+                            }
+                        } }), children && children.length > 0 && (_jsx(Collapse, __assign({ component: 'div', in: isDrawerOpen ? isExpanded : false, timeout: "auto" }, { children: _jsx(List, __assign({ "aria-label": label, disablePadding: true }, { children: children.map(function (childItem, index) { return (_jsx(ListItem, __assign({ disablePadding: true, isDrawerOpen: isDrawerOpen }, { children: _jsxs(ListItemButtonChild
+                                // @ts-expect-error
+                                , __assign({ 
+                                    // @ts-expect-error
+                                    component: Link, index: index, isDrawerOpen: isDrawerOpen }, { children: [_jsx(ListItemIcon, { children: childItem.icon }), _jsx(ListItemText, { primary: childItem.label, isDrawerOpen: isDrawerOpen, sx: {
+                                                '& .MuiTypography-root': {
+                                                    fontSize: '14px !important',
+                                                    color: theme.palette.mode === 'dark'
+                                                        ? theme.palette.primary.contrastText
+                                                        : theme.palette.getContrastText(theme.palette.background.paper)
+                                                }
+                                            } })] }), label) }))); }) })) })))] }), label), !fullHeightFlyout && children && children.length > 0 && (!isExpanded || !isDrawerOpen) && (_jsx(VerticalNavigationItemFlyoutMenu, { isDrawerOpen: isDrawerOpen, anchorEl: anchorEl, open: open, children: children, label: label })), fullHeightFlyout && content && (_jsx(VerticalNavigationItemFlyoutMenu, { isDrawerOpen: isDrawerOpen, fullHeightFlyout: true, anchorEl: anchorEl, open: open, content: content }))] })));
+};
+export default VerticalNavigationItem;

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { IVerticalNavigationItemProps } from './VerticalNavigationItem';
+export interface IVerticalNavigationItemFlyoutMenuProps {
+    label?: string;
+    children?: IVerticalNavigationItemProps[];
+    isDrawerOpen?: boolean;
+    hasFlyout?: boolean;
+    content?: React.ReactElement;
+    style?: any;
+    fullHeightFlyout?: boolean;
+    anchorEl?: null | HTMLElement;
+    open?: boolean;
+}
+declare const VerticalNavigationItemFlyoutMenu: (props: IVerticalNavigationItemFlyoutMenuProps) => React.ReactElement;
+export default VerticalNavigationItemFlyoutMenu;