react-infinity-sidebar/src/App.jsx

A fully customizable and responsive sidebar component for React applications, built with TailwindCSS and Headless UI. Easily integrate dynamic navigation menus, dark mode, and various styling options. Designed for dashboards, admin panels, and modern web

import Sidebar from './navigation/Sidebar';
import routes from './navigation/routes';
import { sidebar_sections, profile_menu } from './components/sidebarLayouts/options';

function App() {

  // view info handler
  const viewInfoHandler = () => alert("The full documentation is provided at this link.");

  // exit handler
  const onExitHandler = () => alert("Do you really want to leave?");

  // profile dropdown event
  const profileDropdownHandler = (event, value) => {
    event.preventDefault(); // Oldini oladi
    console.log(value);

    if (value?.href === "/login") {
      // The logout code is written here.
    }
  }

  return (
    <div className='max-w-[2200px] m-auto'>
      <Sidebar
        user={{
          name: "Admin", // user name
          image: "", // default
        }}
        routes={routes} // routes
        sections={sidebar_sections} // sidebar section
        darkMode="#121212" // working with localstorage, name is darkMode (boolean type)
        sidebarOptions={{
          bgColor: "#171745", // default #012C6E, #171745, #1D2733, #1d2733, #222326, #2B2C41
          bgImage: "", // default
          logoInfo: {
            visibleLogo: true,
            image: "",
            width: "38px",
            height: "38px",
            borderRadius: "4px",
            textColor: "#fff",
            chevronLeftColor: "#fff",
            logoName: {
              visible: true,
              name: "Logo name",
              fontSize: "14px",
              info: "Welcome",
            },
          },
          sectionItem: {
            fontSize: "12px", // default
            bgColor: "#24246b", // default #002361, #24246b, #2A323E, #1c324d, #2c3140, #41415D
            darkMode: "#292727",
            textColor: "#fff",
            activeColor: "#FFB620",
            paddingY: "8px", // default
            paddingX: "14px", // default
            borderRadius: "7px", // default
            exit: {
              visible: true, // default
              name: "Exit",
              onExitHandler: onExitHandler
            },
          },
          info: {
            visible: true, // default
            bgColor: "#24246b", // default #002361
            content: {
              top: "Need help?", // default
              bottom: "Check out our documentation", // default
              btn: {
                bgColor: "white", // default
                textColor: "#012C6E",
                fontSize: "11px", // default
                name: "Documentation", // default
                viewInfoHandler: viewInfoHandler
              }
            }
          }
        }}
        navbarOptions={{
          visible: true, // default
          bgColor: "#fff", // default
          textColor: "#000", // default
          height: "50px", // default
          profileDropdownData: profile_menu,
          profileDropdownHandler: profileDropdownHandler,
        }}

      // user={props.user}
      // routes={props.routes} // routes navigation
      // sections={props.sections} // sidebar section
      // darkMode={props.darkMode} // working with localstorage, name is darkMode (boolean type)
      // sidebarOptions={props.sidebarOptions}
      // navbarOptions={props.navbarOptions}
      />
    </div>
  )
}

export default App;