@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