From 8794bb18cb91fcd170ca9df9f66e61cca3fac09a Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Mon, 27 Feb 2023 15:29:43 +0800
Subject: [PATCH] Use the dropdown on the reader menu

---
 .../web/components/templates/PrimaryDropdown.tsx     | 12 +++++++++---
 .../web/components/templates/reader/ReaderHeader.tsx |  4 +++-
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/web/components/templates/PrimaryDropdown.tsx b/packages/web/components/templates/PrimaryDropdown.tsx
index d6e8f672f..e3f9da321 100644
--- a/packages/web/components/templates/PrimaryDropdown.tsx
+++ b/packages/web/components/templates/PrimaryDropdown.tsx
@@ -1,12 +1,16 @@
 import { useRouter } from 'next/router'
-import { useCallback } from 'react'
+import { ReactNode, useCallback } from 'react'
 import { useGetViewerQuery } from '../../lib/networking/queries/useGetViewerQuery'
 import { updateTheme } from '../../lib/themeUpdater'
 import { AvatarDropdown } from '../elements/AvatarDropdown'
 import { DropdownMenu, HeaderDropdownAction } from '../patterns/DropdownMenu'
 import { ThemeId } from '../tokens/stitches.config'
 
-export function PrimaryDropdown(): JSX.Element {
+type PrimaryDropdownProps = {
+  children?: ReactNode
+}
+
+export function PrimaryDropdown(props: PrimaryDropdownProps): JSX.Element {
   const { viewerData } = useGetViewerQuery()
   const router = useRouter()
 
@@ -61,7 +65,9 @@ export function PrimaryDropdown(): JSX.Element {
     <DropdownMenu
       username={viewerData?.me.profile.username}
       triggerElement={
-        <AvatarDropdown userInitials={viewerData?.me?.name.charAt(0) ?? ''} />
+        props.children ?? (
+          <AvatarDropdown userInitials={viewerData?.me?.name.charAt(0) ?? ''} />
+        )
       }
       actionHandler={headerDropdownActionHandler}
     />
diff --git a/packages/web/components/templates/reader/ReaderHeader.tsx b/packages/web/components/templates/reader/ReaderHeader.tsx
index 6f610acd0..0abb6d828 100644
--- a/packages/web/components/templates/reader/ReaderHeader.tsx
+++ b/packages/web/components/templates/reader/ReaderHeader.tsx
@@ -106,7 +106,9 @@ function ControlButtonBox(): JSX.Element {
             <TextAa size={25} color="#6A6968" />
           </TooltipWrapped>
         </Button>
-        <DotsThreeOutline size={25} color="#6A6968" />
+        <PrimaryDropdown>
+          <DotsThreeOutline size={25} color="#6A6968" />
+        </PrimaryDropdown>
       </HStack>
 
       <HStack