hq/Bpistle
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: fix titlebar and bottom navigation bar

Browse source
This commit is contained in:
codytseng 2025-01-26 16:39:16 +08:00
parent 23bf7fd005
commit c26490f16e
2 changed files with 2 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/components/BottomNavigationBar/index.tsx
View file

@ -1,18 +1,14 @@
import { cn } from '@/lib/utils'
import { useDeepBrowsing } from '@/providers/DeepBrowsingProvider'
import AccountButton from './AccountButton'
import HomeButton from './HomeButton'
import NotificationsButton from './NotificationsButton'
import PostButton from './PostButton'
export default function BottomNavigationBar() {
const { deepBrowsing } = useDeepBrowsing()
return (
<div
className={cn(
'fixed bottom-0 w-full z-20 bg-background/80 backdrop-blur-xl duration-700 transition-transform flex items-center justify-around [&_svg]:size-4 [&_svg]:shrink-0',
deepBrowsing ? 'translate-y-full' : ''
'fixed bottom-0 w-full z-20 bg-background/80 backdrop-blur-xl flex items-center justify-around [&_svg]:size-4 [&_svg]:shrink-0'
)}
style={{
height: 'calc(3rem + env(safe-area-inset-bottom))',

8
src/components/Titlebar/index.tsx
View file

@ -1,6 +1,4 @@
import { cn } from '@/lib/utils'
import { useDeepBrowsing } from '@/providers/DeepBrowsingProvider'
import { useScreenSize } from '@/providers/ScreenSizeProvider'
export function Titlebar({
children,
@ -9,14 +7,10 @@ export function Titlebar({
children?: React.ReactNode
className?: string
}) {
const { isSmallScreen } = useScreenSize()
const { deepBrowsing } = useDeepBrowsing()
return (
<div
className={cn(
'sticky top-0 w-full z-20 bg-background duration-700 transition-transform [&_svg]:size-4 [&_svg]:shrink-0',
isSmallScreen && deepBrowsing ? '-translate-y-full' : '',
'sticky top-0 w-full z-20 bg-background [&_svg]:size-4 [&_svg]:shrink-0',
className
)}
>