JW
Jamie Wallis

Sidebar Navigation - Copy this React, Tailwind Component to your project

Actually let's change the layout of the sidebar to Toggle button, Nav Links (top) then Logo then more Nav Links (bottom) then Footer. Toggle button just hides sidebar, Nav links (top) is Dashboard with home icon and bold text. Then Chat > which whe selected expands to sub-menu: Simple Chat --> /chat/simplechat , multi Chat --> chat/multichat and create chatter --> create chatter wizard. Theb logo from here: https://i.ibb.co/g31fnvH/Transparent-logo.png such that it fills the width with only 5px padding. Nav links (bottom) Prompts > which expands to show sub-menu (prompt generator --> proompt generator wizard, prompt library and compare multiple chaters --> prompts/multiresponse and then nav links for accounts & billing and finally logout. Leave sidebar footer blank. Sidebar should sit ubnderneath main top navbar so shoud have top margin same as top nav depth.

Prompt
Component Preview

About

SidebarNavigation - A responsive sidebar with grouped links for Dashboard, Chat, Prompts, and Account, featuring icons and expandable. Get instant access!

Share

Last updated 1 month ago