@prasiddha/react-appshell

@@prasiddha/react-appshell provides you with the base template for your application. It has navbar, sidebar and a section where your main app goes.

Installation

Use the package manager npm to install @prasiddha/react-image-loader.

npm install @prasiddha/react-appshell --save

Usage

With @prasiddha/react-appshell you can create a basic drawer layout instantly.

You can find the template for the App Shell at: https://github.com/Prasiddha22/react-appshell-tempate

import { AppShell } from '@prasiddha/react-appshell';

const App = () => {
  return (
    <AppShell
      sidebarOpen={sidebarOpen}
      sidebarBackgroundColor={'#f8fafb'}
      sidebarHeader={<SidebarHeader />}
      sidebarContent={<SidebarContent />}
      sidebarFooter={<SidebarFooter />}
      sidebarOpenedWidth={'300px'}
      sidebarClosedWidth={0}
      navbarContent={<NavContent />}
      navbarFullWidth={false}
    >
      {/* <AppPrimo /> */}
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Id atque dolorem
      doloremque ullam repellendus assumenda ratione eveniet, vel blanditiis vitae
      repellat neque inventore quaerat. Aperiam doloribus autem nihil alias veritatis!
    </AppShell>
  );
};

export default App;

Props

| Property | Required | Default value | Description | | :------------------------------------------------------------------------------------------------------------------------- | :------- | :------------ | :------------------------------------------------------------------------------------- | | navbarContent?: React.ReactNode | no | | Your navbar content | | navbarFullWidth?: boolean | no | false | Determine if the navbar will be of full width or not | | navbarPosition?: 'static' | 'relative' | 'absolute' | 'sticky' | 'fixed' | undefined | no | 'sticky' | | | sidebarBackgroundColor: string | no | white | Sidebar background color | | sidebarHeader?: React.ReactNode | no | | Sidebar Header | | sidebarContent: React.ReactNode | yes | | Main content of Sidebar | | sidebarFooter?: React.ReactNode | no | | Sidebar Footer | | sidebarOpenedWidth?: number | string | no | '250px' | Width when the sidebar is open | | sidebarClosedWidth?: number | string | no | '0px' | Width when the sidebar is close | | sidebarTransitionDuration?: number | no | 0.5 | transition duration for the sidebar open and close | | sidebarOpen: boolean | yes | true | sidebar open/close state | | sidebarBreakpoint?: 'sm' | 'md' | 'lg' | 'xl' | no | 'sm' | breakpoint where sidebar will be detached from the main body and acts more like drawer |

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

MIT