dashboard component AsideNav removed; dashboard component ContentSidebar added

src/core/modules/components/dashboard/AsideNav.jsx

@@ -1,47 +0,0 @@
-/**
- * 
- * @component
- */
-
-import { joinClassNames } from '@vizality/util/dom';
-import React, { memo, useState } from 'react';
-import { getModule } from '@vizality/webpack';
-import { Icon } from '@vizality/components';
-
-export default memo(({ type, heading, sections }) => {
-  const [ collapsed, setCollapsed ] = useState(false);
-  const { auto, fade } = getModule('thin', 'scrollerBase');
-
-  if (type === 'Components' || type === 'Getting Started') {
-    heading = type;
-    if (type === 'Components') {
-      sections = [ 'Button', 'Button Group', 'Checkbox', 'Select', 'Slider', 'Switch', 'Text' ];
-    }
-  }
-
-  return (
-    <div className={joinClassNames('vz-aside-nav', { collapsed })}>
-      <Icon
-        className='vz-aside-nav-collapser'
-        iconClassName='vz-aside-nav-collapser-icon'
-        onClick={() => setCollapsed(false)}
-        name='ArrowLeft'
-      />
-      <div className='vz-aside-nav-inner'>
-        <div className='vz-aside-nav-header'>
-          <div>{heading}</div>
-          <Icon
-            className='vz-aside-nav-header-icon-wrapper'
-            iconClassName='vz-aside-nav-header-icon'
-            onClick={() => setCollapsed(true)}
-            style={{ transform: 'rotate(180deg)' }}
-            name='ArrowLeft'
-          />
-        </div>
-        <div className={joinClassNames('vz-aside-nav-items', auto, fade)}>
-          {sections && sections.map(section => <div className='vz-aside-nav-item'>{section}</div>)}
-        </div>
-      </div>
-    </div>
-  );
-});

src/core/modules/components/dashboard/ContentSidebar.jsx

@@ -0,0 +1,60 @@
+import { joinClassNames } from '@vizality/util/dom';
+import { getModule } from '@vizality/webpack';
+import { useToggle } from '@vizality/hooks';
+import { motion } from 'framer-motion';
+import React, { memo } from 'react';
+
+import { Tooltip } from '..';
+import { Sidebar } from '.';
+
+/**
+ * Content sidebar that can be used as a side navigation or to hold content.
+ * @component
+ * @returns {React.MemoExoticComponent<function(): React.ReactElement>}
+ */
+export default memo(({ header, side = 'right', children, className }) => {
+  const [ collapsed, toggleCollapsed ] = useToggle(false);
+  const { auto, fade } = getModule('thin', 'scrollerBase');
+  const { header: headerClass } = getModule('header', 'separator', 'side', 'top');
+  return (
+    <motion.div layout className={joinClassNames('vz-dashboard-content-sidebar', className, { test: collapsed })}>
+      <Tooltip text={collapsed ? 'Expand' : 'Collapse'}>
+        <div className='vz-dashboard-content-sidebar-expander' onClick={toggleCollapsed} />
+      </Tooltip>
+      <div className='vz-dashboard-content-sidebar-inner'>
+        <div className='vz-dashboard-content-sidebar-header-wrapper'>
+          <div className={joinClassNames('vz-dashboard-content-sidebar-header', headerClass)}>
+            {header}
+          </div>
+          <Tooltip text={collapsed ? 'Expand' : 'Collapse'}>
+            <div className='vz-dashboard-content-sidebar-collapser' onClick={toggleCollapsed} />
+          </Tooltip>
+        </div>
+        <div className={joinClassNames('vz-dashboard-content-sidebar-items', auto, fade)}>
+          {children}
+        </div>
+      </div>
+    </motion.div>
+  );
+});
+
+/**
+ * Content sidebar navigation item.
+ * @component
+ * @returns {React.MemoExoticComponent<function(): React.ReactElement>}
+ */
+export const NavItem = memo(props => {
+  const { icon, route, selected, onClick, children, className } = props;
+  return (
+    <Sidebar.Item
+      {...props}
+      icon={icon}
+      route={route}
+      className={joinClassNames('vz-dashboard-content-sidebar-item-wrapper', className)}
+      selected={selected}
+      onClick={onClick}
+    >
+      {children}
+    </Sidebar.Item>
+  );
+});

src/core/modules/components/dashboard/index.js

@@ -1,7 +1,7 @@
 export { default as SidebarSeparator } from './SidebarSeparator';
+export { default as ContentSidebar } from './ContentSidebar';
 export { default as SidebarHeader } from './SidebarHeader';
 export { default as SidebarItem } from './SidebarItem';
-export { default as AsideNav } from './AsideNav';
 export { default as Content } from './Content';
 export { default as Section } from './Section';
 export { default as Sidebar } from './Sidebar';
@@ -9,6 +9,7 @@ export { default as Layout } from './Layout';
 
 import { Header as SidebarHeader, Item as SidebarItem, Separator as SidebarSeparator } from './Sidebar';
 import { Header as SectionHeader } from './Section';
+import { NavItem } from './ContentSidebar';
 
 this.Sidebar.Separator = SidebarSeparator;
 this.Sidebar.Header = SidebarHeader;
@@ -16,3 +17,4 @@ this.Sidebar.Item = SidebarItem;
 
 this.Section.Header = SectionHeader;
 
+this.ContentSidebar.NavItem = NavItem;