-
Notifications
You must be signed in to change notification settings - Fork 28
Expand file tree
/
Copy pathheader.tsx
More file actions
95 lines (81 loc) · 2.73 KB
/
header.tsx
File metadata and controls
95 lines (81 loc) · 2.73 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
import React, { useCallback } from 'react'
import { cn } from '@/lib/utils'
import { Separator } from '@/components/ui/separator'
import { SidebarTrigger } from '@/components/ui/sidebar'
import Menu from './layout/menu/menu'
import { Search } from './search'
import { Button } from './ui/button'
//import { ProfileDropdown } from './profile-dropdown'
import { useModal } from '@/providers/modal-provider/modal-provider'
import { Modals } from '@/providers/modal-provider/modal-contxet'
import { useTranslation } from 'react-i18next'
import { ThemeSwitch } from './theme-switch'
import RenameDb from '@/features/database/components/rename-db'
import LanguagesDropdown from './languages-dropdown'
import { useIsMobile } from '@/hooks/use-mobile'
interface HeaderProps extends React.HTMLAttributes<HTMLElement> {
fixed?: boolean
ref?: React.Ref<HTMLElement>
}
export const Header = ({
className,
fixed,
children,
...props
}: HeaderProps) => {
const [offset, setOffset] = React.useState(0)
React.useEffect(() => {
const onScroll = () => {
setOffset(document.body.scrollTop || document.documentElement.scrollTop)
}
// Add scroll listener to the body
document.addEventListener('scroll', onScroll, { passive: true })
// Clean up the event listener on unmount
return () => document.removeEventListener('scroll', onScroll)
}, []);
const { t } = useTranslation();
const isMobile = useIsMobile();
return (
<header
className={cn(
'bg-background flex-col md:flex items-center gap-3 p-2 sm:gap-4 ',
fixed && 'header-fixed peer/header fixed z-50 w-[inherit] rounded-md ',
offset > 10 && fixed ? 'shadow-sm' : 'shadow-none',
className
)}
{...props}
>
<div className='grid grid-cols-3 items-center w-full '>
<div className="justify-self-start flex h-8 gap-3 items-center ">
<SidebarTrigger variant='outline' className='scale-125 sm:scale-100' />
<Separator orientation='vertical' className='h-6' />
{!isMobile && <Menu />}
</div>
<div className=" justify-self-center ">
<Search className='hidden lg:flex' placeholder={t("navbar.search")} />
{
isMobile &&
<div className='w-full'>
<RenameDb />
</div>
}
</div>
<div className="justify-self-end flex gap-2">
{
!isMobile &&
<div className='w-full'>
<RenameDb />
</div>
}
<ThemeSwitch />
<LanguagesDropdown />
</div>
</div>
{isMobile && <div className='flex justify-center'>
<Menu />
</div>
}
</header>
)
}
Header.displayName = 'Header'