impl DropendToggle

apps/app/src/components/Sidebar/PageCreateButton/DropendToggle.module.scss

@@ -0,0 +1,42 @@
+@use '~/styles/variables' as var;
+
+@use '../button-styles';
+
+.btn-toggle :global {
+  @extend %btn-basis;
+
+  right: -12px;
+  z-index: -1 !important;
+  padding: 0 3px;
+
+  .icon {
+    top: 50%;
+    right: 0px;
+    font-size: 22px;
+    transform: translateY(-50%);
+  }
+
+}
+
+// == Colors
+.btn-toggle {
+  background-color: transparent !important;
+}
+
+.btn-toggle :global {
+  svg {
+    fill: var(--grw-primary-400);
+  }
+}
+
+.btn-toggle:hover :global {
+  svg {
+    fill: var(--grw-primary-400);
+  }
+}
+
+.btn-toggle:active :global {
+  svg {
+    fill: var(--grw-primary-600);
+  }
+}

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

@@ -0,0 +1,23 @@
+import type { ButtonHTMLAttributes, DetailedHTMLProps } from 'react';
+
+import { Hexagon } from './Hexagon';
+
+import styles from './DropendToggle.module.scss';
+
+const moduleClass = styles['btn-toggle'];
+
+
+type Props = DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
+
+export const DropendToggle = (props: Props): JSX.Element => {
+  return (
+    <button
+      type="button"
+      {...props}
+      className={`${moduleClass} btn btn-primary ${props.className ?? ''}`}
+    >
+      <Hexagon />
+      <span className="icon material-symbols-outlined position-absolute">chevron_right</span>
+    </button>
+  );
+};

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

@@ -7,9 +7,10 @@ import { toastError } from '~/client/util/toastr';
 import { useSWRxCurrentPage } from '~/stores/page';
 import loggerFactory from '~/utils/logger';
 
-import styles from './PageCreateButton.module.scss';
-import { Hexagon } from './Hexagon';
 import { CreateButton } from './CreateButton';
+import { DropendToggle } from './DropendToggle';
+
+import styles from './PageCreateButton.module.scss';
 
 const moduleClass = styles['grw-page-create-button'];
 
@@ -88,9 +89,8 @@ export const PageCreateButton = React.memo((): JSX.Element => {
       </div>
       {isHovered && (
         <div className="btn-group dropend">
-          <button
-            className="btn btn-secondary dropdown-toggle dropdown-toggle-split position-absolute"
-            type="button"
+          <DropendToggle
+            className="dropdown-toggle dropdown-toggle-split position-absolute"
             data-bs-toggle="dropdown"
             aria-expanded="false"
           />