perf(video): perf
This commit is contained in:
@@ -8,6 +8,7 @@ import {
|
||||
Flex,
|
||||
Menu,
|
||||
NavLink,
|
||||
ScrollArea,
|
||||
Space,
|
||||
Stack,
|
||||
Tooltip,
|
||||
@@ -227,101 +228,103 @@ export default function AppLayout({
|
||||
</AppShell.Header>
|
||||
<AppShell.Navbar style={{ transition: "width 0.2s ease" }}>
|
||||
<Stack justify="start" gap={4} flex={1}>
|
||||
{activeHeaderMenu?.items?.map((item) => {
|
||||
if (item.items?.length) {
|
||||
if (matches) {
|
||||
if (isOpen) {
|
||||
return (
|
||||
<LinksGroup
|
||||
key={item.url}
|
||||
item={item}
|
||||
toggleMobile={toggleMobile}
|
||||
routerUrl={activeHeaderMenu.url}
|
||||
initiallyOpened={true}
|
||||
/>
|
||||
)
|
||||
<ScrollArea h="calc(100vh - 95px)">
|
||||
{activeHeaderMenu?.items?.map((item) => {
|
||||
if (item.items?.length) {
|
||||
if (matches) {
|
||||
if (isOpen) {
|
||||
return (
|
||||
<LinksGroup
|
||||
key={item.url}
|
||||
item={item}
|
||||
toggleMobile={toggleMobile}
|
||||
routerUrl={activeHeaderMenu.url}
|
||||
initiallyOpened={true}
|
||||
/>
|
||||
)
|
||||
} else {
|
||||
return (
|
||||
<Menu
|
||||
width={"auto"}
|
||||
key={item.url + "desktop"}
|
||||
position="right-start"
|
||||
trigger="hover"
|
||||
openDelay={100}
|
||||
closeDelay={200}>
|
||||
<Menu.Target>
|
||||
<NavLink
|
||||
noWrap={true}
|
||||
leftSection={
|
||||
item.icon && (
|
||||
<ClientIcon
|
||||
icon={item.icon}
|
||||
style={{ width: "1rem", height: "1rem" }}
|
||||
/>
|
||||
)
|
||||
}
|
||||
label={item.title}
|
||||
/>
|
||||
</Menu.Target>
|
||||
<Menu.Dropdown>
|
||||
{item.items?.map((sub) =>
|
||||
renderMenuItem(
|
||||
sub,
|
||||
`${activeHeaderMenu.url}/${item.url}`
|
||||
)
|
||||
)}
|
||||
</Menu.Dropdown>
|
||||
</Menu>
|
||||
)
|
||||
}
|
||||
} else {
|
||||
return (
|
||||
<Menu
|
||||
width={"auto"}
|
||||
key={item.url + "desktop"}
|
||||
position="right-start"
|
||||
trigger="hover"
|
||||
openDelay={100}
|
||||
closeDelay={200}>
|
||||
<Menu.Target>
|
||||
<NavLink
|
||||
noWrap={true}
|
||||
leftSection={
|
||||
item.icon && (
|
||||
<ClientIcon
|
||||
icon={item.icon}
|
||||
style={{ width: "1rem", height: "1rem" }}
|
||||
/>
|
||||
)
|
||||
}
|
||||
label={item.title}
|
||||
/>
|
||||
</Menu.Target>
|
||||
<Menu.Dropdown>
|
||||
{item.items?.map((sub) =>
|
||||
renderMenuItem(
|
||||
sub,
|
||||
`${activeHeaderMenu.url}/${item.url}`
|
||||
)
|
||||
)}
|
||||
</Menu.Dropdown>
|
||||
</Menu>
|
||||
<Box key={item.url + "mobile"} hiddenFrom="sm">
|
||||
<LinksGroup
|
||||
item={item}
|
||||
toggleMobile={toggleMobile}
|
||||
routerUrl={activeHeaderMenu.url}
|
||||
initiallyOpened={true}
|
||||
/>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
} else {
|
||||
return (
|
||||
<Box key={item.url + "mobile"} hiddenFrom="sm">
|
||||
<LinksGroup
|
||||
item={item}
|
||||
toggleMobile={toggleMobile}
|
||||
routerUrl={activeHeaderMenu.url}
|
||||
initiallyOpened={true}
|
||||
<Tooltip
|
||||
key={item.url}
|
||||
events={{
|
||||
hover: !isOpen && !mobileOpened,
|
||||
focus: false,
|
||||
touch: false,
|
||||
}}
|
||||
label={item.title || ""}
|
||||
position="right"
|
||||
openDelay={100}
|
||||
closeDelay={200}
|
||||
transitionProps={{ duration: 100 }}>
|
||||
<NavLink
|
||||
// href={`/${activeHeaderMenu.url}/${item.url}`}
|
||||
onClick={() => {
|
||||
toggleMobile()
|
||||
router.push(`/${activeHeaderMenu.url}/${item.url}`)
|
||||
}}
|
||||
noWrap={true}
|
||||
active={pathname.startsWith(
|
||||
`/${activeHeaderMenu.url}/${item.url}`
|
||||
)}
|
||||
leftSection={
|
||||
<ClientIcon
|
||||
icon={item.icon}
|
||||
style={{ width: "1rem", height: "1rem" }}
|
||||
/>
|
||||
}
|
||||
label={item.title}
|
||||
/>
|
||||
</Box>
|
||||
</Tooltip>
|
||||
)
|
||||
}
|
||||
} else {
|
||||
return (
|
||||
<Tooltip
|
||||
key={item.url}
|
||||
events={{
|
||||
hover: !isOpen && !mobileOpened,
|
||||
focus: false,
|
||||
touch: false,
|
||||
}}
|
||||
label={item.title || ""}
|
||||
position="right"
|
||||
openDelay={100}
|
||||
closeDelay={200}
|
||||
transitionProps={{ duration: 100 }}>
|
||||
<NavLink
|
||||
// href={`/${activeHeaderMenu.url}/${item.url}`}
|
||||
onClick={() => {
|
||||
toggleMobile()
|
||||
router.push(`/${activeHeaderMenu.url}/${item.url}`)
|
||||
}}
|
||||
noWrap={true}
|
||||
active={pathname.startsWith(
|
||||
`/${activeHeaderMenu.url}/${item.url}`
|
||||
)}
|
||||
leftSection={
|
||||
<ClientIcon
|
||||
icon={item.icon}
|
||||
style={{ width: "1rem", height: "1rem" }}
|
||||
/>
|
||||
}
|
||||
label={item.title}
|
||||
/>
|
||||
</Tooltip>
|
||||
)
|
||||
}
|
||||
})}
|
||||
})}
|
||||
</ScrollArea>
|
||||
</Stack>
|
||||
<Stack justify="center" gap={0}>
|
||||
<Flex
|
||||
|
||||
Reference in New Issue
Block a user