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,9 +75,34 @@ function Public({ local, ...props }) {
       checkForUpdates={checkForUpdates}
       headerStart={<></>}
       headerEnd={
-        <button
+        <Menu
-          type="button"
+          portal={{
-          class="plain"
+            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>
+          }
+        >
+          <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"',
@@ -92,8 +117,9 @@ function Public({ local, ...props }) {
               }
             }}
           >
-          <Icon icon="transfer" alt="Switch instance" />
+            <Icon icon="bus" /> <span>Go to another instance…</span>
-        </button>
+          </MenuItem>
+        </Menu>
       }
     />
   );