WIP: add toggler

apps/app/src/components/Sidebar/AppTitle/AppTitle.module.scss

@@ -29,6 +29,7 @@
 .on-subnavigation {
   $grw-contextual-sub-navigation-width: 500px;
 
+  top: 0;
   left: var.$grw-sidebar-nav-width;
   // set width for truncation
   width: calc(100vw - $grw-contextual-sub-navigation-width);

apps/app/src/components/Sidebar/Sidebar.tsx

@@ -21,6 +21,7 @@ import { SidebarHead } from './SidebarHead';
 import { SidebarNav, type SidebarNavProps } from './SidebarNav';
 
 import styles from './Sidebar.module.scss';
+import { ToggleCollapseButton } from './SidebarHead/ToggleCollapseButton';
 
 
 const SidebarContents = dynamic(() => import('./SidebarContents').then(mod => mod.SidebarContents), { ssr: false });
@@ -168,7 +169,7 @@ const DrawableContainer = memo((props: DrawableContainerProps): JSX.Element => {
 
 export const Sidebar = (): JSX.Element => {
 
-  const { data: sidebarMode, isCollapsedMode } = useSidebarMode();
+  const { data: sidebarMode, isDrawerMode, isDockMode } = useSidebarMode();
 
   // css styles
   const grwSidebarClass = styles['grw-sidebar'];
@@ -188,10 +189,15 @@ export const Sidebar = (): JSX.Element => {
 
   return (
     <>
-      { sidebarMode != null && isCollapsedMode() && <AppTitleOnSubnavigation /> }
+      { sidebarMode != null && isDrawerMode() && (
+        <div className="vh-100 sticky-top">
+          <ToggleCollapseButton />
+        </div>
+      ) }
+      { sidebarMode != null && !isDockMode() && <AppTitleOnSubnavigation /> }
       <DrawableContainer className={`${grwSidebarClass} ${modeClass} border-end vh-100`} data-testid="grw-sidebar">
         <ResizableContainer>
-          { sidebarMode != null && !isCollapsedMode() && <AppTitleOnSidebarHead /> }
+          { sidebarMode != null && isDockMode() && <AppTitleOnSidebarHead /> }
           <SidebarHead />
           <CollapsibleContainer Nav={SidebarNav} className="border-top">
             <SidebarContents />

apps/app/src/components/Sidebar/SidebarHead/ToggleCollapseButton.tsx

@@ -1,4 +1,4 @@
-import { memo, useCallback } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 
 import {
   useCollapsedContentsOpened, usePreferCollapsedMode, useDrawerOpened, useSidebarMode,
@@ -10,7 +10,7 @@ import styles from './ToggleCollapseButton.module.scss';
 
 export const ToggleCollapseButton = memo((): JSX.Element => {
 
-  const { isDrawerMode, isCollapsedMode, isDockMode } = useSidebarMode();
+  const { isDrawerMode, isCollapsedMode } = useSidebarMode();
   const { data: isDrawerOpened, mutate: mutateDrawerOpened } = useDrawerOpened();
   const { mutate: mutatePreferCollapsedMode } = usePreferCollapsedMode();
   const { mutate: mutateCollapsedContentsOpened } = useCollapsedContentsOpened();
@@ -25,9 +25,15 @@ export const ToggleCollapseButton = memo((): JSX.Element => {
   }, [isCollapsedMode, mutateCollapsedContentsOpened, mutatePreferCollapsedMode]);
 
   const rotationClass = isCollapsedMode() ? 'rotate180' : '';
-  const icon = isDrawerMode() || isDockMode()
-    ? 'first_page'
-    : 'keyboard_double_arrow_left';
+  const icon = useMemo(() => {
+    if (isDrawerMode()) {
+      return 'star';
+    }
+    else if (isCollapsedMode()) {
+      return 'keyboard_double_arrow_left';
+    }
+    return 'first_page';
+  }, []);
 
   return (
     <button