feat(sidebar): implement new design [EE-3447] (#7118)

app/react/sidebar/useSidebarState.tsx

@@ -1,11 +1,13 @@
 import {
   createContext,
+  PropsWithChildren,
   useCallback,
   useContext,
   useEffect,
   useMemo,
   useRef,
   useState,
+  useReducer,
 } from 'react';
 import angular, { IScope } from 'angular';
 import _ from 'lodash';
@@ -21,7 +23,7 @@ interface State {
   toggle(): void;
 }
 
-const Context = createContext<State | null>(null);
+export const Context = createContext<State | null>(null);
 
 export function useSidebarState() {
   const context = useContext(Context);
@@ -39,6 +41,17 @@ export function SidebarProvider({ children }: { children: React.ReactNode }) {
   return <Context.Provider value={state}> {children} </Context.Provider>;
 }
 
+export function TestSidebarProvider({ children }: PropsWithChildren<unknown>) {
+  const [isOpen, toggle] = useReducer((state) => !state, true);
+
+  const state = useMemo(
+    () => ({ isOpen, toggle: () => toggle() }),
+    [isOpen, toggle]
+  );
+
+  return <Context.Provider value={state}> {children} </Context.Provider>;
+}
+
 /* @ngInject */
 export function AngularSidebarService($rootScope: IScope) {
   const state = {