From 696a7cd965d8fd27c8c2970946e61f578283d8a5 Mon Sep 17 00:00:00 2001
From: Jared Pereira <jared@awarm.space>
Date: Tue, 28 Apr 2026 21:45:14 -0400
Subject: [PATCH] fix mobile nav trigger and component structure

---
 components/ActionBar/DesktopNavigation.tsx | 19 ++++--
 components/ActionBar/MobileNavigation.tsx  | 78 +++-------------------
 components/ActionBar/Sidebar.tsx           |  9 +++
 components/PageLayouts/DashboardLayout.tsx | 44 +++++++++---
 4 files changed, 67 insertions(+), 83 deletions(-)

diff --git a/components/ActionBar/DesktopNavigation.tsx b/components/ActionBar/DesktopNavigation.tsx
index d2d63068..cfb7bbac 100644
--- a/components/ActionBar/DesktopNavigation.tsx
+++ b/components/ActionBar/DesktopNavigation.tsx
@@ -13,7 +13,7 @@ import { ActionButton } from "./ActionButton";
 import { AccountSmall } from "components/Icons/AccountSmall";
 import { TabsSmall } from "components/Icons/TabsSmall";
 
-export const DesktopNavigation = (props: {
+type NavigationProps = {
   currentPage: navPages;
   publication?: string;
   actions?: React.ReactNode;
@@ -21,11 +21,10 @@ export const DesktopNavigation = (props: {
   currentTab?: string;
   onTabClick?: (tab: string) => void;
   onTabHover?: (tab: string) => void;
-}) => {
+};
+
+export const NavigationContent = (props: NavigationProps) => {
   let { identity } = useIdentityData();
-  let thisPublication = identity?.publications?.find(
-    (pub) => pub.uri === props.publication,
-  );
 
   let isWriterPage =
     props.currentPage === "home" ||
@@ -33,7 +32,7 @@ export const DesktopNavigation = (props: {
     props.currentPage === "pub";
 
   return (
-    <Sidebar alwaysOpen>
+    <>
       {props.actions}
 
       {props.tabs && Object.keys(props.tabs).length > 1 && (
@@ -95,6 +94,14 @@ export const DesktopNavigation = (props: {
           }
         />
       )}
+    </>
+  );
+};
+
+export const DesktopNavigation = (props: NavigationProps) => {
+  return (
+    <Sidebar alwaysOpen>
+      <NavigationContent {...props} />
     </Sidebar>
   );
 };
diff --git a/components/ActionBar/MobileNavigation.tsx b/components/ActionBar/MobileNavigation.tsx
index 64808602..74d833c4 100644
--- a/components/ActionBar/MobileNavigation.tsx
+++ b/components/ActionBar/MobileNavigation.tsx
@@ -1,23 +1,11 @@
 "use client";
 import { useEffect, useRef, useState } from "react";
 
-import * as Dialog from "@radix-ui/react-dialog";
 import { MediaContents } from "components/Media";
 import { Separator } from "components/Layout";
 import { MenuSmall } from "components/Icons/MenuSmall";
-import { AccountSmall } from "components/Icons/AccountSmall";
 import { CloseTiny } from "components/Icons/CloseTiny";
-import { Sidebar } from "./Sidebar";
-import {
-  WriterButton,
-  ReaderButton,
-  NotificationButton,
-} from "./NavigationButtons";
-import { PublicationButtons } from "./Publications";
-import { ProfileButton } from "./ProfileButton";
-import { ActionButton } from "./ActionButton";
-import { LoginModal } from "components/LoginButton";
-import { useIdentityData } from "components/IdentityProvider";
+import { useSidebarStore } from "./Sidebar";
 import { SearchTiny } from "components/Icons/SearchTiny";
 import { useCardBorderHidden } from "components/Pages/useCardBorderHidden";
 
@@ -115,7 +103,7 @@ export const MobileNavigation = (props: {
             </>
           ) : (
             <>
-              <MobileSidebar />
+              <MobileSidebarTrigger />
               <div className="flex-1" />
               <button
                 onClick={() => {
@@ -135,59 +123,15 @@ export const MobileNavigation = (props: {
   );
 };
 
-const MobileSidebar = () => {
-  let { identity } = useIdentityData();
+const MobileSidebarTrigger = () => {
+  let setOpen = useSidebarStore((s) => s.setOpen);
   return (
-    <Dialog.Root>
-      <Dialog.Trigger asChild>
-        <button className="flex gap-1 items-center text-secondary font-bold">
-          <MenuSmall />
-          Home
-        </button>
-      </Dialog.Trigger>
-      <Dialog.Portal>
-        <Dialog.Overlay className="fixed z-50 inset-0 bg-primary opacity-60 data-[state=open]:animate-overlayShow" />
-        <Dialog.Content className="mobile-sidebar-content fixed z-50 left-0 top-0 h-dvh outline-none">
-          <Dialog.Title className="sr-only">Navigation</Dialog.Title>
-          <Sidebar
-            mobile
-            alwaysOpen
-            className="my-2! ml-2 h-[calc(100dvh-16px)]! bg-bg-page!"
-          >
-            <div className="text-tertiary uppercase text-sm px-1">
-              PUBLICATIONS
-            </div>
-            <PublicationButtons currentPage="home" />
-
-            <div className="flex-1" />
-            <WriterButton />
-            <ReaderButton
-              subs={
-                identity?.publication_subscriptions?.length !== 0 &&
-                identity?.publication_subscriptions?.length !== undefined
-              }
-            />
-            {identity?.atp_did && <NotificationButton />}
-            {identity ? (
-              <>
-                <hr className="border-border-light my-1" />
-                <ProfileButton />
-              </>
-            ) : (
-              <LoginModal
-                asChild
-                trigger={
-                  <ActionButton
-                    secondary
-                    icon={<AccountSmall />}
-                    label="Log In/Sign Up"
-                  />
-                }
-              />
-            )}
-          </Sidebar>
-        </Dialog.Content>
-      </Dialog.Portal>
-    </Dialog.Root>
+    <button
+      className="flex gap-1 items-center text-secondary font-bold"
+      onClick={() => setOpen(true)}
+    >
+      <MenuSmall />
+      Home
+    </button>
   );
 };
diff --git a/components/ActionBar/Sidebar.tsx b/components/ActionBar/Sidebar.tsx
index 79d50984..e162b6a8 100644
--- a/components/ActionBar/Sidebar.tsx
+++ b/components/ActionBar/Sidebar.tsx
@@ -2,12 +2,21 @@
 import { Media } from "components/Media";
 import { useCardBorderHidden } from "components/Pages/useCardBorderHidden";
 import { createContext, useState } from "react";
+import { create } from "zustand";
 
 export const SidebarContext = createContext({
   open: false,
   setChildForceOpen: (b: boolean) => {},
 });
 
+export const useSidebarStore = create<{
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}>((set) => ({
+  open: false,
+  setOpen: (open) => set({ open }),
+}));
+
 export function Sidebar(props: {
   children?: React.ReactNode;
   alwaysOpen?: boolean;
diff --git a/components/PageLayouts/DashboardLayout.tsx b/components/PageLayouts/DashboardLayout.tsx
index 6975bc56..3fb4cedb 100644
--- a/components/PageLayouts/DashboardLayout.tsx
+++ b/components/PageLayouts/DashboardLayout.tsx
@@ -1,8 +1,13 @@
 "use client";
 import { useState, createContext, useContext } from "react";
 import { useSearchParams } from "next/navigation";
+import * as Dialog from "@radix-ui/react-dialog";
 import { navPages } from "components/ActionBar/NavigationButtons";
-import { DesktopNavigation } from "components/ActionBar/DesktopNavigation";
+import {
+  DesktopNavigation,
+  NavigationContent,
+} from "components/ActionBar/DesktopNavigation";
+import { Sidebar, useSidebarStore } from "components/ActionBar/Sidebar";
 import { create } from "zustand";
 import { InterfaceState, useIdentityData } from "components/IdentityProvider";
 import { updateIdentityInterfaceState } from "actions/updateIdentityInterfaceState";
@@ -140,20 +145,39 @@ export function DashboardLayout<
 
   let { content } = props.tabs[tab];
 
+  let navigationProps = {
+    currentPage: props.currentPage,
+    publication: props.publication,
+    actions: props.actions,
+    tabs: props.tabs,
+    currentTab: tab as string,
+    onTabClick: (t: string) => setTabWithUrl(t as keyof T),
+    onTabHover: props.onTabHover,
+  };
+
+  let { open, setOpen } = useSidebarStore();
+
   return (
     <DashboardIdContext.Provider value={props.id}>
       <div
         className={`dashboard pwa-padding relative max-w-(--breakpoint-lg) w-full h-full mx-auto flex sm:flex-row flex-col sm:items-stretch sm:px-6`}
       >
-        <DesktopNavigation
-          currentPage={props.currentPage}
-          publication={props.publication}
-          actions={props.actions}
-          tabs={props.tabs}
-          currentTab={tab as string}
-          onTabClick={(t) => setTabWithUrl(t as keyof T)}
-          onTabHover={props.onTabHover}
-        />
+        <DesktopNavigation {...navigationProps} />
+        <Dialog.Root open={open} onOpenChange={setOpen}>
+          <Dialog.Portal>
+            <Dialog.Overlay className="fixed z-50 inset-0 bg-primary opacity-60 data-[state=open]:animate-overlayShow" />
+            <Dialog.Content className="mobile-sidebar-content fixed z-50 left-0 top-0 h-dvh outline-none">
+              <Dialog.Title className="sr-only">Navigation</Dialog.Title>
+              <Sidebar
+                mobile
+                alwaysOpen
+                className="my-2! ml-2 h-[calc(100dvh-16px)]! bg-bg-page!"
+              >
+                <NavigationContent {...navigationProps} />
+              </Sidebar>
+            </Dialog.Content>
+          </Dialog.Portal>
+        </Dialog.Root>
         {content}
       </div>
     </DashboardIdContext.Provider>
-- 
2.51.2