Sneak in this little menu

And… fix title leak bug

src/app.css

@@ -998,10 +998,18 @@ button.carousel-dot:is(.active, [disabled].active) {
 }
 .szh-menu .szh-menu__item {
   padding: 8px 16px !important;
+  transition: all 0.1s ease-in-out;
 }
 .szh-menu .szh-menu__item * {
   vertical-align: middle;
 }
+.szh-menu .szh-menu__item a {
+  display: block;
+  color: inherit;
+  text-decoration: none;
+  padding: 8px 16px !important;
+  margin: -8px -16px !important;
+}
 .szh-menu
   .szh-menu__item:not(.szh-menu__item--disabled, .szh-menu__item--hover) {
   color: var(--text-color);

src/components/icon.jsx

@@ -48,6 +48,7 @@ const ICONS = {
   thread: 'mingcute:route-line',
   group: 'mingcute:group-line',
   bot: 'mingcute:android-2-line',
+  menu: 'mingcute:rows-4-line',
 };
 
 const modules = import.meta.glob('/node_modules/@iconify-icons/mingcute/*.js');

src/components/link.jsx

@@ -1,3 +1,4 @@
+import { forwardRef } from 'preact/compat';
 import { useLocation } from 'react-router-dom';
 
 import states from '../utils/states';
@@ -10,7 +11,7 @@ import states from '../utils/states';
    3. Not using <Link state/> because it modifies history.state that *persists* across page reloads. I don't need that, so using valtio's states instead.
 */
 
-const Link = (props) => {
+const Link = forwardRef((props, ref) => {
   let routerLocation;
   try {
     routerLocation = useLocation();
@@ -21,6 +22,7 @@ const Link = (props) => {
   const isActive = hash === to;
   return (
     <a
+      ref={ref}
       href={`#${to}`}
       {...restProps}
       class={`${props.class || ''} ${isActive ? 'is-active' : ''}`}
@@ -30,6 +32,6 @@ const Link = (props) => {
       }}
     />
   );
-};
+});
 
 export default Link;

src/components/timeline.jsx

@@ -1,7 +1,9 @@
+import { FocusableItem, Menu, MenuDivider, MenuItem } from '@szhsin/react-menu';
 import { useEffect, useRef, useState } from 'preact/hooks';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useDebouncedCallback } from 'use-debounce';
 
+import states from '../utils/states';
 import useInterval from '../utils/useInterval';
 import usePageVisibility from '../utils/usePageVisibility';
 import useScroll from '../utils/useScroll';
@@ -254,7 +256,35 @@ function Timeline({
         >
           <div class="header-grid">
             <div class="header-side">
-              {headerStart || (
+              <Menu
+                menuButton={
+                  <button type="button" class="button plain">
+                    <Icon icon="menu" size="l" />
+                  </button>
+                }
+              >
+                <MenuLink to="/">
+                  <Icon icon="home" size="l" /> <span>Home</span>
+                </MenuLink>
+                <MenuLink to="/b">
+                  <Icon icon="bookmark" size="l" /> <span>Bookmarks</span>
+                </MenuLink>
+                <MenuLink to="/f">
+                  <Icon icon="heart" size="l" /> <span>Favourites</span>
+                </MenuLink>
+                <MenuDivider />
+                <MenuItem
+                  onClick={() => {
+                    states.showSettings = true;
+                  }}
+                >
+                  <Icon icon="gear" size="l" alt="Settings" />{' '}
+                  <span>Settings</span>
+                </MenuItem>
+              </Menu>
+              {headerStart !== null && headerStart !== undefined ? (
+                headerStart
+              ) : (
                 <Link to="/" class="button plain">
                   <Icon icon="home" size="l" />
                 </Link>
@@ -379,6 +409,22 @@ function Timeline({
   );
 }
 
+function MenuLink(props) {
+  return (
+    <FocusableItem>
+      {({ ref, closeMenu }) => (
+        <Link
+          {...props}
+          ref={ref}
+          onClick={({ detail }) =>
+            closeMenu(detail === 0 ? 'Enter' : undefined)
+          }
+        />
+      )}
+    </FocusableItem>
+  );
+}
+
 function groupBoosts(values) {
   let newValues = [];
   let boostStash = [];

src/pages/following.jsx

@@ -11,8 +11,8 @@ import useTitle from '../utils/useTitle';
 
 const LIMIT = 20;
 
-function Following({ title, id, headerStart }) {
+function Following({ title, path, id, headerStart }) {
-  useTitle('Following', '/l/f');
+  useTitle(title || 'Following', path, '/l/f');
   const { masto, instance } = api();
   const snapStates = useSnapshot(states);
   const homeIterator = useRef();

src/pages/home.jsx

@@ -24,23 +24,7 @@ function Home() {
 
   return (
     <>
-      <Following
+      <Following title="Home" path="/" id="home" headerStart={false} />
-        title="Home"
-        id="home"
-        headerStart={
-          <button
-            type="button"
-            class="plain"
-            onClick={(e) => {
-              e.preventDefault();
-              e.stopPropagation();
-              states.showSettings = true;
-            }}
-          >
-            <Icon icon="gear" size="l" alt="Settings" />
-          </button>
-        }
-      />
       <button
         // hidden={scrollDirection === 'end' && !nearReachStart}
         type="button"