Add menu for Public timeline

Add menu item to switch between Local and Federated

src/app.css

@@ -1053,11 +1053,13 @@ body:has(.status-deck) .media-post-link {
   background-color: transparent;
 }
 .szh-menu .szh-menu__item {
+  display: block;
   padding: 8px 16px !important;
   transition: all 0.1s ease-in-out;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  text-decoration: none;
 }
 .szh-menu .szh-menu__item * {
   vertical-align: middle;

src/components/icon.jsx

@@ -57,6 +57,7 @@ const ICONS = {
   user: 'mingcute:user-4-line',
   following: 'mingcute:walk-line',
   pin: 'mingcute:pin-line',
+  bus: 'mingcute:bus-2-line',
 };
 
 const modules = import.meta.glob('/node_modules/@iconify-icons/mingcute/*.js');

src/pages/public.jsx

@@ -1,4 +1,4 @@
-// EXPERIMENTAL: This is a work in progress and may not work as expected.
+import { Menu, MenuDivider, MenuItem } from '@szhsin/react-menu';
 import { useRef } from 'preact/hooks';
 import { useNavigate, useParams } from 'react-router-dom';
 
@@ -75,25 +75,51 @@ function Public({ local, ...props }) {
       checkForUpdates={checkForUpdates}
       headerStart={<></>}
       headerEnd={
-        <button
-          type="button"
-          class="plain"
-          onClick={() => {
-            let newInstance = prompt(
-              'Enter a new instance e.g. "mastodon.social"',
-            );
-            if (!/\./.test(newInstance)) {
-              if (newInstance) alert('Invalid instance');
-              return;
-            }
-            if (newInstance) {
-              newInstance = newInstance.toLowerCase().trim();
-              navigate(isLocal ? `/${newInstance}/p/l` : `/${newInstance}/p`);
-            }
+        <Menu
+          portal={{
+            target: document.body,
           }}
+          // setDownOverflow
+          overflow="auto"
+          viewScroll="close"
+          position="anchor"
+          boundingBoxPadding="8 8 8 8"
+          menuButton={
+            <button type="button" class="plain">
+              <Icon icon="more" size="l" />
+            </button>
+          }
         >
-          <Icon icon="transfer" alt="Switch instance" />
-        </button>
+          <MenuItem href={isLocal ? `/#/${instance}/p` : `/#/${instance}/p/l`}>
+            {isLocal ? (
+              <>
+                <Icon icon="transfer" /> <span>Switch to Federated</span>
+              </>
+            ) : (
+              <>
+                <Icon icon="transfer" /> <span>Switch to Local</span>
+              </>
+            )}
+          </MenuItem>
+          <MenuDivider />
+          <MenuItem
+            onClick={() => {
+              let newInstance = prompt(
+                'Enter a new instance e.g. "mastodon.social"',
+              );
+              if (!/\./.test(newInstance)) {
+                if (newInstance) alert('Invalid instance');
+                return;
+              }
+              if (newInstance) {
+                newInstance = newInstance.toLowerCase().trim();
+                navigate(isLocal ? `/${newInstance}/p/l` : `/${newInstance}/p`);
+              }
+            }}
+          >
+            <Icon icon="bus" /> <span>Go to another instance…</span>
+          </MenuItem>
+        </Menu>
       }
     />
   );