@cthacker/next-sidebar

NextJs compliant Sidebar Component.

* Uses FontAwesome CDN link to render <i /> icons in the sidebar links

Benefits:

• Compatible with NextJS 13+
• Easier-to-read code with optional props for customization
• Lots of customization options, with less of the component bloat

Specifications

• Language
  • Typescript
• Framework
  • React >18+
  • NextJS >13+

Props Descriptions

• includeImage boolean
  • Whether to include an image in the top sidebar, useful for company websites
• imageSrc string
  • The src of the image if included
• imageTitle string
  • The title of the image if included, text is displayed underneath the image in a slightly smaller font
• links SideBarLink[]
  • The associated links you want displayed in the sidebar component

SideBarLink (Type)

• content ReactNode
  • The content of the link (usually just text)
• iconLink string
  • The font-awesome tag, used to render the respective icon next to the link text.
• hasAccess boolean
  • Whether the current user has access to the link, used for roles, authorization, etc
• href string
  • The href link appended to the anchor tag in the link
• onClick (_link: string) => void | Promise
  • The onClick callback that is fired when the link is clicked, with the link auto-populated into the parameter