fix style

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

@@ -1,6 +1,6 @@
 import type { ButtonHTMLAttributes, DetailedHTMLProps } from 'react';
 
-import { DropdownToggle } from 'reactstrap';
+import { Dropdown, DropdownToggle } from 'reactstrap';
 
 import { Hexagon } from './Hexagon';
 
@@ -10,18 +10,28 @@ import styles from './DropendToggle.module.scss';
 const moduleClass = styles['btn-toggle'];
 
 
-type Props = DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
+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 ?? ''}`}
+    <DropdownToggle
+      className={`position-absolute ${moduleClass} btn btn-primary ${props.className ?? ''}`}
     >
       <Hexagon />
       <div className="hitarea position-absolute" />
       <span className="icon material-symbols-outlined position-absolute">chevron_right</span>
-    </button>
+    </DropdownToggle>
+    // <DropdownToggle>
+    //   <button
+    //     type="button"
+    //     {...props}
+    //     className={`${moduleClass} btn btn-primary ${props.className ?? ''}`}
+    //   >
+    //     <Hexagon />
+    //     <div className="hitarea position-absolute" />
+    //     <span className="icon material-symbols-outlined position-absolute">chevron_right</span>
+    //   </button>
+    // </DropdownToggle>
   );
 };

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

@@ -16,6 +16,8 @@ import { DropendMenu } from './DropendMenu';
 import { DropendToggle } from './DropendToggle';
 import { useOnNewButtonClicked, useOnTodaysButtonClicked } from './hooks';
 
+import { Dropdown } from 'reactstrap';
+
 const generateTodaysPath = (currentUser: IUserHasId, parentDirName: string) => {
   const now = format(new Date(), 'yyyy/MM/dd');
   const userHomepagePath = pagePathUtils.userHomepagePath(currentUser);
@@ -31,6 +33,8 @@ export const PageCreateButton = React.memo((): JSX.Element => {
 
   const [isHovered, setIsHovered] = useState(false);
 
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+
   const todaysPath = currentUser == null
     ? null
     : generateTodaysPath(currentUser, t('create_page_dropdown.todays.memo'));
@@ -60,6 +64,8 @@ export const PageCreateButton = React.memo((): JSX.Element => {
     setIsHovered(false);
   };
 
+  const toggle = () => setDropdownOpen(!dropdownOpen);
+
   return (
     <div
       className="d-flex flex-row"
@@ -73,7 +79,12 @@ export const PageCreateButton = React.memo((): JSX.Element => {
           disabled={isNewPageCreating || isTodaysPageCreating || isTemplatePageCreating}
         />
       </div>
-      <div className="btn-group dropend position-absolute">
+      <Dropdown
+        isOpen={dropdownOpen}
+        toggle={toggle}
+        direction='end'
+        className="position-absolute"
+      >
         <DropendToggle
           className="dropdown-toggle dropdown-toggle-split"
           data-bs-toggle="dropdown"
@@ -85,7 +96,20 @@ export const PageCreateButton = React.memo((): JSX.Element => {
           onClickTemplateButtonHandler={onClickTemplateButtonHandler}
           todaysPath={todaysPath}
         />
-      </div>
+      </Dropdown>
+      {/* <div className="btn-group dropend position-absolute">
+        <DropendToggle
+          className="dropdown-toggle dropdown-toggle-split"
+          data-bs-toggle="dropdown"
+          aria-expanded="false"
+        />
+        <DropendMenu
+          onClickCreateNewPageButtonHandler={onClickNewButton}
+          onClickCreateTodaysButtonHandler={onClickTodaysButton}
+          onClickTemplateButtonHandler={onClickTemplateButtonHandler}
+          todaysPath={todaysPath}
+        />
+      </div> */}
     </div>
   );
 });