WIP: adjust hitarea

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

@@ -5,8 +5,6 @@
 .btn-create :global {
   @extend %btn-basis;
 
-  padding: 0 3px;
-
   // centering
   .icon {
     top: 50%;
@@ -15,6 +13,15 @@
   }
 }
 
+// pointer-events
+.btn-create :global {
+  pointer-events: none;
+
+  svg .background {
+    pointer-events: fill;
+  }
+}
+
 // == Colors
 .btn-create {
   background-color: transparent !important;

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

@@ -5,9 +5,8 @@
 .btn-toggle :global {
   @extend %btn-basis;
 
-  right: -12px;
-  z-index: -1 !important;
-  padding: 0 3px;
+  left: 12px;
+  padding: 0;
 
   .icon {
     top: 50%;
@@ -15,7 +14,25 @@
     font-size: 22px;
     transform: translateY(-50%);
   }
+}
 
+// no caret
+.btn-toggle {
+  &:global {
+    // no caret
+    &::after {
+      display: none !important;
+    }
+  }
+}
+
+// hitarea
+.btn-create :global {
+  pointer-events: auto;
+
+  .hitarea {
+    left: 10px;
+  }
 }
 
 // == Colors

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

@@ -17,6 +17,7 @@ export const DropendToggle = (props: Props): JSX.Element => {
       className={`${moduleClass} btn btn-primary ${props.className ?? ''}`}
     >
       <Hexagon />
+      <Hexagon className="hitarea position-absolute invisible pe-auto" />
       <span className="icon material-symbols-outlined position-absolute">chevron_right</span>
     </button>
   );

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

@@ -1,9 +1,15 @@
 import React from 'react';
 
-export const Hexagon = React.memo((): JSX.Element => (
+type Props = {
+  className?: string,
+}
+
+export const Hexagon = React.memo((props: Props): JSX.Element => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 27.691 23.999"
+    width="42px"
+    className={props.className}
   >
     <g className="background" transform="translate(0 0)">
       <path d="M20.768,0l6.923,12L20.768,24H6.923L0,12,6.923,0Z" transform="translate(0)"></path>

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

@@ -1,6 +1,2 @@
-@use '~/styles/variables' as var;
-
-@use '../button-styles';
-
 .grw-page-create-button :global {
 }

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

@@ -83,14 +83,15 @@ export const PageCreateButton = React.memo((): JSX.Element => {
     >
       <div className="btn-group flex-grow-1">
         <CreateButton
+          className="z-2"
           onClick={onCreateNewPageButtonHandler}
           disabled={isCreating}
         />
       </div>
-      {isHovered && (
-        <div className="btn-group dropend">
+      { isHovered && (
+        <div className="btn-group dropend position-absolute">
           <DropendToggle
-            className="dropdown-toggle dropdown-toggle-split position-absolute"
+            className="dropdown-toggle dropdown-toggle-split"
             data-bs-toggle="dropdown"
             aria-expanded="false"
           />