feat: fix titlebar and bottom navigation bar
This commit is contained in:
@@ -1,18 +1,14 @@
|
|||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
import { useDeepBrowsing } from '@/providers/DeepBrowsingProvider'
|
|
||||||
import AccountButton from './AccountButton'
|
import AccountButton from './AccountButton'
|
||||||
import HomeButton from './HomeButton'
|
import HomeButton from './HomeButton'
|
||||||
import NotificationsButton from './NotificationsButton'
|
import NotificationsButton from './NotificationsButton'
|
||||||
import PostButton from './PostButton'
|
import PostButton from './PostButton'
|
||||||
|
|
||||||
export default function BottomNavigationBar() {
|
export default function BottomNavigationBar() {
|
||||||
const { deepBrowsing } = useDeepBrowsing()
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={cn(
|
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',
|
'fixed bottom-0 w-full z-20 bg-background/80 backdrop-blur-xl flex items-center justify-around [&_svg]:size-4 [&_svg]:shrink-0'
|
||||||
deepBrowsing ? 'translate-y-full' : ''
|
|
||||||
)}
|
)}
|
||||||
style={{
|
style={{
|
||||||
height: 'calc(3rem + env(safe-area-inset-bottom))',
|
height: 'calc(3rem + env(safe-area-inset-bottom))',
|
||||||
|
|||||||
@@ -1,6 +1,4 @@
|
|||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
import { useDeepBrowsing } from '@/providers/DeepBrowsingProvider'
|
|
||||||
import { useScreenSize } from '@/providers/ScreenSizeProvider'
|
|
||||||
|
|
||||||
export function Titlebar({
|
export function Titlebar({
|
||||||
children,
|
children,
|
||||||
@@ -9,14 +7,10 @@ export function Titlebar({
|
|||||||
children?: React.ReactNode
|
children?: React.ReactNode
|
||||||
className?: string
|
className?: string
|
||||||
}) {
|
}) {
|
||||||
const { isSmallScreen } = useScreenSize()
|
|
||||||
const { deepBrowsing } = useDeepBrowsing()
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={cn(
|
className={cn(
|
||||||
'sticky top-0 w-full z-20 bg-background duration-700 transition-transform [&_svg]:size-4 [&_svg]:shrink-0',
|
'sticky top-0 w-full z-20 bg-background [&_svg]:size-4 [&_svg]:shrink-0',
|
||||||
isSmallScreen && deepBrowsing ? '-translate-y-full' : '',
|
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
|
|||||||
Reference in New Issue
Block a user