refactor(web): Split AppBar and add tests

web/src/AppBar.jsx

@@ -0,0 +1,46 @@
+import { h, Fragment } from 'preact';
+import BaseAppBar from './components/AppBar';
+import LinkedLogo from './components/LinkedLogo';
+import Menu, { MenuItem, MenuSeparator } from './components/Menu';
+import AutoAwesomeIcon from './icons/AutoAwesome';
+import LightModeIcon from './icons/LightMode';
+import DarkModeIcon from './icons/DarkMode';
+import { useDarkMode } from './context';
+import { useCallback, useRef, useState } from 'preact/hooks';
+
+export default function AppBar() {
+  const [showMoreMenu, setShowMoreMenu] = useState(false);
+  const { setDarkMode } = useDarkMode();
+
+  const handleSelectDarkMode = useCallback(
+    (value, label) => {
+      setDarkMode(value);
+      setShowMoreMenu(false);
+    },
+    [setDarkMode, setShowMoreMenu]
+  );
+
+  const moreRef = useRef(null);
+
+  const handleShowMenu = useCallback(() => {
+    setShowMoreMenu(true);
+  }, [setShowMoreMenu]);
+
+  const handleDismissMoreMenu = useCallback(() => {
+    setShowMoreMenu(false);
+  }, [setShowMoreMenu]);
+
+  return (
+    <Fragment>
+      <BaseAppBar title={LinkedLogo} overflowRef={moreRef} onOverflowClick={handleShowMenu} />
+      {showMoreMenu ? (
+        <Menu onDismiss={handleDismissMoreMenu} relativeTo={moreRef}>
+          <MenuItem icon={AutoAwesomeIcon} label="Auto dark mode" value="media" onSelect={handleSelectDarkMode} />
+          <MenuSeparator />
+          <MenuItem icon={LightModeIcon} label="Light" value="light" onSelect={handleSelectDarkMode} />
+          <MenuItem icon={DarkModeIcon} label="Dark" value="dark" onSelect={handleSelectDarkMode} />
+        </Menu>
+      ) : null}
+    </Fragment>
+  );
+}