7cc162c57c
* feat(console-lite): add nav icons * feat(console-lite): refactor resizing into reusable hook * feat(console-lite): refactor navigation drawer * feat(console-lite): add blue colour to theme-lite.js * feat(console-lite): remove liquidity from nav items * feat(console-lite): make style changes to navbar and add tab-bar for mobile * chore(console-lite): change div to aside * fix(console-lite): drawer left to right mode on mobile * fix(console-lite): add missing className prop to drawer-wrapper.tsx * feat(console-lite): add accessibility related changes * fix(console-lite): fix linting errors * fix(console-lite): fix failing test and add extra accessibility label * refactor(console-lite): refactor conditional classNames * refactor(console-lite): move useResize to react-helpers library * refactor(console-lite): refactor sun and moon classNames * fix(console-lite): fix broken e2e tests
42 lines
993 B
TypeScript
42 lines
993 B
TypeScript
import React from 'react';
|
|
import { useRoutes } from 'react-router-dom';
|
|
import {
|
|
NavigationDrawer,
|
|
DrawerWrapper,
|
|
DrawerContent,
|
|
DrawerToggle,
|
|
DRAWER_TOGGLE_VARIANTS,
|
|
} from '../drawer';
|
|
import { Nav, TabBar } from '../nav';
|
|
import { routerConfig } from '../../routes/router-config';
|
|
|
|
export interface RouteChildProps {
|
|
name: string;
|
|
}
|
|
|
|
export const AppRouter = () => useRoutes(routerConfig);
|
|
|
|
interface Props {
|
|
onToggle(): void;
|
|
isMenuOpen: boolean;
|
|
}
|
|
|
|
export const Main = ({ onToggle, isMenuOpen }: Props) => {
|
|
return (
|
|
<DrawerWrapper>
|
|
<NavigationDrawer rtl onToggle={onToggle} isMenuOpen={isMenuOpen}>
|
|
<DrawerToggle
|
|
onToggle={onToggle}
|
|
variant={DRAWER_TOGGLE_VARIANTS.CLOSE}
|
|
className="p-16"
|
|
/>
|
|
<Nav className="hidden md:block my-20 h-full" />
|
|
</NavigationDrawer>
|
|
<DrawerContent>
|
|
<AppRouter />
|
|
<TabBar className="md:hidden" />
|
|
</DrawerContent>
|
|
</DrawerWrapper>
|
|
);
|
|
};
|