move publicationbuttons into separate compoennt, added state to handle jsut one pub or looseleaf

components/ActionBar/Footer.tsx

···
         actionFooter touch-none shrink-0
         w-full z-10
         px-2 pt-1 pwa-padding-bottom
-        flex justify-between gap-1
+        flex justify-between
         h-[calc(38px+var(--safe-padding-bottom))]
         bg-[rgba(var(--bg-page),0.5)] border-top border-bg-page`}
     >

components/ActionBar/MobileNavigation.tsx

···
   ReaderButton,
   WriterButton,
 } from "./NavigationButtons";
-import { PublicationNavigation } from "./Publications";
+import { PublicationNavigation } from "./PublicationNavigation";
 import { LoginActionButton } from "components/LoginButton";
 
 export const MobileNavigation = (props: {
···
 
   return (
     <div
-      className={`mobileFooter  flex gap-2 px-1 text-secondary grow items-center justify-between`}
+      className={`mobileFooter w-full flex gap-4 px-1 text-secondary grow items-center justify-between`}
     >
-      <div className="mobileNav flex gap-2 items-center justify-start">
+      <div className="mobileNav flex gap-2 items-center justify-start min-w-0">
         <ReaderButton
           compactOnMobile={compactOnMobile}
           current={props.currentPage === "reader"}
···
 
         {compactOnMobile && (
           <>
-            {identity && <Separator classname="h-6!" />}
             <PublicationNavigation
               currentPage={props.currentPage}
               currentPubUri={props.currentPublicationUri}
···
       </div>
       {identity?.atp_did ? (
         <>
-          {compactOnMobile && <Separator classname="h-6!" />}
           <NotificationButton />
         </>
       ) : (

components/ActionBar/NavigationButtons.tsx

···
         nav
         icon={<HomeSmall />}
         label="Write"
-        className={`${props.current ? "bg-bg-page! border-border-light!" : ""} ${props.className}`}
+        className={`${props.current ? "bg-bg-page! border-border-light!" : ""} w-full! ${props.className}`}
       />
     </SpeedyLink>
   );

components/ActionBar/PublicationNavigation.tsx

···
+"use client";
+import { useIdentityData } from "components/IdentityProvider";
+import { getBasePublicationURL } from "app/lish/createPub/getPublicationURL";
+import {
+  normalizePublicationRecord,
+  type NormalizedPublication,
+} from "src/utils/normalizeRecords";
+import { SpeedyLink } from "components/SpeedyLink";
+import { Popover } from "components/Popover";
+import { ButtonPrimary } from "components/Buttons";
+import { LooseLeafSmall } from "components/Icons/LooseleafSmall";
+import { HomeButton, type navPages } from "./NavigationButtons";
+import { HomeSmall } from "components/Icons/HomeSmall";
+import { MoreOptionsVerticalTiny } from "components/Icons/MoreOptionsVerticalTiny";
+import { PubIcon, PublicationButtons } from "./Publications";
+import { HomeTiny } from "components/Icons/HomeTiny";
+import { LooseleafTiny } from "components/Icons/LooseleafTiny";
+import { Separator } from "components/Layout";
+import { Menu, MenuItem } from "components/Menu";
+import { AddTiny } from "components/Icons/AddTiny";
+
+export const PublicationNavigation = (props: {
+  currentPage: navPages;
+  currentPubUri?: string;
+}) => {
+  let { identity } = useIdentityData();
+
+  if (!identity) return;
+
+  let hasLooseleafs = !!identity?.permission_token_on_homepage.find(
+    (f) =>
+      f.permission_tokens.leaflets_to_documents &&
+      f.permission_tokens.leaflets_to_documents[0]?.document,
+  );
+
+  let pubCount = identity?.publications.length ?? 0;
+  let onlyOnePub = pubCount === 1 && hasLooseleafs;
+  let onlyLooseleafs = pubCount === 0 && hasLooseleafs;
+  let className =
+    "font-bold text-secondary flex gap-2 items-center grow min-w-0 text-sm h-[34px] px-2 accent-container";
+
+  // if not publications or looseleafs
+  if (!identity.publications && !hasLooseleafs) {
+    return (
+      <SpeedyLink href="/lish/createPub">
+        <ButtonPrimary compact className="text-sm!">
+          Create a Publication!
+        </ButtonPrimary>
+      </SpeedyLink>
+    );
+  }
+
+  switch (props.currentPage) {
+    case "looseleafs":
+    case "pub":
+      if (onlyLooseleafs || onlyOnePub)
+        return (
+          <>
+            <SpeedyLink href={`/home`} className={className}>
+              <HomeTiny className="shrink-0" />
+              Home
+            </SpeedyLink>
+          </>
+        );
+      break;
+    case "home": {
+      if (onlyLooseleafs || onlyOnePub) {
+        let pub = identity.publications[0];
+        return (
+          <div className={className}>
+            <Menu trigger={<MoreOptionsVerticalTiny className="shrink-0" />}>
+              <SpeedyLink href="/createPub">
+                <MenuItem className="items-center! text-sm" onSelect={() => {}}>
+                  <AddTiny />
+                  Create New Publication
+                </MenuItem>
+              </SpeedyLink>
+            </Menu>
+            <Separator classname="h-6!" />
+            {onlyLooseleafs ? (
+              <SpeedyLink
+                href="/looseleafs"
+                className="hover:no-underline! text-inherit flex gap-2 items-center pr-2 w-full min-w-0"
+              >
+                <LooseleafTiny className="shrink-0" /> Looseleafs
+              </SpeedyLink>
+            ) : (
+              <SpeedyLink
+                href={`${getBasePublicationURL(pub)}/dashboard`}
+                className="hover:no-underline! text-inherit flex gap-2 items-center pr-2 w0ull min-w-0"
+              >
+                <PubIcon
+                  small
+                  record={normalizePublicationRecord(pub.record)}
+                  uri={pub.uri}
+                />
+                <div className="truncate min-w-0">{pub.name}</div>
+              </SpeedyLink>
+            )}
+          </div>
+        );
+      }
+      break;
+    }
+  }
+
+  return (
+    <Popover
+      trigger={
+        <div className={className}>
+          <PubIcons
+            publications={identity.publications.map((pub) => ({
+              record: normalizePublicationRecord(pub.record),
+              uri: pub.uri,
+            }))}
+          />{" "}
+          Publications
+        </div>
+      }
+      className="pt-1 px-2!"
+    >
+      <HomeButton current={props.currentPage === "home"} />
+      <hr className="my-1 border-border-light" />
+      <PublicationButtons
+        currentPage={props.currentPage}
+        currentPubUri={props.currentPubUri}
+      />
+    </Popover>
+  );
+};
+
+function PubIcons(props: {
+  publications: { record: NormalizedPublication | null; uri: string }[];
+}) {
+  if (props.publications.length < 1) return null;
+  return (
+    <div className="flex">
+      {props.publications.map((pub, index) => {
+        if (index <= 2)
+          return (
+            <div className="-ml-[6px] first:ml-0" key={pub.uri}>
+              <PubIcon small record={pub.record} uri={pub.uri} />
+            </div>
+          );
+      })}
+    </div>
+  );
+}

components/ActionBar/Publications.tsx

···
 import { PublishSmall } from "components/Icons/PublishSmall";
 import { Popover } from "components/Popover";
 import { BlueskyLogin } from "app/login/LoginForm";
-import { ButtonPrimary, ButtonSecondary } from "components/Buttons";
+import { ButtonSecondary } from "components/Buttons";
 import { useIsMobile } from "src/hooks/isMobile";
 import { useState } from "react";
 import { LooseLeafSmall } from "components/Icons/LooseleafSmall";
-import { HomeButton, type navPages } from "./NavigationButtons";
-import { AddTiny } from "components/Icons/AddTiny";
-import { HomeSmall } from "components/Icons/HomeSmall";
-import { HomeTiny } from "components/Icons/HomeTiny";
-import { LooseleafTiny } from "components/Icons/LooseleafTiny";
+import { type navPages } from "./NavigationButtons";
 
 export const PublicationButtons = (props: {
   currentPage: navPages;
···
               label="Looseleafs"
               icon={<LooseLeafSmall />}
               nav
-              className={`${
+              className={`w-full! ${
                 props.currentPage === "looseleafs"
                   ? "bg-bg-page! border-border!"
                   : ""
···
         label={record.name}
         icon={<PubIcon record={record} uri={props.uri} />}
         nav
-        className={`${props.current ? "bg-bg-page! border-border!" : ""} ${props.className}`}
+        className={`w-full! ${props.current ? "bg-bg-page! border-border!" : ""} ${props.className}`}
       />
     </SpeedyLink>
   );
···
         {props.record?.name.slice(0, 1).toUpperCase()}
       </div>
     </div>
-  );
-};
-
-export const PublicationNavigation = (props: {
-  currentPage: navPages;
-  currentPubUri?: string;
-}) => {
-  let { identity } = useIdentityData();
-
-  if (!identity) return;
-
-  let hasLooseleafs = !!identity?.permission_token_on_homepage.find(
-    (f) =>
-      f.permission_tokens.leaflets_to_documents &&
-      f.permission_tokens.leaflets_to_documents[0]?.document,
-  );
-
-  let pubCount = identity?.publications.length ?? 0;
-  let onlyOnePub = pubCount === 1 && !hasLooseleafs;
-  let onlyLooseleafs = pubCount === 0 && hasLooseleafs;
-
-  function getTriggerIcons() {
-    if (identity && pubCount >= 1) {
-      return (
-        <div className="flex gap-1">
-          {identity.publications.map((pub, index) => {
-            if (index <= 2)
-              return (
-                <PubIcon
-                  key={pub.uri}
-                  record={normalizePublicationRecord(pub.record)}
-                  uri={pub.uri}
-                />
-              );
-          })}
-        </div>
-      );
-    }
-    if (identity && hasLooseleafs) {
-      return (
-        <div className="bg-bg-leaflet rounded-full">
-          <LooseLeafSmall className="scale-[75%]" />
-        </div>
-      );
-    } else
-      return (
-        <SpeedyLink href="/lish/createPub">
-          <ButtonPrimary compact className="text-sm!">
-            Create a Publication!
-          </ButtonPrimary>
-        </SpeedyLink>
-      );
-  }
-
-  // Single pub, no looseleafs - just link to that pub
-  if (onlyOnePub && identity) {
-    let pub = identity.publications[0];
-    if (props.currentPage === "pub")
-      return (
-        <SpeedyLink
-          href={`/home`}
-          className="hover:no-underline! text-tertiary text-bold flex gap-2 text-sm border border-border-light rounded-md px-1 py-[px] items-center"
-        >
-          Home <HomeTiny />
-        </SpeedyLink>
-      );
-    return (
-      <SpeedyLink
-        href={`${getBasePublicationURL(pub)}/dashboard`}
-        className="hover:no-underline! text-tertiary text-bold flex gap-2 text-sm border border-border-light rounded-md px-1 py-[px] items-center max-w-32 "
-      >
-        <div className="truncate">{pub.name}</div>
-        <PubIcon
-          small
-          record={normalizePublicationRecord(pub.record)}
-          uri={pub.uri}
-        />
-      </SpeedyLink>
-    );
-  }
-
-  // Only looseleafs, no pubs - just link to looseleafs
-  if (onlyLooseleafs) {
-    if (props.currentPage === "looseleafs")
-      return (
-        <SpeedyLink
-          href={`/home`}
-          className="hover:no-underline! text-tertiary text-bold flex gap-2 text-sm border border-border-light rounded-md px-1 py-[px] items-center"
-        >
-          Home <HomeTiny />
-        </SpeedyLink>
-      );
-    return (
-      <SpeedyLink href="/looseleafs" className="hover:no-underline!">
-        <div className="hover:no-underline! text-tertiary text-bold flex gap-2 text-sm border border-border-light rounded-md px-1 py-[px] items-center max-w-32 ">
-          Looseleafs <LooseleafTiny />
-        </div>
-      </SpeedyLink>
-    );
-  }
-
-  return (
-    <Popover trigger={<div>{getTriggerIcons()}</div>} className="pt-1 px-2!">
-      <HomeButton
-        current={props.currentPage === "home"}
-        className="flex-row-reverse! justify-end!"
-      />
-      <hr className="my-1 border-border-light" />
-      <PublicationButtons
-        currentPage={props.currentPage}
-        currentPubUri={props.currentPubUri}
-        className="justify-end!"
-        optionClassName=" flex-row-reverse!"
-      />
-    </Popover>
   );
 };
 

components/Icons/MoreOptionsVerticalTiny.tsx

···
       viewBox="0 0 12 24"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      {...props}
     >
       <path
         d="M6 15.5C6.82843 15.5 7.5 16.1716 7.5 17C7.5 17.8284 6.82843 18.5 6 18.5C5.17157 18.5 4.5 17.8284 4.5 17C4.5 16.1716 5.17157 15.5 6 15.5ZM6 10.5C6.82843 10.5 7.5 11.1716 7.5 12C7.5 12.8284 6.82843 13.5 6 13.5C5.17157 13.5 4.5 12.8284 4.5 12C4.5 11.1716 5.17157 10.5 6 10.5ZM6 5.5C6.82843 5.5 7.5 6.17157 7.5 7C7.5 7.82843 6.82843 8.5 6 8.5C5.17157 8.5 4.5 7.82843 4.5 7C4.5 6.17157 5.17157 5.5 6 5.5Z"