adjust DrawerToggler

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

@@ -1,5 +1,18 @@
+@use '@growi/core/scss/bootstrap/init' as bs;
+
+@use '@growi/ui/scss/atoms/btn-muted';
+
+@use '~/styles/variables' as var;
+
+
 .grw-drawer-toggler :global {
   .btn {
-    --bs-btn-bg: transparent !important;
+    --bs-btn-color: rgba(var(--bs-tertiary-color-rgb), 0.5);
+    --bs-btn-bg: transparent;
+
+    --bs-btn-hover-color: rgba(var(--bs-tertiary-color-rgb), 0.7);
+
+    width: var.$grw-sidebar-nav-width;
+    height: var.$grw-sidebar-nav-width;
   }
 }

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

@@ -10,20 +10,19 @@ const moduleClass = styles['grw-drawer-toggler'];
 
 type Props = {
   className?: string,
-  togglerClassName?: string,
   children?: ReactNode,
 }
 
 export const DrawerToggler = (props: Props): JSX.Element => {
 
-  const { className, togglerClassName, children } = props;
+  const { className, children } = props;
 
   const { data: isOpened, mutate } = useDrawerOpened();
 
   return (
-    <div className={`${moduleClass} ${className}`}>
+    <div className={`${moduleClass} ${className ?? ''}`}>
       <button
-        className={`btn btn-outline-secondary ${togglerClassName} border-0`}
+        className="btn d-flex align-items-center border-0"
         type="button"
         aria-expanded="false"
         aria-label="Toggle navigation"

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

@@ -191,8 +191,8 @@ export const Sidebar = (): JSX.Element => {
   return (
     <>
       { sidebarMode != null && isDrawerMode() && (
-        <DrawerToggler className="fixed-top">
-          <span className="material-symbols-outlined">menu</span>
+        <DrawerToggler className="position-fixed">
+          <span className="material-symbols-outlined">reorder</span>
         </DrawerToggler>
       ) }
       { sidebarMode != null && !isDockMode() && <AppTitleOnSubnavigation /> }