style: update dashboard responsiveness

src/components/Charts/InsightsChart/InsightsChart.tsx

@@ -23,7 +23,7 @@ ChartJS.register(
 export const options = {
 	plugins: {
 		title: {
-			display: true,
+			display: false,
 			text: 'Chart.js Bar Chart - Stacked',
 		},
 	},

src/components/ui/AppHeader/AppHeader.tsx

@@ -2,21 +2,34 @@ import { Flex } from '../Flex';
 import * as stylex from '@stylexjs/stylex';
 import { styles } from './AppHeader.styles.ts';
 import { IconButton } from '../IconButton';
-import { BellIcon, SearchIcon } from 'lucide-react';
+import { BellIcon, MenuIcon, SearchIcon } from 'lucide-react';
 import { UserProfile } from '../../UserProfile';
+import { useMediaQuery } from 'react-responsive';
+import { spacing } from '../../../token.stylex.ts';
 
 export type AppHeaderProps = {
+	toggleMenu: () => void;
 	h?: stylex.StyleXStyles<{ height?: string | number }>;
 	sx?: stylex.StyleXStyles;
 };
 
 export const AppHeader = (props: AppHeaderProps) => {
-	const { sx, h = 60 } = props;
+	const { toggleMenu, sx, h = 60 } = props;
+	const isDesktopOrLaptop = useMediaQuery({
+		query: '(min-width: 1224px)',
+	});
 
 	return (
 		<div {...stylex.props(styles.base, styles.h(h), sx)}>
-			<h5 {...stylex.props(styles.pageName)}>dashboard</h5>
-			<Flex sx={styles.controls}>
+			<Flex align="center">
+				{!isDesktopOrLaptop && (
+					<IconButton onClick={toggleMenu}>
+						<MenuIcon />
+					</IconButton>
+				)}
+				<h5 {...stylex.props(styles.pageName)}>dashboard</h5>
+			</Flex>
+			<Flex align="center" gap={spacing['2']}>
 				<IconButton>
 					<SearchIcon size={18} />
 				</IconButton>

src/components/ui/Card/Card.styles.ts

@@ -22,7 +22,7 @@ export const styles = stylex.create({
 	text: {},
 	title: {
 		fontSize: fontSizes.h5,
-		margin: `0 0 ${spacing['3']} 0`,
+		margin: 0,
 		fontWeight: 500,
 	},
 	subtitle: {

src/components/ui/Card/Card.tsx

@@ -2,6 +2,7 @@ import * as stylex from '@stylexjs/stylex';
 import { ComponentProps, ReactNode } from 'react';
 import { styles } from './Card.styles.ts';
 import { BaseProps, IShadows } from '../../../types';
+import { Flex } from '../Flex';
 
 export type CardProps = {
 	w?: stylex.StyleXStyles<{ width?: string | number }>;
@@ -43,14 +44,14 @@ export const Card = (props: CardProps) => {
 			)}
 			{...others}
 		>
-			<div {...stylex.props(styles.header)}>
+			<Flex align="center" justify="between">
 				<div {...stylex.props(styles.title)}>
 					{header}
 					{title}
 					{subtitle}
 				</div>
 				{extra}
-			</div>
+			</Flex>
 			<div {...stylex.props(styles.body)}>{others.children}</div>
 			<div {...stylex.props(styles.footer)}>{footer}</div>
 		</article>

src/components/ui/Drawer/Drawer.styles.ts

@@ -78,6 +78,10 @@ export const styles = stylex.create({
 		position: 'absolute',
 		top: '10px',
 		right: '10px',
+		color: {
+			default: 'black',
+			[DARK]: 'white',
+		},
 	},
 	w: (width) => ({
 		width,

src/components/ui/Drawer/Drawer.tsx

@@ -5,11 +5,12 @@ import { XIcon } from 'lucide-react';
 import { BaseProps } from '../../../types';
 import { styles } from './Drawer.styles.ts';
 import { IconButton } from '../IconButton';
+import { ReactNode } from 'react';
 
 const { Root, Portal, Overlay, Content, Title, Description } = Dialog;
 
 export type DrawerProps = {
-	title: string;
+	title: ReactNode;
 	description?: string;
 	w?: string | number;
 } & DialogProps &

src/components/ui/List/List.styles.ts

@@ -1,9 +1,12 @@
 import * as stylex from '@stylexjs/stylex';
-import { tokens } from '../../../token.stylex.ts';
+import { spacing, tokens } from '../../../token.stylex.ts';
 
 export const styles = stylex.create({
 	base: {
 		backgroundColor: tokens.primaryBg,
 	},
-	item: {},
+	item: {
+		padding: `${spacing['2']} 0`,
+		borderBottom: `1px solid ${tokens.grayBorder}`,
+	},
 });

src/components/ui/NavLink/NavLink.styles.ts

@@ -21,5 +21,6 @@ export const styles = stylex.create({
 	},
 	active: {
 		backgroundColor: tokens.primaryBgActive,
+		textDecoration: 'underline',
 	},
 });

src/components/ui/NavLink/NavLink.tsx

@@ -2,15 +2,16 @@ import * as stylex from '@stylexjs/stylex';
 import { ComponentProps, ReactNode } from 'react';
 import { Link } from 'wouter';
 import { styles } from './NavLink.styles.ts';
+import { BaseProps } from '../../../types';
 
 export type NavLinkProps = {
 	href: string;
 	label: string;
 	active?: boolean;
 	leftSection?: ReactNode;
 	rightSection?: ReactNode;
-	sx?: stylex.StyleXStyles;
-} & ComponentProps<'div'>;
+} & ComponentProps<'div'> &
+	BaseProps;
 
 export const NavLink = (props: NavLinkProps) => {
 	const { label, leftSection, rightSection, href, active, sx, ...others } =

src/components/ui/NavSidebar/NavSidebar.tsx

@@ -1,17 +1,17 @@
 import { Flex } from '../Flex';
 import { Logo } from '../../Logo';
 import {
+	BarChart2Icon,
 	LayoutDashboardIcon,
-	SettingsIcon,
 	PieChartIcon,
-	BarChart2Icon,
+	SettingsIcon,
 } from 'lucide-react';
 import { PATH_APP } from '../../../constants/routes.ts';
 import { NavLink } from '../NavLink';
 import * as stylex from '@stylexjs/stylex';
 import { styles } from './NavSidebar.styles.ts';
 
-const LINKS = [
+export const LINKS = [
 	{
 		title: 'home',
 		icon: <LayoutDashboardIcon />,
@@ -24,7 +24,7 @@ const LINKS = [
 ];
 
 export type NavSidebarProps = {
-	w?: stylex.StyleXStyles<{ width?: string | number }>;
+	w?: string | number;
 	sx?: stylex.StyleXStyles;
 };
 

src/components/ui/Select/Select.tsx

@@ -46,7 +46,6 @@ export const Select = ({
 		<Root
 			value={value}
 			onValueChange={(e) => {
-				console.log(e);
 				setValue(e);
 				if (onChange) {
 					onChange(e);

src/components/ui/Table/Table.tsx

@@ -150,24 +150,28 @@ export function Table<TData, TValue>({
 					<IconButton
 						onClick={() => table.setPageIndex(0)}
 						disabled={!table.getCanPreviousPage()}
+						variant="outline"
 					>
 						<ChevronFirstIcon size={16} />
 					</IconButton>
 					<IconButton
 						onClick={() => table.previousPage()}
 						disabled={!table.getCanPreviousPage()}
+						variant="outline"
 					>
 						<ChevronLeftIcon size={16} />
 					</IconButton>
 					<IconButton
 						onClick={() => table.nextPage()}
 						disabled={!table.getCanNextPage()}
+						variant="outline"
 					>
 						<ChevronRightIcon size={16} />
 					</IconButton>
 					<IconButton
 						onClick={() => table.setPageIndex(table.getPageCount() - 1)}
 						disabled={!table.getCanNextPage()}
+						variant="outline"
 					>
 						<ChevronLastIcon size={16} />
 					</IconButton>

src/layout/App/App.styles.ts

@@ -1,6 +1,8 @@
 import * as stylex from '@stylexjs/stylex';
 import { spacing, tokens } from '../../token.stylex.ts';
 
+const DARK = '@media (prefers-color-scheme: dark)';
+
 export const styles = stylex.create({
 	base: {
 		backgroundColor: tokens.primaryBase,
@@ -23,4 +25,24 @@ export const styles = stylex.create({
 		padding: `${spacing['2']} ${spacing['4']}`,
 		width: `calc(100% - 300px)`,
 	},
+	children: {
+		padding: `${spacing['4']} 0`,
+	},
+	w: (width) => ({
+		width,
+	}),
+	mobileLink: {
+		color: {
+			default: 'black',
+			[DARK]: 'white',
+		},
+		paddingLeft: 0,
+
+		':hover': {
+			textDecoration: 'underline',
+		},
+	},
+	mobileLinkActive: {
+		textDecoration: 'underline',
+	},
 });

src/layout/App/App.tsx

@@ -1,20 +1,52 @@
-import { ReactNode } from 'react';
+import { ReactNode, useState } from 'react';
 import * as stylex from '@stylexjs/stylex';
+import {
+	AppHeader,
+	Drawer,
+	Flex,
+	NavLink,
+	NavSidebar,
+} from '../../components/ui';
+import { useMediaQuery } from 'react-responsive';
+import { LINKS } from '../../components/ui/NavSidebar/NavSidebar.tsx';
+import { Logo } from '../../components/Logo';
+import { Container } from 'react-grid-system';
 import { styles } from './App.styles.ts';
-import { AppHeader, NavSidebar } from '../../components/ui';
 
 type AppLayoutProps = { children: ReactNode };
 
 export const App = ({ children }: AppLayoutProps) => {
+	const isDesktopOrLaptop = useMediaQuery({
+		query: '(min-width: 1224px)',
+	});
+	const [menuOpened, setMenuOpened] = useState(false);
+
 	return (
-		<div {...stylex.props(styles.base)}>
-			<NavSidebar sx={styles.sidebar} />
-			<div {...stylex.props(styles.main)}>
-				<div {...stylex.props(styles.header)}>
-					<AppHeader />
+		<>
+			<div {...stylex.props(styles.base)}>
+				{isDesktopOrLaptop && <NavSidebar sx={styles.sidebar} />}
+				<div {...stylex.props(styles.main, styles.w('100%'))}>
+					<Container fluid {...stylex.props(styles.header)}>
+						<AppHeader toggleMenu={() => setMenuOpened(!menuOpened)} />
+					</Container>
+					<Container fluid {...stylex.props(styles.children)}>
+						{children}
+					</Container>
 				</div>
-				{children}
 			</div>
-		</div>
+			<Drawer title={<Logo />} open={menuOpened} onOpenChange={setMenuOpened}>
+				<Flex direction="column">
+					{LINKS.map((link) => (
+						<NavLink
+							key={link.title}
+							href={link.href}
+							label={link.title}
+							active={!!link.active}
+							sx={styles.mobileLink}
+						/>
+					))}
+				</Flex>
+			</Drawer>
+		</>
 	);
 };