[Feature Request] Sidebar Explanation

[bartmika]

What is your enhancement?

I am trying to understand and sidebar and it's too complex - I cannot figure it out. It mixes routes, css, html and dynamic GUI code.

May I please request you dedicate a section to providing a simple static sidebar details so I can understand and then expand? I would like to know:

1. What is the minimal viable code I can use to create something simple.
2. What is copy+paste code that just makes it work quick

Thank you,

[bartmika]

Being able to work with the sidebar with a library like this would be awesome as it's easy to understand and use -> https://github.com/azouaoui-med/react-pro-sidebar

Here is the code I have so far. My goal is to have it easy-to-understand so I can modify: (1) I don't want the routes the way they are handled (2) I don't want the developer documentation in the nav (3) I want to make the code confirm to the container-component pattern.

import React from "react";
import { Link } from "react-router-dom";

// nodejs library that concatenates classes
import classnames from "classnames";

// react library that creates nice scrollbar on windows devices
import PerfectScrollbar from "react-perfect-scrollbar";

// reactstrap components
import {
  UncontrolledCollapse,
  DropdownMenu,
  DropdownItem,
  UncontrolledDropdown,
  NavbarBrand,
  Navbar,
  NavItem,
  NavLink,
  Nav,
  Container,
  Row,
  Col,
  Collapse
} from "reactstrap";

import { ProSidebar, Menu, MenuItem, SubMenu } from 'react-pro-sidebar';
import 'react-pro-sidebar/dist/css/styles.css';

export default function AppSidebarComponent(props) {
    // TODO: Fill in once understand rest of code.
    const {
    } = props;

    // Here is how we load in a logo.
    const logo = {
      innerLink: "/",
      imgSrc: require("assets/img/brand/argon-react.png"),
      imgAlt: "..."
    };
    let navbarBrandProps;
    if (logo && logo.innerLink) {
      navbarBrandProps = {
        to: logo.innerLink,
        tag: Link
      };
    } else if (logo && logo.outterLink) {
      navbarBrandProps = {
        href: logo.outterLink,
        target: "_blank"
      };
    }

    // Variables and functions we use.
    const sidenavOpen = true;
    const toggleSidenav = null;
    const onMouseEnterSidenav = null;
    const onMouseLeaveSidenav = null;

    // The contents of the scroll bar.
    const scrollBarInner = (
        <div className="scrollbar-inner">
            <div className="sidenav-header d-flex align-items-center">

               {logo ? (
                 <NavbarBrand {...navbarBrandProps}>
                   <img
                     alt={logo.imgAlt}
                     className="navbar-brand-img"
                     src={logo.imgSrc}
                   />
                 </NavbarBrand>
               ) : null}

               <div className="ml-auto">
                 <div
                   className={classnames("sidenav-toggler d-none d-xl-block", {
                     active: sidenavOpen
                   })}
                   onClick={toggleSidenav}
                 >
                   <div className="sidenav-toggler-inner">
                     <i className="sidenav-toggler-line" />
                     <i className="sidenav-toggler-line" />
                     <i className="sidenav-toggler-line" />
                   </div>
                 </div>
               </div>
               <div className="navbar-inner">
                    <Collapse navbar isOpen={true}>
                    {/*
                    <h6 className="navbar-heading p-0 text-muted">
                      <span className="docs-normal">Documentation</span>
                      <span className="docs-mini">D</span>
                    </h6>
                    */}
                    <Nav className="mb-md-3" navbar>
                      <NavItem>
                        <NavLink
                          href="https://demos.creative-tim.com/argon-dashboard-pro-react/#/documentation/overview?ref=adpr-sidebar"
                          target="_blank"
                        >
                          <i className="ni ni-spaceship" />
                          <span className="nav-link-text">Getting started</span>
                        </NavLink>
                      </NavItem>
                      </Nav>
                    </Collapse>
               </div>
            </div>
        </div>
    );

    // Render the component when state changes.
    return(
        <>
            <Navbar
              className={
                "sidenav navbar-vertical navbar-expand-xs navbar-light bg-white fixed-left"
              }
              onMouseEnter={onMouseEnterSidenav}
              onMouseLeave={onMouseLeaveSidenav}
            >
              {navigator.platform.indexOf("Win") > -1 ? (
                <PerfectScrollbar>{scrollBarInner}</PerfectScrollbar>
              ) : (
                scrollBarInner
              )}
            </Navbar>
        </>
    );
}

And I see the following.

[einazare]

Hello there, @bartmika ,

Thank you for your interest in working with our products. For questions 1 and 2, I can only help you if you open a ticket on our contact us form here: https://www.creative-tim.com/contact-us After that, I will share with you a code with the dynamic routes taken out, and static ones added instead - just one example, to redo the whole routes it would take us 1-2 working days (8-16 hours), and what you are asking of us, falls into custom development: https://www.creative-tim.com/support-terms But, for one example route, the time investment is not that big, so please open a ticket on our contact us form and I'll share with you a sample code.

For your 3rd question, I really do not understand what your requirement is, but if I understood something, is that it greatly falls outside of our support terms, and it falls quite in the custom development are. For this, please refer to our custom development teams here: https://services.creative-tim.com/

Best, Manu