refactor: extract navigation elements

apps/client/src/common/components/navigation-menu/floating-navigation/FloatingNavigation.tsx

@@ -0,0 +1,43 @@
+import { IoApps } from 'react-icons/io5';
+import { IoSettingsOutline } from 'react-icons/io5';
+
+import { useFadeOutOnInactivity } from '../../../hooks/useFadeOutOnInactivity';
+import { cx } from '../../../utils/styleUtils';
+import IconButton from '../../buttons/IconButton';
+
+import style from './FloatingNavigation.module.scss';
+
+interface FloatingNavigationProps {
+  toggleMenu: () => void;
+  toggleSettings: () => void;
+}
+
+export default function FloatingNavigation({ toggleMenu, toggleSettings }: FloatingNavigationProps) {
+  const isButtonShown = useFadeOutOnInactivity(true);
+
+  return (
+    <div
+      id='fadeable-navigation'
+      className={cx([style.fadeable, style.buttonContainer, !isButtonShown && style.hidden])}
+    >
+      <IconButton
+        variant='subtle-white'
+        size='xlarge'
+        onClick={toggleMenu}
+        aria-label='toggle menu'
+        data-testid='navigation__toggle-menu'
+      >
+        <IoApps />
+      </IconButton>
+      <IconButton
+        variant='subtle-white'
+        size='xlarge'
+        onClick={toggleSettings}
+        aria-label='toggle settings'
+        data-testid='navigation__toggle-settings'
+      >
+        <IoSettingsOutline />
+      </IconButton>
+    </div>
+  );
+}