Dashboard: Aside menu

src/components/Examples/pages/Dashboard/Dashboard.tsx

@@ -1,37 +1,44 @@
-import {Button, Flex, Icon, Link, Text} from '@gravity-ui/uikit';
+import {Link, ThemeProvider} from '@gravity-ui/uikit';
+import React from 'react';
 
-import figmaIcon from '../../../../assets/icons/figma-fill.svg';
 import {block} from '../../../../utils';
 
 const b = block('examples-dashboard');
 import './Dashboard.scss';
+import {AsideHeader, FooterItem} from '@gravity-ui/navigation';
+import {footerMenuItems, menuItems} from './constants';
 
 type DashboardProps = {};
 
+const theme = 'dark';
+
 // @todo-opensourcenight Make dashboard page
 // https://www.figma.com/design/MnKaEyxPs9Zeyhg6pmf4uX/OS-Night-Design-(Published)?node-id=1-20362&t=cBOGiZgT0jwhnCOY-4
 export const Dashboard: React.FC<DashboardProps> = () => {
+    const [compact, setCompact] = React.useState(false);
+
     return (
         <div className={b()}>
             <main className={b('main')}>
-                <Text variant="code-3">
-                    <Flex direction="row" justifyContent="space-between">
-                        <span>@todo-opensourcenight make dashboard page</span>
-                        <Button
-                            key="figma"
-                            className={b('button')}
-                            view="action"
-                            size="xl"
-                            href={
-                                'https://www.figma.com/design/MnKaEyxPs9Zeyhg6pmf4uX/OS-Night-Design-(Published)?node-id=1-20362&t=cBOGiZgT0jwhnCOY-4'
-                            }
-                            target="_blank"
-                        >
-                            <Icon className={b('button-icon')} data={figmaIcon} size={16} />
-                            <span>Open Figma</span>
-                        </Button>
-                    </Flex>
-                </Text>
+                <ThemeProvider theme={theme} scoped>
+                    <AsideHeader
+                        compact={compact}
+                        logo={{text:'Gravity B2B'}}
+                        menuItems={menuItems}
+                        renderFooter={({compact}) => (
+                            <React.Fragment>
+                                {footerMenuItems.map(item => (
+                                    <FooterItem
+                                        key={item.id}
+                                        item={item}
+                                        compact={compact}
+                                    />
+                                ))}
+                            </React.Fragment>
+                        )}
+                        onChangeCompact={setCompact}
+                    />
+                </ThemeProvider>
             </main>
             <footer className={b('footer')}>
                 <Link href={'/examples'}>Open in Examples page</Link>

src/components/Examples/pages/Dashboard/constants.tsx

@@ -0,0 +1,98 @@
+import {
+    ArrowsOppositeToDots,
+    ChartMixed,
+    ChartPie,
+    Comment,
+    Comments,
+    Cubes3Overlap,
+    Envelope,
+    Gear,
+    LayoutHeaderCells,
+    Person,
+    PersonMagnifier,
+    Persons,
+    ShoppingCart
+} from '@gravity-ui/icons';
+import {MenuItem} from '@gravity-ui/navigation';
+
+export const menuItems: MenuItem[] = [
+    {
+        id: 'dashboard',
+        title: 'Dashboard',
+        icon: LayoutHeaderCells,
+        current: true
+    },
+    {
+        id: 'products',
+        title: 'Products',
+        icon: Cubes3Overlap
+    },
+    {
+        id: 'order',
+        title: 'Order',
+        icon: ShoppingCart
+    },
+    {
+        id: 'customers',
+        title: 'Customers',
+        icon: PersonMagnifier
+    },
+    {
+        id: 'chat',
+        title: 'Chat',
+        icon: Comments,
+    },
+    {
+        id: 'divider',
+        title: '-',
+        type: 'divider',
+    },
+    {
+        id: 'email',
+        title: 'Email',
+        icon: Envelope,
+    },
+    {
+        id: 'analytics',
+        title: 'Analytics',
+        icon: ChartPie,
+    },
+    {
+        id: 'integration',
+        title: 'Integration',
+        icon: ArrowsOppositeToDots,
+    },
+    {
+        id: 'performance',
+        title: 'Performance',
+        icon: ChartMixed,
+    },
+    {
+        id: 'divider',
+        title: '-',
+        type: 'divider',
+    },
+    {
+        id: 'account',
+        title: 'Account',
+        icon: Person,
+    },
+    {
+        id: 'members',
+        title: 'Members',
+        icon: Persons,
+    },
+];
+
+export const footerMenuItems: MenuItem[] = [
+    {
+        id: 'feedback',
+        title: 'Feedback',
+        icon: Comment
+    },
+    {
+        id: 'settings',
+        title: 'Settings',
+        icon: Gear
+    },
+];