Playing around

src/components/Button.tsx

@@ -76,6 +76,7 @@ export type ButtonProps = Pick<
   | 'onHoverOut'
   | 'onPressIn'
   | 'onPressOut'
+  | 'onLayout'
 > &
   AccessibilityProps &
   VariantProps & {

src/components/Layout/Header/index.tsx

@@ -74,6 +74,7 @@ export function Content({
       style={[
         a.flex_1,
         a.justify_center,
+        a.z_20,
         isIOS && align === 'platform' && a.align_center,
         {minHeight: HEADER_SLOT_SIZE},
       ]}>
@@ -88,7 +89,7 @@ export function Slot({children}: {children?: React.ReactNode}) {
   return (
     <View
       style={[
-        a.z_50,
+        a.z_10,
         {
           width: HEADER_SLOT_SIZE,
         },

src/screens/Profile/components/ProfileSubpageHeader.tsx

@@ -1,16 +1,20 @@
+import {useRef, useState} from 'react'
 import {View, Text as RNText} from 'react-native'
 import {useLingui} from '@lingui/react'
 import {msg, plural, Trans} from '@lingui/macro'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 
+import {isWeb} from '#/platform/detection'
 import * as Layout from '#/components/Layout'
-import {atoms as a, useTheme, useBreakpoints, web} from '#/alf'
+import {atoms as a, useTheme, useBreakpoints, web, useGutters} from '#/alf'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {Text} from '#/components/Typography'
 import {Pin_Stroke2_Corner0_Rounded as Pin} from '#/components/icons/Pin'
 import {ChevronBottom_Stroke2_Corner0_Rounded as ChevronDown} from '#/components/icons/Chevron'
 import {Button, ButtonIcon} from '#/components/Button'
 import {sanitizeHandle} from '#/lib/strings/handles'
+import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
+import * as Menu from '#/components/Menu'
 
 export function ProfileSubpageHeader({
   title,
@@ -27,10 +31,32 @@ export function ProfileSubpageHeader({
   const {gtPhone, gtMobile} = useBreakpoints()
   const {_} = useLingui()
   const {top} = useSafeAreaInsets()
+  const [open, setOpen] = useState(false)
+  const baseGutters = useGutters(['compact'])
+
+  const outerSize = useRef({width: 0, height: 0})
+  const buttonSize = useRef({width: 0, height: 0})
+  const outerOffset = ((outerSize.current.width - buttonSize.current.width) / 2) - baseGutters.paddingLeft
 
   return (
+    <>
+      {open && !isWeb && (
+        <View style={[
+          a.fixed,
+          a.inset_0,
+          a.z_40,
+          { backgroundColor: t.palette.black, opacity: 0.7 },
+        ]} />
+      )}
+
       <Layout.Center
-      style={[t.atoms.bg, a.z_10, {paddingTop: top}, web([a.sticky, a.z_10, {top: 0}])]}
+        style={[t.atoms.bg, a.z_50, {paddingTop: top}, web([a.sticky, {top: 0}])]}
+        onLayout={({nativeEvent}) => {
+          outerSize.current = {
+            width: nativeEvent.layout.width,
+            height: nativeEvent.layout.height,
+          }
+        }}
       >
         <Layout.Header.Outer>
           <Layout.Header.BackButton />
@@ -44,7 +70,15 @@ export function ProfileSubpageHeader({
                   paddingHorizontal: 8,
                   paddingRight: 12,
                 },
-            ]}>
+              ]}
+              onPress={() => setOpen(!open)}
+              onLayout={({nativeEvent}) => {
+                buttonSize.current = {
+                  width: nativeEvent.layout.width,
+                  height: nativeEvent.layout.height,
+                }
+              }}
+            >
               {({hovered}) => (
                 <>
                   <View
@@ -54,13 +88,50 @@ export function ProfileSubpageHeader({
                       a.rounded_sm,
                       a.transition_transform,
                       t.atoms.bg_contrast_25,
-                    hovered && {
+                      (hovered && !open) && {
                         transform: [{scaleX: 1.01}, {scaleY: 1.1}],
                       },
                     ]}
                   />
+                  <View
+                    style={[
+                      a.absolute,
+                      a.inset_0,
+                      a.rounded_sm,
+                      a.transition_transform,
+                      a.z_20,
+                      t.atoms.bg_contrast_25,
+                      {
+                        opacity: 0,
+                      },
+                      open && [t.atoms.shadow_lg, {
+                        opacity: 1,
+                        bottom: 'auto',
+                        left: outerOffset * -1,
+                        right: outerOffset * -1,
+                      }]
+                    ]}
+                  >
+                    {open && (
+                      <View style={[baseGutters]}>
+                        <View style={[a.flex_row, a.align_center, a.gap_sm]}>
+                          <UserAvatar
+                            type='algo'
+                            size={58}
+                            avatar={avatar}
+                          />
+                          <View style={[
+                          ]}>
+                            <Text style={[a.text_xl, a.font_heavy]}>{title}</Text>
+                          </View>
+                        </View>
+                      </View>
+                    )}
+                  </View>
 
-                <View style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
+                  <View style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm, open && {
+                    left: outerOffset * -1,
+                  }]}>
                     {avatar && (
                       <UserAvatar size={32} type="algo" avatar={avatar} />
                     )}
@@ -121,5 +192,6 @@ export function ProfileSubpageHeader({
           </Layout.Header.Slot>
         </Layout.Header.Outer>
       </Layout.Center>
+    </>
   )
 }