added the publicaions nav to the mobile footer

components/ActionBar/ActionButton.tsx

···
     </button>
   );
 };
-
-// ok currently in the middle of making the actions on home, looseleaf, and pub appear at the top by the page title 
-// i then need to find a good place for the publication list in the footer 
-// but first i really need to refactor action button
-// 1) make a primary variant
-// 2) make a secondary variant 
-// 

components/ActionBar/MobileNavigation.tsx

···
 import { Avatar } from "components/Avatar";
 import { useProfileFromDid } from "src/utils/getRecordFromDid";
 import { LoginActionButton } from "components/LoginButton";
+import { ButtonPrimary } from "components/Buttons";
 
 export const MobileNavigation = (props: {
   currentPage: navPages;
···
   let compactOnMobile =
     props.currentPage === "home" ||
     props.currentPage === "looseleafs" ||
-    props.currentPage === "pub"
-      ? false
-      : true;
+    props.currentPage === "pub";
+  function getPubIcons() {
+    let hasLooseleafs = !!identity?.permission_token_on_homepage.find(
+      (f) =>
+        f.permission_tokens.leaflets_to_documents &&
+        f.permission_tokens.leaflets_to_documents[0]?.document,
+    );
+
+    if (identity && identity.publications.length >= 1) {
+      return (
+        <div className="pubNav flex gap-2 font-bold">
+          Publications
+          <div className="flex">
+            {identity.publications.map((pub, index) => {
+              if (index <= 3)
+                return (
+                  <PubIcon
+                    key={pub.uri}
+                    record={normalizePublicationRecord(pub.record)}
+                    uri={pub.uri}
+                    className="-ml-4 first:ml-0"
+                  />
+                );
+            })}
+          </div>
+        </div>
+      );
+    }
+    if (identity && hasLooseleafs) {
+      return (
+        <div className="bg-bg-leaflet rounded-full  ">
+          <LooseLeafSmall className="scale-[75%]" />
+        </div>
+      );
+    } else
+      return (
+        <ButtonPrimary compact className="text-sm!">
+          Create a Publication!
+        </ButtonPrimary>
+      );
+  }
 
   return (
     <div
-      className={`mobileNav  flex justify-between gap-1 items-center text-secondary pl-1 ${compactOnMobile ? "w-full" : "w-fit"}`}
+      className={`mobileNav  flex justify-between gap-1 items-center text-secondary px-1 w-full `}
     >
-      <div className="flex gap-2">
-        <WriterButton
-          compactOnMobile={compactOnMobile}
-          currentPage={props.currentPage}
-          currentPubUri={props.currentPublicationUri}
-        />
-        <ReaderButton
-          compactOnMobile={compactOnMobile}
-          current={props.currentPage === "reader"}
-          subs={
-            identity?.publication_subscriptions?.length !== 0 &&
-            identity?.publication_subscriptions?.length !== undefined
-          }
-        />
+      <div
+        className={`flex gap-2 grow items-center ${compactOnMobile ? "justify-start" : "justify-between"}`}
+      >
+        <div className="flex gap-2 items-center justify-start">
+          <WriterButton
+            compactOnMobile={compactOnMobile}
+            currentPage={props.currentPage}
+            currentPubUri={props.currentPublicationUri}
+          />
+          <ReaderButton
+            compactOnMobile={compactOnMobile}
+            current={props.currentPage === "reader"}
+            subs={
+              identity?.publication_subscriptions?.length !== 0 &&
+              identity?.publication_subscriptions?.length !== undefined
+            }
+          />
+        </div>
+        {identity?.atp_did ? (
+          <>
+            {compactOnMobile && <Separator classname="h-6!" />}
+            <NotificationButton />
+          </>
+        ) : (
+          <LoginActionButton />
+        )}
       </div>
-      {identity?.atp_did ? (
-        <>
-          {!compactOnMobile && <Separator />}
-          <NotificationButton />
-        </>
-      ) : (
-        <LoginActionButton />
+
+      {compactOnMobile && (
+        <Popover trigger={getPubIcons()} 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.currentPublicationUri}
+            className="justify-end!"
+            optionClassName=" flex-row-reverse!"
+          />
+        </Popover>
       )}
     </div>
   );

components/ActionBar/NavigationButtons.tsx

···
 import { HomeSmall } from "components/Icons/HomeSmall";
 import { ActionButton } from "./ActionButton";
 import { useIdentityData } from "components/IdentityProvider";
-import Link from "next/link";
-import { DiscoverSmall } from "components/Icons/DiscoverSmall";
-import { PubIcon, PublicationButtons } from "./Publications";
+import { PublicationButtons } from "./Publications";
 import { ReaderUnreadSmall } from "components/Icons/ReaderSmall";
 import {
   NotificationsReadSmall,
···
 import { SpeedyLink } from "components/SpeedyLink";
 import { Popover } from "components/Popover";
 import { WriterSmall } from "components/Icons/WriterSmall";
-import { LooseLeafSmall } from "components/Icons/LooseleafSmall";
-import { normalizePublicationRecord } from "src/utils/normalizeRecords";
-import { theme } from "tailwind.config";
-
 export type navPages =
   | "home"
   | "reader"
···
   currentPubUri?: string;
   compactOnMobile?: boolean;
 }) => {
-  let { identity } = useIdentityData();
-
-  let currentPub = identity?.publications?.find(
-    (pub) => pub.uri === props.currentPubUri,
-  );
-  let pubRecord = currentPub
-    ? normalizePublicationRecord(currentPub.record)
-    : null;
-
+  console.log(props.currentPage);
   let current =
     props.currentPage === "home" ||
     props.currentPage === "looseleafs" ||
     props.currentPage === "pub";
-  console.log(current);
-
-  let currentPubIcon =
-    currentPub && pubRecord ? (
-      <PubIcon record={pubRecord} uri={currentPub.uri} />
-    ) : null;
-
-  let currentIcon =
-    props.currentPage === "home" ? (
-      <HomeSmall className="text-tertiary" />
-    ) : props.currentPage === "looseleafs" ? (
-      <LooseLeafSmall className="text-tertiary" />
-    ) : props.currentPage === "pub" ? (
-      currentPubIcon
-    ) : null;
 
   return (
     <Popover
       className="p-2!"
       asChild
       trigger={
-        props.compactOnMobile ? (
-          <ActionButton
-            nav
-            labelOnMobile={true}
-            icon={<WriterSmall />}
-            label=<div className="flex flex-row gap-1">Write</div>
-            className={current ? "bg-bg-page! border-border-light!" : ""}
-          />
-        ) : (
-          <ActionButton
-            nav
-            labelOnMobile={false}
-            icon={
-              <>
-                <WriterSmall />
-              </>
-            }
-            label=<div className="flex flex-row gap-1">Writer</div>
-            className={current ? "bg-bg-page! border-border-light!" : ""}
-          />
-        )
+        <ActionButton
+          nav
+          labelOnMobile={!props.compactOnMobile}
+          icon={<WriterSmall />}
+          label="Write"
+          className={` w-fit! ${current ? "bg-bg-page! border-border-light!" : ""}`}
+        />
       }
     >
       <SpeedyLink href={"/home"} className="hover:!no-underline">
···
           icon={<HomeSmall />}
           label="Write"
           className={
-            props.currentPage === "home"
-              ? "bg-bg-page! border-border-light!"
-              : ""
+            props.currentPage === "home" ? "bg-bg-page! border-border!" : ""
           }
         />
       </SpeedyLink>
···
     <SpeedyLink href={"/reader"} className="hover:no-underline!">
       <ActionButton
         nav
-        labelOnMobile={props.compactOnMobile}
+        labelOnMobile={!props.compactOnMobile}
         icon={<ReaderUnreadSmall />}
         label="Read"
         className={props.current ? "bg-bg-page! border-border-light!" : ""}
···
     </SpeedyLink>
   );
 }
-
-const Divider = () => {
-  return (
-    <svg
-      width="6"
-      height="25"
-      viewBox="0 0 6 25"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M0.5 0.5V7.5L5 12.5L0.5 17.5L0.5 24.5"
-        stroke={theme.colors["border-light"]}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-};