feat: "create new note" floating button on mobile (#1857)

packages/web/src/javascripts/Components/NavigationMenu/NavigationMenu.tsx

@@ -1,4 +1,4 @@
-import Icon from '../Icon/Icon'
+import RoundIconButton from '../Button/RoundIconButton'
 import { AppPaneId } from '../ResponsivePane/AppPaneMetadata'
 import { useResponsiveAppPane } from '../ResponsivePane/ResponsivePaneProvider'
 
@@ -6,8 +6,8 @@ export const NavigationMenuButton = () => {
   const { selectedPane, toggleAppPane } = useResponsiveAppPane()
 
   return (
-    <button
-      className="bg-text-padding mr-3 inline-flex h-8 min-w-8 cursor-pointer items-center justify-center rounded-full border border-solid border-border align-middle text-neutral hover:bg-contrast focus:bg-contrast md:hidden pointer-coarse:md-only:inline-flex pointer-coarse:lg-only:inline-flex"
+    <RoundIconButton
+      className="mr-3 md:hidden"
       onClick={() => {
         if (selectedPane === AppPaneId.Items || selectedPane === AppPaneId.Editor) {
           toggleAppPane(AppPaneId.Navigation)
@@ -15,10 +15,8 @@ export const NavigationMenuButton = () => {
           toggleAppPane(AppPaneId.Items)
         }
       }}
-      title="Navigation menu"
-      aria-label="Navigation menu"
-    >
-      <Icon type="menu-variant" />
-    </button>
+      label="Open navigation menu"
+      icon="menu-variant"
+    />
   )
 }