refactor(sidebar): migrate sidebar to react [EE-2907] (#6725)

* refactor(sidebar): migrate sidebar to react [EE-2907]

fixes [EE-2907]

feat(sidebar): show label for help

fix(sidebar): apply changes from ddExtension

fix(sidebar): resolve conflicts

style(ts): add explanation for ddExtension

fix(sidebar): use enum for status

refactor(sidebar): rename to EdgeComputeSidebar

refactor(sidebar): removed the need of `ident` prop

style(sidebar): add ref for mobile breakpoint

refactor(app): document testing props

refactor(sidebar): use single sidebar item

refactor(sidebar): use section for nav

refactor(sidebar): rename sidebarlink to link

refactor(sidebar): memoize menu paths

fix(kubectl-shell): infinite loop on hooks dependencies

refactor(sidebar): use authorized element

feat(k8s/shell): track open shell

refactor(k8s/shell): remove memoization

refactor(settings): move settings queries to queries

fix(sidebar): close sidebar on mobile

refactor(settings): use mutation helpers

refactor(sidebar): remove memo

refactor(sidebar): rename sidebar item for storybook

refactor(sidebar): move to react

gprefactor(sidebar): remove dependence on EndProvider

feat(environments): rename settings type

feat(kube): move kubeconfig button

fix(sidebar): open submenus

fix(sidebar): open on expand

fix(sibebar): show kube shell correctly

* fix(sidebar): import from react component

* chore(tests): fix missing prop

app/react/sidebar/AzureSidebar/AzureSidebar.test.tsx

@@ -0,0 +1,42 @@
+import { UserContext } from '@/portainer/hooks/useUser';
+import { UserViewModel } from '@/portainer/models/user';
+import { render, within } from '@/react-tools/test-utils';
+
+import { AzureSidebar } from './AzureSidebar';
+
+test('dashboard items should render correctly', () => {
+  const { getByLabelText } = renderComponent();
+  const dashboardItem = getByLabelText('Dashboard');
+  expect(dashboardItem).toBeVisible();
+  expect(dashboardItem).toHaveTextContent('Dashboard');
+
+  const dashboardItemElements = within(dashboardItem);
+  expect(dashboardItemElements.getByLabelText('itemIcon')).toBeVisible();
+  expect(dashboardItemElements.getByLabelText('itemIcon')).toHaveClass(
+    'fa-tachometer-alt',
+    'fa-fw'
+  );
+
+  const containerInstancesItem = getByLabelText(/Container Instances/i);
+  expect(containerInstancesItem).toBeVisible();
+  expect(containerInstancesItem).toHaveTextContent('Container instances');
+
+  const containerInstancesItemElements = within(containerInstancesItem);
+  expect(
+    containerInstancesItemElements.getByLabelText('itemIcon')
+  ).toBeVisible();
+  expect(containerInstancesItemElements.getByLabelText('itemIcon')).toHaveClass(
+    'fa-cubes',
+    'fa-fw'
+  );
+});
+
+function renderComponent() {
+  const user = new UserViewModel({ Username: 'user' });
+
+  return render(
+    <UserContext.Provider value={{ user }}>
+      <AzureSidebar environmentId={1} />
+    </UserContext.Provider>
+  );
+}

app/react/sidebar/AzureSidebar/AzureSidebar.tsx

@@ -0,0 +1,26 @@
+import { EnvironmentId } from '@/portainer/environments/types';
+
+import { SidebarItem } from '../SidebarItem';
+
+interface Props {
+  environmentId: EnvironmentId;
+}
+
+export function AzureSidebar({ environmentId }: Props) {
+  return (
+    <>
+      <SidebarItem
+        to="azure.dashboard"
+        params={{ endpointId: environmentId }}
+        iconClass="fa-tachometer-alt fa-fw"
+        label="Dashboard"
+      />
+      <SidebarItem
+        to="azure.containerinstances"
+        params={{ endpointId: environmentId }}
+        iconClass="fa-cubes fa-fw"
+        label="Container instances"
+      />
+    </>
+  );
+}

app/react/sidebar/AzureSidebar/index.ts

@@ -0,0 +1 @@
+export { AzureSidebar } from './AzureSidebar';

app/react/sidebar/DockerSidebar.tsx

@@ -0,0 +1,175 @@
+import {
+  type Environment,
+  type EnvironmentId,
+  EnvironmentStatus,
+} from '@/portainer/environments/types';
+import {
+  Authorized,
+  useUser,
+  isEnvironmentAdmin,
+} from '@/portainer/hooks/useUser';
+import { useInfo, useVersion } from '@/docker/services/system.service';
+
+import { SidebarItem } from './SidebarItem';
+
+interface Props {
+  environmentId: EnvironmentId;
+  environment: Environment;
+}
+
+export function DockerSidebar({ environmentId, environment }: Props) {
+  const { user } = useUser();
+  const isAdmin = isEnvironmentAdmin(user, environmentId);
+
+  const areStacksVisible =
+    isAdmin || environment.SecuritySettings.allowStackManagementForRegularUsers;
+
+  const envInfoQuery = useInfo(
+    environmentId,
+    (info) => !!info.Swarm?.NodeID && !!info.Swarm?.ControlAvailable
+  );
+
+  const envVersionQuery = useVersion(environmentId, (version) =>
+    parseFloat(version.ApiVersion)
+  );
+
+  const isSwarmManager = envInfoQuery.data;
+  const apiVersion = envVersionQuery.data || 0;
+
+  const offlineMode = environment.Status === EnvironmentStatus.Down;
+
+  const setupSubMenuProps = isSwarmManager
+    ? {
+        label: 'Swarm',
+        iconClass: 'fa-object-group fa-fw',
+        to: 'docker.swarm',
+      }
+    : {
+        label: 'Host',
+        iconClass: 'fa-th fa-fw',
+        to: 'docker.host',
+      };
+
+  return (
+    <>
+      <SidebarItem
+        to="docker.dashboard"
+        params={{ endpointId: environmentId }}
+        iconClass="fa-tachometer-alt fa-fw"
+        label="Dashboard"
+      />
+
+      {!offlineMode && (
+        <SidebarItem
+          label="App Templates"
+          iconClass="fa-rocket fa-fw"
+          to="docker.templates"
+          params={{ endpointId: environmentId }}
+        >
+          <SidebarItem
+            label="Custom Templates"
+            to="docker.templates.custom"
+            params={{ endpointId: environmentId }}
+          />
+        </SidebarItem>
+      )}
+
+      {areStacksVisible && (
+        <SidebarItem
+          to="docker.stacks"
+          params={{ endpointId: environmentId }}
+          iconClass="fa-th-list fa-fw"
+          label="Stacks"
+        />
+      )}
+
+      {isSwarmManager && (
+        <SidebarItem
+          to="docker.services"
+          params={{ endpointId: environmentId }}
+          iconClass="fa-list-alt fa-fw"
+          label="Services"
+        />
+      )}
+
+      <SidebarItem
+        to="docker.containers"
+        params={{ endpointId: environmentId }}
+        iconClass="fa-cubes fa-fw"
+        label="Containers"
+      />
+
+      <SidebarItem
+        to="docker.images"
+        params={{ endpointId: environmentId }}
+        iconClass="fa-clone fa-fw"
+        label="Images"
+      />
+
+      <SidebarItem
+        to="docker.networks"
+        params={{ endpointId: environmentId }}
+        iconClass="fa-sitemap fa-fw"
+        label="Networks"
+      />
+
+      <SidebarItem
+        to="docker.volumes"
+        params={{ endpointId: environmentId }}
+        iconClass="fa-hdd fa-fw"
+        label="Volumes"
+      />
+
+      {apiVersion >= 1.3 && isSwarmManager && (
+        <SidebarItem
+          to="docker.configs"
+          params={{ endpointId: environmentId }}
+          iconClass="fa-file-code fa-fw"
+          label="Configs"
+        />
+      )}
+
+      {apiVersion >= 1.25 && isSwarmManager && (
+        <SidebarItem
+          to="docker.secrets"
+          params={{ endpointId: environmentId }}
+          iconClass="fa-user-secret fa-fw"
+          label="Secrets"
+        />
+      )}
+
+      {!isSwarmManager && isAdmin && !offlineMode && (
+        <SidebarItem
+          to="docker.events"
+          params={{ endpointId: environmentId }}
+          iconClass="fa-history fa-fw"
+          label="Events"
+        />
+      )}
+
+      <SidebarItem
+        label={setupSubMenuProps.label}
+        iconClass={setupSubMenuProps.iconClass}
+        to={setupSubMenuProps.to}
+        params={{ endpointId: environmentId }}
+      >
+        <Authorized
+          authorizations="PortainerEndpointUpdateSettings"
+          adminOnlyCE
+        >
+          <SidebarItem
+            to="docker.featuresConfiguration"
+            params={{ endpointId: environmentId }}
+            label="Setup"
+          />
+        </Authorized>
+
+        <SidebarItem
+          to="docker.registries"
+          params={{ endpointId: environmentId }}
+          label="Registries"
+        />
+      </SidebarItem>
+    </>
+  );
+}

app/react/sidebar/EdgeComputeSidebar.tsx

@@ -0,0 +1,29 @@
+import { SidebarItem } from './SidebarItem';
+import { SidebarSection } from './SidebarSection';
+
+export function EdgeComputeSidebar() {
+  return (
+    <SidebarSection title="Edge compute">
+      <SidebarItem
+        to="edge.devices"
+        iconClass="fas fa-laptop-code fa-fw"
+        label="Edge Devices"
+      />
+      <SidebarItem
+        to="edge.groups"
+        iconClass="fa-object-group fa-fw"
+        label="Edge Groups"
+      />
+      <SidebarItem
+        to="edge.stacks"
+        iconClass="fa-layer-group fa-fw"
+        label="Edge Stacks"
+      />
+      <SidebarItem
+        to="edge.jobs"
+        iconClass="fa-clock fa-fw"
+        label="Edge Jobs"
+      />
+    </SidebarSection>
+  );
+}

app/react/sidebar/EnvironmentSidebar.module.css

@@ -0,0 +1,5 @@
+.title {
+  color: #fff;
+  text-align: center;
+  text-indent: 0;
+}

app/react/sidebar/EnvironmentSidebar.tsx

@@ -0,0 +1,75 @@
+import { useCurrentStateAndParams } from '@uirouter/react';
+import { useEffect, useState } from 'react';
+
+import {
+  PlatformType,
+  EnvironmentId,
+  Environment,
+} from '@/portainer/environments/types';
+import { getPlatformType } from '@/portainer/environments/utils';
+import { useEnvironment } from '@/portainer/environments/queries/useEnvironment';
+
+import { AzureSidebar } from './AzureSidebar';
+import { DockerSidebar } from './DockerSidebar';
+import { KubernetesSidebar } from './KubernetesSidebar';
+import { SidebarSection } from './SidebarSection';
+import styles from './EnvironmentSidebar.module.css';
+
+export function EnvironmentSidebar() {
+  const currentEnvironmentQuery = useCurrentEnvironment();
+  const environment = currentEnvironmentQuery.data;
+
+  if (!environment) {
+    return null;
+  }
+
+  const platform = getPlatformType(environment.Type);
+  const sidebar = getSidebar(environment);
+
+  return (
+    <SidebarSection
+      title={
+        <div className={styles.title}>
+          <i className="fa fa-plug space-right" />
+          {environment.Name}
+        </div>
+      }
+      label={PlatformType[platform]}
+    >
+      {sidebar}
+    </SidebarSection>
+  );
+
+  function getSidebar(environment: Environment) {
+    switch (platform) {
+      case PlatformType.Azure:
+        return <AzureSidebar environmentId={environment.Id} />;
+      case PlatformType.Docker:
+        return (
+          <DockerSidebar
+            environmentId={environment.Id}
+            environment={environment}
+          />
+        );
+      case PlatformType.Kubernetes:
+        return <KubernetesSidebar environmentId={environment.Id} />;
+      default:
+        return null;
+    }
+  }
+}
+
+function useCurrentEnvironment() {
+  const { params } = useCurrentStateAndParams();
+
+  const [environmentId, setEnvironmentId] = useState<EnvironmentId>();
+
+  useEffect(() => {
+    const environmentId = parseInt(params.endpointId, 10);
+    if (params.endpointId && !Number.isNaN(environmentId)) {
+      setEnvironmentId(environmentId);
+    }
+  }, [params.endpointId]);
+
+  return useEnvironment(environmentId);
+}

app/react/sidebar/Footer.module.css

@@ -0,0 +1,28 @@
+:global(#page-wrapper:not(.open)) .root {
+  display: none;
+}
+
+.root {
+  text-align: center;
+}
+
+.logo {
+  display: inline;
+  width: 100%;
+  max-width: 100px;
+  height: 100%;
+  max-height: 35px;
+  margin: 2px 0 2px 20px;
+}
+
+.version {
+  font-size: 11px;
+  margin: 11px 20px 0 7px;
+  color: #fff;
+}
+
+.edition-version {
+  font-size: 10px;
+  margin-bottom: 8px;
+  color: #fff;
+}

app/react/sidebar/Footer.tsx

@@ -0,0 +1,44 @@
+import { useQuery } from 'react-query';
+import clsx from 'clsx';
+
+import smallLogo from '@/assets/images/logo_small.png';
+import { getStatus } from '@/portainer/services/api/status.service';
+
+import { UpdateNotification } from './UpdateNotifications';
+import styles from './Footer.module.css';
+
+export function Footer() {
+  const statusQuery = useStatus();
+
+  if (!statusQuery.data) {
+    return null;
+  }
+
+  const { Edition, Version } = statusQuery.data;
+
+  return (
+    <div className={styles.root}>
+      {process.env.PORTAINER_EDITION === 'CE' && <UpdateNotification />}
+      <div>
+        <img
+          src={smallLogo}
+          className={clsx('img-responsive', styles.logo)}
+          alt="Portainer"
+        />
+        <span
+          className={styles.version}
+          data-cy="portainerSidebar-versionNumber"
+        >
+          {Version}
+        </span>
+        {process.env.PORTAINER_EDITION !== 'CE' && (
+          <div className={styles.editionVersion}>{Edition}</div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function useStatus() {
+  return useQuery(['status'], () => getStatus());
+}

app/react/sidebar/Header.module.css

@@ -0,0 +1,29 @@
+.root {
+  color: white;
+}
+
+.toggle-button {
+  border: 0;
+  margin: 0;
+  padding: 0;
+  background: initial;
+  float: right;
+  padding-right: 28px;
+  line-height: 60px;
+}
+
+.root {
+  height: 60px;
+  list-style: none;
+  text-indent: 20px;
+  font-size: 18px;
+  background: var(--bg-sidebar-header-color);
+}
+
+.root a {
+  color: #fff;
+}
+
+.root a:hover {
+  text-decoration: none;
+}

app/react/sidebar/Header.tsx

@@ -0,0 +1,37 @@
+import defaultLogo from '@/assets/images/logo.png';
+
+import { Link } from '@@/Link';
+
+import styles from './Header.module.css';
+import { useSidebarState } from './useSidebarState';
+
+interface Props {
+  logo?: string;
+}
+
+export function Header({ logo }: Props) {
+  const { toggle } = useSidebarState();
+
+  return (
+    <div className={styles.root}>
+      <Link to="portainer.home" data-cy="portainerSidebar-homeImage">
+        <img
+          src={logo || defaultLogo}
+          className="img-responsive logo"
+          alt={!logo ? 'Portainer' : ''}
+        />
+      </Link>
+      {toggle && (
+        <button
+          type="button"
+          onClick={() => toggle()}
+          className={styles.toggleButton}
+          aria-label="Toggle Sidebar"
+          title="Toggle Sidebar"
+        >
+          <i className="glyphicon glyphicon-transfer" />
+        </button>
+      )}
+    </div>
+  );
+}

app/react/sidebar/KubernetesSidebar/KubectlShell/KubectlShell.module.css

@@ -0,0 +1,40 @@
+.root {
+  position: fixed;
+  background: #000;
+  bottom: 0;
+  left: 0;
+  width: 100vw;
+  z-index: 1000;
+  height: 495px;
+}
+
+.root.minimized {
+  height: 35px;
+}
+
+.header {
+  height: 35px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: #424242;
+  background: rgb(245, 245, 245);
+  border-top: 1px solid rgb(190, 190, 190);
+
+  padding: 0 30px;
+}
+
+.title {
+  font-weight: bold;
+  font-size: 14px;
+}
+
+.actions button {
+  padding: 0;
+  border: 0;
+}
+
+.terminal-container .loading-message {
+  position: fixed;
+  color: #fff;
+}

app/react/sidebar/KubernetesSidebar/KubectlShell/KubectlShell.tsx

@@ -0,0 +1,191 @@
+import { Terminal } from 'xterm';
+import { fit } from 'xterm/lib/addons/fit/fit';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import clsx from 'clsx';
+
+import { baseHref } from '@/portainer/helpers/pathHelper';
+import {
+  terminalClose,
+  terminalResize,
+} from '@/portainer/services/terminal-window';
+import { EnvironmentId } from '@/portainer/environments/types';
+import { error as notifyError } from '@/portainer/services/notifications';
+import { useLocalStorage } from '@/portainer/hooks/useLocalStorage';
+
+import { Button } from '@@/buttons';
+
+import styles from './KubectlShell.module.css';
+
+interface ShellState {
+  socket: WebSocket | null;
+  minimized: boolean;
+}
+
+interface Props {
+  environmentId: EnvironmentId;
+  onClose(): void;
+}
+
+export function KubeCtlShell({ environmentId, onClose }: Props) {
+  const [terminal] = useState(new Terminal());
+
+  const [shell, setShell] = useState<ShellState>({
+    socket: null,
+    minimized: false,
+  });
+
+  const { socket } = shell;
+
+  const terminalElem = useRef(null);
+
+  const [jwt] = useLocalStorage('JWT', '');
+
+  const handleClose = useCallback(() => {
+    terminalClose(); // only css trick
+    socket?.close();
+    terminal.dispose();
+    onClose();
+  }, [onClose, terminal, socket]);
+
+  const openTerminal = useCallback(() => {
+    if (!terminalElem.current) {
+      return;
+    }
+
+    terminal.open(terminalElem.current);
+    terminal.setOption('cursorBlink', true);
+    terminal.focus();
+    fit(terminal);
+    terminal.writeln('#Run kubectl commands inside here');
+    terminal.writeln('#e.g. kubectl get all');
+    terminal.writeln('');
+  }, [terminal]);
+
+  // refresh socket listeners on socket updates
+  useEffect(() => {
+    if (!socket) {
+      return () => {};
+    }
+    function onOpen() {
+      openTerminal();
+    }
+    function onMessage(e: MessageEvent) {
+      terminal.write(e.data);
+    }
+    function onClose() {
+      handleClose();
+    }
+    function onError(e: Event) {
+      handleClose();
+      if (socket?.readyState !== WebSocket.CLOSED) {
+        notifyError(
+          'Failure',
+          e as unknown as Error,
+          'Websocket connection error'
+        );
+      }
+    }
+
+    socket.addEventListener('open', onOpen);
+    socket.addEventListener('message', onMessage);
+    socket.addEventListener('close', onClose);
+    socket.addEventListener('error', onError);
+
+    return () => {
+      socket.removeEventListener('open', onOpen);
+      socket.removeEventListener('message', onMessage);
+      socket.removeEventListener('close', onClose);
+      socket.removeEventListener('error', onError);
+    };
+  }, [handleClose, openTerminal, socket, terminal]);
+
+  // on component load/destroy
+  useEffect(() => {
+    const socket = new WebSocket(buildUrl(jwt, environmentId));
+    setShell((shell) => ({ ...shell, socket }));
+
+    terminal.onData((data) => socket.send(data));
+    terminal.onKey(({ domEvent }) => {
+      if (domEvent.ctrlKey && domEvent.code === 'KeyD') {
+        close();
+      }
+    });
+
+    window.addEventListener('resize', () => terminalResize());
+
+    function close() {
+      socket.close();
+      terminal.dispose();
+      window.removeEventListener('resize', terminalResize);
+    }
+
+    return close;
+  }, [environmentId, jwt, terminal]);
+
+  return (
+    <div className={clsx(styles.root, { [styles.minimized]: shell.minimized })}>
+      <div className={styles.header}>
+        <div className={styles.title}>
+          <i className="fas fa-terminal space-right" />
+          kubectl shell
+        </div>
+        <div className={clsx(styles.actions, 'space-x-8')}>
+          <Button color="link" onClick={clearScreen}>
+            <i className="fas fa-redo-alt" data-cy="k8sShell-refreshButton" />
+          </Button>
+          <Button color="link" onClick={toggleMinimize}>
+            <i
+              className={clsx(
+                'fas',
+                shell.minimized ? 'fa-window-restore' : 'fa-window-minimize'
+              )}
+              data-cy={
+                shell.minimized ? 'k8sShell-restore' : 'k8sShell-minimise'
+              }
+            />
+          </Button>
+          <Button color="link" onClick={handleClose}>
+            <i className="fas fa-times" data-cy="k8sShell-closeButton" />
+          </Button>
+        </div>
+      </div>
+
+      <div className={styles.terminalContainer} ref={terminalElem}>
+        <div className={styles.loadingMessage}>Loading Terminal...</div>
+      </div>
+    </div>
+  );
+
+  function clearScreen() {
+    terminal.clear();
+  }
+
+  function toggleMinimize() {
+    if (shell.minimized) {
+      terminalResize();
+      setShell((shell) => ({ ...shell, minimized: false }));
+    } else {
+      terminalClose();
+      setShell((shell) => ({ ...shell, minimized: true }));
+    }
+  }
+
+  function buildUrl(jwt: string, environmentId: EnvironmentId) {
+    const params = {
+      token: jwt,
+      endpointId: environmentId,
+    };
+
+    const wsProtocol =
+      window.location.protocol === 'https:' ? 'wss://' : 'ws://';
+    const path = `${baseHref()}api/websocket/kubernetes-shell`;
+    const base = path.startsWith('http')
+      ? path.replace(/^https?:\/\//i, '')
+      : window.location.host + path;
+
+    const queryParams = Object.entries(params)
+      .map(([k, v]) => `${k}=${v}`)
+      .join('&');
+    return `${wsProtocol}${base}?${queryParams}`;
+  }
+}

app/react/sidebar/KubernetesSidebar/KubectlShell/KubectlShellButton.module.css

@@ -0,0 +1,5 @@
+.root {
+  display: block;
+  margin: 0 auto;
+  padding-bottom: 5px;
+}

app/react/sidebar/KubernetesSidebar/KubectlShell/KubectlShellButton.tsx

@@ -0,0 +1,47 @@
+import { useState } from 'react';
+import { createPortal } from 'react-dom';
+
+import { EnvironmentId } from '@/portainer/environments/types';
+import { useAnalytics } from '@/angulartics.matomo/analytics-services';
+
+import { Button } from '@@/buttons';
+
+import { KubeCtlShell } from './KubectlShell';
+import styles from './KubectlShellButton.module.css';
+
+interface Props {
+  environmentId: EnvironmentId;
+}
+export function KubectlShellButton({ environmentId }: Props) {
+  const [open, setOpen] = useState(false);
+  const { trackEvent } = useAnalytics();
+  return (
+    <>
+      <Button
+        color="primary"
+        size="xsmall"
+        disabled={open}
+        data-cy="k8sSidebar-shellButton"
+        onClick={() => handleOpen()}
+        className={styles.root}
+      >
+        <i className="fa fa-terminal space-right" /> kubectl shell
+      </Button>
+
+      {open &&
+        createPortal(
+          <KubeCtlShell
+            environmentId={environmentId}
+            onClose={() => setOpen(false)}
+          />,
+          document.body
+        )}
+    </>
+  );
+
+  function handleOpen() {
+    setOpen(true);
+
+    trackEvent('kubernetes-kubectl-shell', { category: 'kubernetes' });
+  }
+}

app/react/sidebar/KubernetesSidebar/KubectlShell/index.ts

@@ -0,0 +1 @@
+export { KubectlShellButton } from './KubectlShellButton';

app/react/sidebar/KubernetesSidebar/KubernetesSidebar.tsx

@@ -0,0 +1,98 @@
+import { EnvironmentId } from '@/portainer/environments/types';
+import { Authorized } from '@/portainer/hooks/useUser';
+
+import { SidebarItem } from '../SidebarItem';
+
+import { KubectlShellButton } from './KubectlShell';
+
+interface Props {
+  environmentId: EnvironmentId;
+}
+
+export function KubernetesSidebar({ environmentId }: Props) {
+  return (
+    <>
+      <KubectlShellButton environmentId={environmentId} />
+
+      <SidebarItem
+        to="kubernetes.dashboard"
+        params={{ endpointId: environmentId }}
+        iconClass="fa-tachometer-alt fa-fw"
+        label="Dashboard"
+      />
+
+      <SidebarItem
+        to="kubernetes.templates.custom"
+        params={{ endpointId: environmentId }}
+        iconClass="fa-rocket fa-fw"
+        label="Custom Templates"
+      />
+
+      <SidebarItem
+        to="kubernetes.resourcePools"
+        params={{ endpointId: environmentId }}
+        iconClass="fa-layer-group fa-fw"
+        label="Namespaces"
+      />
+
+      <Authorized authorizations="HelmInstallChart">
+        <SidebarItem
+          to="kubernetes.templates.helm"
+          params={{ endpointId: environmentId }}
+          iconClass="fa-dharmachakra fa-fw"
+          label="Helm"
+        />
+      </Authorized>
+
+      <SidebarItem
+        to="kubernetes.applications"
+        params={{ endpointId: environmentId }}
+        iconClass="fa-laptop-code fa-fw"
+        label="Applications"
+      />
+
+      <SidebarItem
+        to="kubernetes.configurations"
+        params={{ endpointId: environmentId }}
+        iconClass="fa-file-code fa-fw"
+        label="ConfigMaps & Secrets"
+      />
+
+      <SidebarItem
+        to="kubernetes.volumes"
+        params={{ endpointId: environmentId }}
+        iconClass="fa-database fa-fw"
+        label="Volumes"
+      />
+
+      <SidebarItem
+        iconClass="fa-server fa-fw"
+        label="Cluster"
+        to="kubernetes.cluster"
+        params={{ endpointId: environmentId }}
+      >
+        <Authorized authorizations="K8sClusterSetupRW" adminOnlyCE>
+          <SidebarItem
+            to="portainer.k8sendpoint.kubernetesConfig"
+            params={{ id: environmentId }}
+            label="Setup"
+          />
+        </Authorized>
+
+        <Authorized authorizations="K8sClusterSetupRW" adminOnlyCE>
+          <SidebarItem
+            to="portainer.k8sendpoint.securityConstraint"
+            params={{ id: environmentId }}
+            label="Security constraints"
+          />
+        </Authorized>
+
+        <SidebarItem
+          to="kubernetes.registries"
+          params={{ endpointId: environmentId }}
+          label="Registries"
+        />
+      </SidebarItem>
+    </>
+  );
+}

app/react/sidebar/KubernetesSidebar/index.ts

@@ -0,0 +1 @@
+export { KubernetesSidebar } from './KubernetesSidebar';

app/react/sidebar/SettingsSidebar.tsx

@@ -0,0 +1,93 @@
+import { usePublicSettings } from '@/portainer/settings/queries';
+
+import { SidebarItem } from './SidebarItem';
+import { SidebarSection } from './SidebarSection';
+
+interface Props {
+  isAdmin: boolean;
+}
+
+export function SettingsSidebar({ isAdmin }: Props) {
+  const teamSyncQuery = usePublicSettings<boolean>(
+    (settings) => settings.TeamSync
+  );
+
+  const showUsersSection =
+    !window.ddExtension && (isAdmin || teamSyncQuery.data);
+
+  return (
+    <SidebarSection title="Settings">
+      {showUsersSection && (
+        <SidebarItem
+          to="portainer.users"
+          label="Users"
+          iconClass="fa-users fa-fw"
+        >
+          <SidebarItem to="portainer.teams" label="Teams" />
+
+          {isAdmin && <SidebarItem to="portainer.roles" label="Roles" />}
+        </SidebarItem>
+      )}
+      {isAdmin && (
+        <>
+          <SidebarItem
+            label="Environments"
+            to="portainer.endpoints"
+            iconClass="fa-plug fa-fw"
+            openOnPaths={['portainer.wizard.endpoints']}
+          >
+            <SidebarItem to="portainer.groups" label="Groups" />
+            <SidebarItem to="portainer.tags" label="Tags" />
+          </SidebarItem>
+
+          <SidebarItem
+            label="Registries"
+            to="portainer.registries"
+            iconClass="fa-database fa-fw"
+          />
+
+          <SidebarItem
+            label="Authentication logs"
+            to="portainer.authLogs"
+            iconClass="fa-history fa-fw"
+          >
+            <SidebarItem to="portainer.activityLogs" label="Activity Logs" />
+          </SidebarItem>
+
+          <SidebarItem
+            to="portainer.settings"
+            label="Settings"
+            iconClass="fa-cogs fa-fw"
+          >
+            {!window.ddExtension && (
+              <SidebarItem
+                to="portainer.settings.authentication"
+                label="Authentication"
+              />
+            )}
+            <SidebarItem to="portainer.settings.cloud" label="Cloud" />
+
+            <SidebarItem
+              to="portainer.settings.edgeCompute"
+              label="Edge Compute"
+            />
+
+            <SidebarItem.Wrapper label="Help / About">
+              <a
+                href={
+                  process.env.PORTAINER_EDITION === 'CE'
+                    ? 'https://www.portainer.io/community_help'
+                    : 'https://documentation.portainer.io/r/business-support'
+                }
+                target="_blank"
+                rel="noreferrer"
+              >
+                Help / About
+              </a>
+            </SidebarItem.Wrapper>
+          </SidebarItem>
+        </>
+      )}
+    </SidebarSection>
+  );
+}

app/react/sidebar/Sidebar.module.css

@@ -0,0 +1,56 @@
+:global(#page-wrapper.open) .root {
+  left: 150px;
+}
+
+.root {
+  margin-left: -150px;
+  left: -30px;
+  width: 250px;
+  position: fixed;
+  height: 100%;
+  z-index: 999;
+  transition: all 0.4s ease 0s;
+
+  display: flex;
+  flex-flow: column;
+}
+
+.root {
+  background-color: var(--blue-5);
+}
+:global(:root[theme='dark']) .root {
+  background-color: var(--grey-1);
+}
+:global(:root[theme='highcontrast']) .root {
+  background-color: var(--black-color);
+}
+:global(:root[data-edition='BE']) .root {
+  background-color: var(--grey-5);
+}
+:global(:root[data-edition='BE'][theme='dark']) .root {
+  background-color: var(--grey-1);
+}
+:global(:root[data-edition='BE'][theme='highcontrast']) .root {
+  background-color: var(--black-color);
+}
+
+ul.sidebar {
+  top: 0;
+  bottom: 0;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  text-indent: 20px;
+  position: relative;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.sidebar-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  overflow-y: auto;
+  overflow-x: hidden;
+  height: 100%;
+}

app/react/sidebar/Sidebar.tsx

@@ -0,0 +1,51 @@
+import { useUser } from '@/portainer/hooks/useUser';
+import { useIsTeamLeader } from '@/portainer/users/queries';
+import { usePublicSettings } from '@/portainer/settings/queries';
+
+import styles from './Sidebar.module.css';
+import { EdgeComputeSidebar } from './EdgeComputeSidebar';
+import { EnvironmentSidebar } from './EnvironmentSidebar';
+import { SettingsSidebar } from './SettingsSidebar';
+import { SidebarItem } from './SidebarItem';
+import { Footer } from './Footer';
+import { Header } from './Header';
+import { SidebarProvider } from './useSidebarState';
+
+export function Sidebar() {
+  const { isAdmin, user } = useUser();
+  const isTeamLeader = useIsTeamLeader(user);
+
+  const settingsQuery = usePublicSettings();
+
+  if (!settingsQuery.data) {
+    return null;
+  }
+
+  const { EnableEdgeComputeFeatures, LogoURL } = settingsQuery.data;
+
+  return (
+    /* in the future (when we remove r2a) this should wrap the whole app - to change root styles */
+    <SidebarProvider>
+      <nav id="sidebar-wrapper" className={styles.root} aria-label="Main">
+        <Header logo={LogoURL} />
+        <div className={styles.sidebarContent}>
+          <ul className={styles.sidebar}>
+            <SidebarItem
+              to="portainer.home"
+              iconClass="fa-home fa-fw"
+              label="Home"
+            />
+
+            <EnvironmentSidebar />
+
+            {isAdmin && EnableEdgeComputeFeatures && <EdgeComputeSidebar />}
+
+            {(isAdmin || isTeamLeader) && <SettingsSidebar isAdmin={isAdmin} />}
+          </ul>
+        </div>
+
+        <Footer />
+      </nav>
+    </SidebarProvider>
+  );
+}

app/react/sidebar/SidebarItem/Icon.module.css

@@ -0,0 +1,17 @@
+.menu-icon {
+  padding-right: 30px;
+  width: 70px;
+  line-height: 36px;
+}
+
+@media (max-height: 785px) {
+  .menu-icon {
+    line-height: 26px;
+  }
+}
+
+@media (min-height: 786px) and (max-height: 924px) {
+  .menu-icon {
+    line-height: 30px;
+  }
+}

app/react/sidebar/SidebarItem/Icon.tsx

@@ -0,0 +1,18 @@
+import clsx from 'clsx';
+
+import styles from './Icon.module.css';
+
+interface Props {
+  iconClass: string;
+}
+
+export function Icon({ iconClass }: Props) {
+  return (
+    <i
+      role="img"
+      className={clsx('fa', iconClass, styles.menuIcon)}
+      aria-label="itemIcon"
+      aria-hidden="true"
+    />
+  );
+}

app/react/sidebar/SidebarItem/Link.module.css

@@ -0,0 +1,28 @@
+a.active {
+  color: #fff;
+  border-left-color: var(--border-sidebar-color);
+}
+
+a.active {
+  background: var(--grey-37);
+}
+
+:global(:root[theme='dark']) a.active {
+  background-color: var(--grey-3);
+}
+
+:global(:root[theme='highcontrast']) a.active {
+  background-color: var(--black-color);
+}
+
+:global(:root[data-edition='BE']) a.active {
+  background-color: var(--grey-5);
+}
+
+:global(:root[data-edition='BE'][theme='dark']) a.active {
+  background-color: var(--grey-1);
+}
+
+:global(:root[data-edition='BE'][theme='highcontrast']) a.active {
+  background-color: var(--black-color);
+}

app/react/sidebar/SidebarItem/Link.tsx

@@ -0,0 +1,43 @@
+import { UISrefActive } from '@uirouter/react';
+import { Children, ComponentProps, ReactNode } from 'react';
+import _ from 'lodash';
+
+import { Link as NavLink } from '@@/Link';
+
+import styles from './Link.module.css';
+
+interface Props extends ComponentProps<typeof NavLink> {
+  children: ReactNode;
+}
+
+export function Link({ children, to, options, params, title }: Props) {
+  const label = title || getLabel(children);
+
+  return (
+    <UISrefActive class={styles.active}>
+      <NavLink
+        to={to}
+        params={params}
+        className={styles.link}
+        title={label}
+        options={options}
+      >
+        {children}
+      </NavLink>
+    </UISrefActive>
+  );
+}
+
+function getLabel(children: ReactNode) {
+  return _.first(
+    _.compact(
+      Children.map(children, (child) => {
+        if (typeof child === 'string') {
+          return child;
+        }
+
+        return '';
+      })
+    )
+  );
+}

app/react/sidebar/SidebarItem/Menu.module.css

@@ -0,0 +1,24 @@
+.sidebar-menu-head {
+  position: relative;
+}
+
+.sidebar-menu-head .sidebar-menu-indicator {
+  background: none;
+  border: 0;
+  width: fit-content;
+  height: fit-content;
+  color: white;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  left: 10px;
+  top: 25%;
+}
+
+.items {
+  padding: 0;
+}
+
+.items > * {
+  text-indent: 35px;
+}

app/react/sidebar/SidebarItem/Menu.tsx

@@ -0,0 +1,129 @@
+import { useCurrentStateAndParams } from '@uirouter/react';
+import clsx from 'clsx';
+import {
+  Children,
+  PropsWithChildren,
+  ReactElement,
+  ReactNode,
+  useMemo,
+  useReducer,
+} from 'react';
+
+import { useSidebarState } from '../useSidebarState';
+
+import styles from './Menu.module.css';
+
+interface Props {
+  head: ReactNode;
+  openOnPaths?: string[];
+}
+
+export function Menu({
+  children,
+  head,
+  openOnPaths = [],
+}: PropsWithChildren<Props>) {
+  const { isOpen: isSidebarOpen } = useSidebarState();
+
+  const paths = useMemo(
+    () => [
+      ...getPaths(head, []),
+      ...getPathsForChildren(children),
+      ...openOnPaths,
+    ],
+    [children, openOnPaths, head]
+  );
+
+  const { isOpen, toggleOpen } = useIsOpen(isSidebarOpen, paths);
+
+  return (
+    <>
+      <div className={styles.sidebarMenuHead}>
+        {Children.count(children) > 0 && (
+          <button
+            className={clsx('small', styles.sidebarMenuIndicator)}
+            onClick={handleClickArrow}
+            type="button"
+          >
+            <i
+              className={clsx(
+                'fas',
+                isOpen ? 'fa-chevron-down' : 'fa-chevron-right'
+              )}
+            />
+          </button>
+        )}
+        {head}
+      </div>
+
+      {isOpen && <ul className={styles.items}>{children}</ul>}
+    </>
+  );
+
+  function handleClickArrow(e: React.MouseEvent<HTMLButtonElement>) {
+    e.preventDefault();
+    e.stopPropagation();
+    toggleOpen();
+  }
+}
+
+function useIsOpen(
+  isSidebarOpen: boolean,
+
+  paths: string[] = []
+) {
+  const { state } = useCurrentStateAndParams();
+  const currentStateName = state.name || '';
+  const isOpenByState = paths.some((path) => currentStateName.startsWith(path));
+
+  const [forceOpen, toggleForceOpen] = useReducer((state) => !state, false);
+
+  const isOpen = checkIfOpen();
+
+  return { isOpen, toggleOpen };
+
+  function toggleOpen() {
+    if (!isOpenByState) {
+      toggleForceOpen();
+    }
+  }
+
+  function checkIfOpen() {
+    if (!isSidebarOpen) {
+      return false;
+    }
+
+    if (forceOpen) {
+      return true;
+    }
+
+    return isOpenByState;
+  }
+}
+
+function isReactElement(element: ReactNode): element is ReactElement {
+  return (
+    !!element &&
+    typeof element === 'object' &&
+    'type' in element &&
+    'props' in element
+  );
+}
+
+function getPathsForChildren(children: ReactNode): string[] {
+  return Children.map(children, (child) => getPaths(child, []))?.flat() || [];
+}
+
+function getPaths(element: ReactNode, paths: string[]): string[] {
+  if (!isReactElement(element)) {
+    return paths;
+  }
+
+  if (typeof element.props.to === 'undefined') {
+    return Children.map(element.props.children, (child) =>
+      getPaths(child, paths)
+    );
+  }
+
+  return [element.props.to, ...paths];
+}

app/react/sidebar/SidebarItem/SidebarItem.module.css

@@ -0,0 +1,75 @@
+.sidebar-menu-item {
+  text-indent: 25px;
+}
+
+.sidebar-menu-item a {
+  padding-left: 5px;
+  border-left: 3px solid transparent;
+  font-size: 14px;
+
+  line-height: 36px;
+  letter-spacing: -0.03em;
+
+  display: flex;
+  justify-content: space-between;
+
+  text-decoration: none;
+  width: 250px;
+}
+
+.sidebar-menu-item a {
+  color: var(--grey-56);
+}
+:global(:root[theme='dark']) .sidebar-menu-item a {
+  color: var(--white-color);
+}
+:global(:root[theme='highcontrast']) .sidebar-menu-item a {
+  color: var(--white-color);
+}
+:global(:root[data-edition='BE']) .sidebar-menu-item a {
+  color: var(--white-color);
+}
+:global(:root[data-edition='BE'][theme='dark']) .sidebar-menu-item a {
+  color: var(--white-color);
+}
+:global(:root[data-edition='BE'][theme='highcontrast']) .sidebar-menu-item a {
+  color: var(--white-color);
+}
+
+@media (max-height: 785px) {
+  .sidebar-menu-item a {
+    font-size: 12px;
+    line-height: 26px;
+  }
+}
+
+@media (min-height: 786px) and (max-height: 924px) {
+  .sidebar-menu-item a {
+    font-size: 12px;
+    line-height: 30px;
+  }
+}
+
+.sidebar-menu-item a:hover {
+  color: #fff;
+  border-left-color: #e99d1a;
+}
+
+.sidebar-menu-item a:hover {
+  background-color: var(--grey-37);
+}
+:global(:root[theme='dark']) .sidebar-menu-item a:hover {
+  background-color: var(--grey-3);
+}
+:global(:root[theme='highcontrast']) .sidebar-menu-item a:hover {
+  background-color: var(--black-color);
+}
+:global(:root[data-edition='BE']) .sidebar-menu-item a:hover {
+  background-color: var(--grey-34);
+}
+:global(:root[data-edition='BE'][theme='dark']) .sidebar-menu-item a:hover {
+  background-color: var(--grey-3);
+}
+:global(:root[data-edition='BE'][theme='highcontrast']) .sidebar-menu-item a:hover {
+  background-color: var(--black-color);
+}

app/react/sidebar/SidebarItem/SidebarItem.stories.tsx

@@ -0,0 +1,41 @@
+import { Meta, Story } from '@storybook/react';
+
+import { SidebarItem } from '.';
+
+const meta: Meta = {
+  title: 'Sidebar/SidebarItem',
+  component: SidebarItem,
+};
+export default meta;
+
+interface StoryProps {
+  iconClass?: string;
+  className: string;
+  label: string;
+}
+
+function Template({ iconClass, className, label: linkName }: StoryProps) {
+  return (
+    <ul className="sidebar">
+      <SidebarItem.Wrapper className={className}>
+        <SidebarItem.Link to="example.path" params={{ endpointId: 1 }}>
+          {linkName}
+          {iconClass && <SidebarItem.Icon iconClass={iconClass} />}
+        </SidebarItem.Link>
+      </SidebarItem.Wrapper>
+    </ul>
+  );
+}
+
+export const Primary: Story<StoryProps> = Template.bind({});
+Primary.args = {
+  iconClass: 'fa-tachometer-alt fa-fw',
+  className: 'exampleItemClass',
+  label: 'Item with icon',
+};
+
+export const WithoutIcon: Story<StoryProps> = Template.bind({});
+WithoutIcon.args = {
+  className: 'exampleItemClass',
+  label: 'Item without icon',
+};

app/react/sidebar/SidebarItem/SidebarItem.test.tsx

@@ -0,0 +1,34 @@
+import { render } from '@/react-tools/test-utils';
+
+import { SidebarItem } from '.';
+
+test('should be visible & have expected class', () => {
+  const { getByRole, getByText } = renderComponent('Test', 'testClass');
+  const listItem = getByRole('listitem');
+  expect(listItem).toBeVisible();
+  expect(listItem).toHaveClass('testClass');
+  expect(getByText('Test')).toBeVisible();
+});
+
+test('icon should with correct icon if iconClass is provided', () => {
+  const { getByLabelText } = renderComponent('', '', 'testIconClass');
+  const sidebarIcon = getByLabelText('itemIcon');
+  expect(sidebarIcon).toBeVisible();
+  expect(sidebarIcon).toHaveClass('testIconClass');
+});
+
+test('icon should not be rendered if iconClass is not provided', () => {
+  const { queryByRole } = renderComponent();
+  expect(queryByRole('img')).not.toBeInTheDocument();
+});
+
+function renderComponent(label = '', className = '', iconClass = '') {
+  return render(
+    <SidebarItem.Wrapper className={className}>
+      <SidebarItem.Link to="" params={{ endpointId: 1 }}>
+        {label}
+      </SidebarItem.Link>
+      <SidebarItem.Icon iconClass={iconClass} />
+    </SidebarItem.Wrapper>
+  );
+}

app/react/sidebar/SidebarItem/SidebarItem.tsx

@@ -0,0 +1,43 @@
+import { ReactNode } from 'react';
+
+import { Wrapper } from './Wrapper';
+import { Link } from './Link';
+import { Menu } from './Menu';
+import { Icon } from './Icon';
+
+type Props = {
+  iconClass?: string;
+  to: string;
+  params?: object;
+  label: string;
+  children?: ReactNode;
+  openOnPaths?: string[];
+};
+
+export function SidebarItem({
+  children,
+  iconClass,
+  to,
+  params,
+  label,
+  openOnPaths,
+}: Props) {
+  const head = (
+    <Link to={to} params={params}>
+      {label}
+      {iconClass && <Icon iconClass={iconClass} />}
+    </Link>
+  );
+
+  return (
+    <Wrapper label={label}>
+      {children ? (
+        <Menu head={head} openOnPaths={openOnPaths}>
+          {children}
+        </Menu>
+      ) : (
+        head
+      )}
+    </Wrapper>
+  );
+}

app/react/sidebar/SidebarItem/Wrapper.tsx

@@ -0,0 +1,28 @@
+import { PropsWithChildren, AriaAttributes } from 'react';
+import clsx from 'clsx';
+
+import styles from './SidebarItem.module.css';
+
+interface Props {
+  className?: string;
+  label?: string;
+}
+
+export function Wrapper({
+  className,
+  children,
+  label,
+  ...ariaProps
+}: PropsWithChildren<Props> & AriaAttributes) {
+  return (
+    <li
+      className={clsx(styles.sidebarMenuItem, className)}
+      title={label}
+      aria-label={label}
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...ariaProps}
+    >
+      {children}
+    </li>
+  );
+}

app/react/sidebar/SidebarItem/index.ts

@@ -0,0 +1,20 @@
+import { SidebarItem as MainComponent } from './SidebarItem';
+import { Icon } from './Icon';
+import { Link } from './Link';
+import { Menu } from './Menu';
+import { Wrapper } from './Wrapper';
+
+interface SubComponents {
+  Icon: typeof Icon;
+  Link: typeof Link;
+  Menu: typeof Menu;
+  Wrapper: typeof Wrapper;
+}
+
+export const SidebarItem: typeof MainComponent & SubComponents =
+  MainComponent as typeof MainComponent & SubComponents;
+
+SidebarItem.Link = Link;
+SidebarItem.Icon = Icon;
+SidebarItem.Menu = Menu;
+SidebarItem.Wrapper = Wrapper;

app/react/sidebar/SidebarSection.module.css

@@ -0,0 +1,34 @@
+.sidebar-title {
+  color: var(--text-sidebar-title-color);
+  font-size: 12px;
+  height: 35px;
+  line-height: 40px;
+  text-transform: uppercase;
+  transition: all 0.6s ease 0s;
+}
+
+#page-wrapper:not(.open) .sidebar-title {
+  display: none;
+  height: 0px;
+  text-indent: -100px;
+}
+
+.sidebar-title {
+  height: auto;
+}
+
+.sidebar-title {
+  line-height: 36px;
+}
+
+@media (max-height: 785px) {
+  .sidebar-title {
+    line-height: 26px;
+  }
+}
+
+@media (min-height: 786px) and (max-height: 924px) {
+  .sidebar-title {
+    line-height: 30px;
+  }
+}

app/react/sidebar/SidebarSection.tsx

@@ -0,0 +1,26 @@
+import { PropsWithChildren, ReactNode } from 'react';
+
+import styles from './SidebarSection.module.css';
+
+interface Props {
+  title: ReactNode;
+  label?: string;
+}
+
+export function SidebarSection({
+  title,
+  label,
+  children,
+}: PropsWithChildren<Props>) {
+  const labelText = typeof title === 'string' ? title : label;
+
+  return (
+    <>
+      <li className={styles.sidebarTitle}>{title}</li>
+
+      <nav aria-label={labelText}>
+        <ul>{children}</ul>
+      </nav>
+    </>
+  );
+}

app/react/sidebar/UpdateNotifications.module.css

@@ -0,0 +1,7 @@
+.update-notification {
+  font-size: 14px;
+  padding: 12px;
+  border-radius: 2px;
+  background-color: #ff851b;
+  margin-bottom: 5px;
+}

app/react/sidebar/UpdateNotifications.tsx

@@ -0,0 +1,33 @@
+import { useQuery } from 'react-query';
+
+import { getVersionStatus } from '@/portainer/services/api/status.service';
+
+import styles from './UpdateNotifications.module.css';
+
+export function UpdateNotification() {
+  const query = useUpdateNotification();
+
+  if (!query.data || !query.data.UpdateAvailable) {
+    return null;
+  }
+
+  const { LatestVersion } = query.data;
+
+  return (
+    <div className={styles.updateNotification}>
+      <a
+        target="_blank"
+        href={`https://github.com/portainer/portainer/releases/tag/${LatestVersion}`}
+        style={{ color: '#091e5d' }}
+        rel="noreferrer"
+      >
+        <i className="fa-lg fas fa-cloud-download-alt space-right" />A new
+        version is available
+      </a>
+    </div>
+  );
+}
+
+function useUpdateNotification() {
+  return useQuery(['status', 'version'], () => getVersionStatus());
+}

app/react/sidebar/types.ts

@@ -0,0 +1,29 @@
+import { EnvironmentType } from '@/portainer/environments/types';
+
+type DockerSwarmMode = {
+  provider: 'DOCKER_SWARM_MODE';
+  role: 'MANAGER' | 'WORKER';
+};
+
+type DockerStandalone = {
+  provider: 'DOCKER_STANDALONE';
+};
+
+type KubeMode = {
+  provider: 'KUBERNETES';
+};
+
+type AzureMode = {
+  provider: 'AZURE';
+};
+
+type Mode = DockerSwarmMode | DockerStandalone | KubeMode | AzureMode;
+
+type EnvironmentMode = { agentProxy: boolean } & Mode;
+
+export interface EnvironmentState {
+  name: string;
+  mode: EnvironmentMode;
+  apiVersion: number;
+  type: EnvironmentType;
+}

app/react/sidebar/useSidebarState.tsx

@@ -0,0 +1,158 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import angular, { IScope } from 'angular';
+import _ from 'lodash';
+
+import * as storage from '@/portainer/hooks/useLocalStorage';
+
+// using bootstrap breakpoint - https://getbootstrap.com/docs/5.0/layout/breakpoints/#min-width
+const mobileWidth = 992;
+const storageKey = 'toolbar_toggle';
+
+interface State {
+  isOpen: boolean;
+  toggle(): void;
+}
+
+const Context = createContext<State | null>(null);
+
+export function useSidebarState() {
+  const context = useContext(Context);
+
+  if (!context) {
+    throw new Error('useSidebarContext must be used within a SidebarProvider');
+  }
+
+  return context;
+}
+
+export function SidebarProvider({ children }: { children: React.ReactNode }) {
+  const state = useSidebarStateLocal();
+
+  return <Context.Provider value={state}> {children} </Context.Provider>;
+}
+
+/* @ngInject */
+export function AngularSidebarService($rootScope: IScope) {
+  const state = {
+    isOpen: false,
+  };
+
+  function isSidebarOpen() {
+    return state.isOpen;
+  }
+
+  function setIsOpen(isOpen: boolean) {
+    $rootScope.$evalAsync(() => {
+      state.isOpen = isOpen;
+    });
+  }
+
+  return { isSidebarOpen, setIsOpen };
+}
+
+function useSidebarStateLocal() {
+  const [storageIsOpen, setIsOpenInStorage] = storage.useLocalStorage(
+    storageKey,
+    true
+  );
+  const [isOpen, setIsOpen, undoIsOpenChange] = useStateWithUndo(
+    initialState()
+  );
+
+  const onResize = useMemo(
+    () =>
+      _.debounce(() => {
+        if (isMobile()) {
+          if (isOpen) {
+            setIsOpen(false);
+          }
+        } else {
+          undoIsOpenChange();
+        }
+      }, 50),
+    [setIsOpen, undoIsOpenChange, isOpen]
+  );
+
+  useUpdateAngularService(isOpen);
+
+  useEffect(() => {
+    if (window.ddExtension) {
+      return undefined;
+    }
+
+    window.addEventListener('resize', onResize);
+    return () => window.removeEventListener('resize', onResize);
+  }, [onResize]);
+
+  return {
+    isOpen,
+    toggle,
+  };
+
+  function toggle(value = !isOpen) {
+    setIsOpenInStorage(value);
+    setIsOpen(value);
+  }
+
+  function initialState() {
+    if (isMobile() || window.ddExtension) {
+      return false;
+    }
+
+    return storageIsOpen;
+  }
+}
+
+function useStateWithUndo<T>(
+  initialState: T
+): [T, (value: T) => void, () => void] {
+  const [state, setState] = useState(initialState);
+  const prevState = useRef<T>();
+
+  const undo = useCallback(() => {
+    if (!prevState.current) {
+      return;
+    }
+
+    setState(prevState.current);
+    prevState.current = undefined;
+  }, [prevState]);
+
+  const handleSetState = useCallback(
+    (newState: T) => {
+      prevState.current = state;
+      setState(newState);
+    },
+    [state]
+  );
+
+  return [state, handleSetState, undo];
+}
+
+function useUpdateAngularService(isOpen: boolean) {
+  useEffect(() => {
+    // to sync "outside state" - for angularjs
+    const $injector = angular.element(document).injector();
+    $injector.invoke(
+      /* @ngInject */ (
+        SidebarService: ReturnType<typeof AngularSidebarService>
+      ) => {
+        SidebarService.setIsOpen(isOpen);
+      }
+    );
+  }, [isOpen]);
+}
+
+function isMobile() {
+  const width = window.innerWidth;
+
+  return width < mobileWidth;
+}