WIP: refactor DrawerToggler

apps/app/src/components/Common/DrawerToggler/DrawerToggler.module.scss

@@ -0,0 +1,5 @@
+.grw-drawer-toggler :global {
+  .btn {
+    --bs-btn-bg: transparent !important;
+  }
+}

apps/app/src/components/Common/DrawerToggler/DrawerToggler.tsx

@@ -1,31 +1,37 @@
-import React from 'react';
+import { type ReactNode } from 'react';
 
 import { useDrawerOpened } from '~/stores/ui';
 
+
+import styles from './DrawerToggler.module.scss';
+
+const moduleClass = styles['grw-drawer-toggler'];
+
+
 type Props = {
-  iconClass?: string,
+  className?: string,
+  togglerClassName?: string,
+  children?: ReactNode,
 }
 
-const DrawerToggler = (props: Props): JSX.Element => {
+export const DrawerToggler = (props: Props): JSX.Element => {
 
-  const { data: isOpened, mutate } = useDrawerOpened();
+  const { className, togglerClassName, children } = props;
 
-  const iconClass = props.iconClass ?? isOpened
-    ? 'icon-arrow-left'
-    : 'icon-arrow-right';
+  const { data: isOpened, mutate } = useDrawerOpened();
 
   return (
-    <button
-      className="grw-drawer-toggler btn btn-secondary"
-      type="button"
-      aria-expanded="false"
-      aria-label="Toggle navigation"
-      onClick={() => mutate(!isOpened)}
-    >
-      <i className={iconClass}></i>
-    </button>
+    <div className={`${moduleClass} ${className}`}>
+      <button
+        className={`btn btn-outline-secondary ${togglerClassName} border-0`}
+        type="button"
+        aria-expanded="false"
+        aria-label="Toggle navigation"
+        onClick={() => mutate(!isOpened)}
+      >
+        {children}
+      </button>
+    </div>
   );
 
 };
-
-export default DrawerToggler;

apps/app/src/components/Common/DrawerToggler/index.ts

@@ -0,0 +1 @@
+export * from './DrawerToggler';

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

@@ -15,13 +15,14 @@ import {
   useSidebarMode,
 } from '~/stores/ui';
 
+import { DrawerToggler } from '../Common/DrawerToggler';
+
 import { AppTitleOnSidebarHead, AppTitleOnSubnavigation } from './AppTitle/AppTitle';
 import { ResizableArea } from './ResizableArea/ResizableArea';
 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 });
@@ -190,9 +191,9 @@ export const Sidebar = (): JSX.Element => {
   return (
     <>
       { sidebarMode != null && isDrawerMode() && (
-        <div className="vh-100 sticky-top">
-          <ToggleCollapseButton />
-        </div>
+        <DrawerToggler className="fixed-top">
+          <span className="material-symbols-outlined">menu</span>
+        </DrawerToggler>
       ) }
       { sidebarMode != null && !isDockMode() && <AppTitleOnSubnavigation /> }
       <DrawableContainer className={`${grwSidebarClass} ${modeClass} border-end vh-100`} data-testid="grw-sidebar">

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

@@ -26,14 +26,11 @@ export const ToggleCollapseButton = memo((): JSX.Element => {
 
   const rotationClass = isCollapsedMode() ? 'rotate180' : '';
   const icon = useMemo(() => {
-    if (isDrawerMode()) {
-      return 'star';
-    }
-    else if (isCollapsedMode()) {
+    if (isCollapsedMode()) {
       return 'keyboard_double_arrow_left';
     }
     return 'first_page';
-  }, []);
+  }, [isCollapsedMode]);
 
   return (
     <button