Function SideBar

data-browser/src/components/SideBar.tsx:54–152

()

];

export function SideBar(): JSX.Element {
  const { baseURL } = useSettings();
  const history = useHistory();
  const { navbarTop, sideBarLocked, setSideBarLocked } = useSettings();
  const [ref, hoveringOverSideBar] = useHover<HTMLDivElement>(sideBarLocked);
  const windowSize = useWindowSize();

  const appMenuItems: MenuItemMinimial[] = React.useMemo(() => {
    return [
      {
        icon: <FaPlus />,
        label: 'new resource',
        helper: 'Create a new Resource, based on a Class (n)',
        onClick: () => {
          history.push(paths.new);
        },
      },
      {
        icon: <FaUser />,
        label: 'user settings',
        helper: 'See and edit the current Agent / User (u)',
        onClick: () => {
          history.push(paths.agentSettings);
        },
      },
      {
        icon: <FaCog />,
        label: 'theme settings',
        helper: 'Edit the theme, current Agent, and more. (t)',
        onClick: () => {
          history.push(paths.themeSettings);
        },
      },
      {
        icon: <FaKeyboard />,
        label: 'keyboard shortcuts',
        helper: 'View the keyboard shortcuts (?)',
        onClick: () => {
          history.push(paths.shortcuts);
        },
      },
      {
        icon: <FaInfo />,
        label: 'about',
        helper: 'Welcome page, tells about this app',
        onClick: () => {
          history.push(paths.about);
        },
      },
    ];
  }, []);

  const isWideScreen = React.useCallback(
    () => windowSize.width > SIDEBAR_TOGGLE_WIDTH,
    [windowSize],
  );

  /**