fixed problem with menu reopening when opening a page in a compressed window
This commit is contained in:
@@ -7,7 +7,7 @@ import {
|
|||||||
SidebarHeader,
|
SidebarHeader,
|
||||||
SidebarMenu,
|
SidebarMenu,
|
||||||
SidebarMenuButton,
|
SidebarMenuButton,
|
||||||
SidebarMenuItem,
|
SidebarMenuItem, useSidebar,
|
||||||
} from "@/components/ui/sidebar"
|
} from "@/components/ui/sidebar"
|
||||||
import { t } from 'i18next';
|
import { t } from 'i18next';
|
||||||
import { cn } from '@root/lib/utils';
|
import { cn } from '@root/lib/utils';
|
||||||
@@ -23,6 +23,7 @@ import {
|
|||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
import { UpdateButton } from "@/components/layout/update-button";
|
import { UpdateButton } from "@/components/layout/update-button";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
|
import { SheetClose } from '@/components/ui/sheet';
|
||||||
|
|
||||||
const menuItems = [
|
const menuItems = [
|
||||||
{ title: 'Home', url: '/home', icon: Home },
|
{ title: 'Home', url: '/home', icon: Home },
|
||||||
@@ -35,6 +36,7 @@ const menuItems = [
|
|||||||
];
|
];
|
||||||
|
|
||||||
export function AppSidebar() {
|
export function AppSidebar() {
|
||||||
|
const { isMobile } = useSidebar();
|
||||||
return (
|
return (
|
||||||
<Sidebar variant="floating" collapsible="icon">
|
<Sidebar variant="floating" collapsible="icon">
|
||||||
<SidebarHeader>
|
<SidebarHeader>
|
||||||
@@ -51,13 +53,8 @@ export function AppSidebar() {
|
|||||||
<SidebarMenu className="gap-3">
|
<SidebarMenu className="gap-3">
|
||||||
{menuItems.map((item) => {
|
{menuItems.map((item) => {
|
||||||
const isActive = location.pathname === item.url;
|
const isActive = location.pathname === item.url;
|
||||||
return (
|
const linkElement = (
|
||||||
<SidebarMenuItem key={item.title} className="my-1">
|
<Link
|
||||||
<SidebarMenuButton
|
|
||||||
asChild
|
|
||||||
isActive={isActive}
|
|
||||||
tooltip={t(item.title)}>
|
|
||||||
<Link
|
|
||||||
key={item.title}
|
key={item.title}
|
||||||
to={item.url}
|
to={item.url}
|
||||||
className={cn(
|
className={cn(
|
||||||
@@ -68,6 +65,20 @@ export function AppSidebar() {
|
|||||||
<item.icon className="h-4 w-4 drop-shadow-md" />
|
<item.icon className="h-4 w-4 drop-shadow-md" />
|
||||||
{t(item.title)}
|
{t(item.title)}
|
||||||
</Link>
|
</Link>
|
||||||
|
)
|
||||||
|
return (
|
||||||
|
<SidebarMenuItem key={item.title} className="my-1">
|
||||||
|
<SidebarMenuButton
|
||||||
|
asChild
|
||||||
|
isActive={isActive}
|
||||||
|
tooltip={t(item.title)}>
|
||||||
|
{isMobile ? (
|
||||||
|
<SheetClose asChild>
|
||||||
|
{linkElement}
|
||||||
|
</SheetClose>
|
||||||
|
) : (
|
||||||
|
linkElement
|
||||||
|
)}
|
||||||
</SidebarMenuButton>
|
</SidebarMenuButton>
|
||||||
</SidebarMenuItem>
|
</SidebarMenuItem>
|
||||||
)
|
)
|
||||||
|
|||||||
Reference in New Issue
Block a user