Thanks to our Design Team, we have Basable initial dashboard page ready! So we need a volunteer to help design the Dashboard layout. **You will ONLY develop the topbar and side navigation for this layout.
How To Contribute
Install Project
If you haven't cloned/forkd the project, please follow these steps:
Fork the project and clone your version.
Go to landing directory cd basable/web.
Install dependencies using your favorite package manager: npm install.
If you already cloned the project before, just pull the latest changes from upstream.
Development Guide
Develop the DashboardHeader and DashboardNav components and put them a basable/web/src/components/common folder.
Create a layout component DashboardLayout in web/src/layouts.
Import DashboardHeader and DashboardNav into DashboardLayout.
Add DashboardLayout to routes in App.tsx with the path: /dashboard
While we provide figma design for the desktop view, we leave the responsiveness of this layout to your discretion.
Things to Note
Please use Typescript (.tsx) for your components.
We use React MUI library for theming and to hasten development.
If you're using MUI's ThemeProvider, you should provide the custom theme from web/src/theme.ts.
Thanks to our Design Team, we have Basable initial dashboard page ready! So we need a volunteer to help design the Dashboard layout. **You will ONLY develop the topbar and side navigation for this layout.
How To Contribute
Install Project
If you haven't cloned/forkd the project, please follow these steps:
cd basable/web.npm install.If you already cloned the project before, just pull the latest changes from upstream.
Development Guide
DashboardHeaderandDashboardNavcomponents and put them abasable/web/src/components/commonfolder.DashboardLayoutinweb/src/layouts.DashboardHeaderandDashboardNavintoDashboardLayout.DashboardLayoutto routes inApp.tsxwith the path:/dashboardThings to Note
web/src/theme.ts.To access figma file or if you have any question, please join us on slack.