mirror/chartdb
1
0
Fork 0
mirror of https://github.com/chartdb/chartdb.git synced 2026-02-11 14:09:51 -06:00
Code Issues Packages Projects Releases Wiki Activity

fix: add open and create diagram to side menu (#757)

Browse Source
This commit is contained in:
Guy Ben-Aharon
2025-07-08 13:28:44 +03:00
committed by GitHub
parent 578546a171
commit 67f5ac303e
1 changed files with 64 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/pages/editor-page/editor-sidebar/editor-sidebar.tsx
View File

@@ -10,7 +10,14 @@ import {
SidebarMenuButton,
SidebarMenuItem,
} from '@/components/sidebar/sidebar';
import { Twitter, BookOpen, Group, FileType } from 'lucide-react';
import {
Twitter,
BookOpen,
Group,
FileType,
Plus,
FolderOpen,
} from 'lucide-react';
import { SquareStack, Table, Workflow } from 'lucide-react';
import { useLayout } from '@/hooks/use-layout';
import { useTranslation } from 'react-i18next';
@@ -21,6 +28,8 @@ import ChartDBDarkLogo from '@/assets/logo-dark.png';
import { useTheme } from '@/hooks/use-theme';
import { useChartDB } from '@/hooks/use-chartdb';
import { DatabaseType } from '@/lib/domain/database-type';
import { useDialog } from '@/hooks/use-dialog';
import { Separator } from '@/components/separator/separator';
export interface SidebarItem {
title: string;
@@ -39,9 +48,32 @@ export const EditorSidebar: React.FC<EditorSidebarProps> = () => {
const { isMd: isDesktop } = useBreakpoint('md');
const { effectiveTheme } = useTheme();
const { dependencies, databaseType } = useChartDB();
const { openCreateDiagramDialog, openOpenDiagramDialog } = useDialog();
const items: SidebarItem[] = useMemo(() => {
const baseItems = [
const diagramItems: SidebarItem[] = useMemo(
() => [
{
title: t('menu.file.new'),
icon: Plus,
onClick: () => {
openCreateDiagramDialog();
},
active: false,
},
{
title: t('menu.file.open'),
icon: FolderOpen,
onClick: () => {
openOpenDiagramDialog();
},
active: false,
},
],
[t, openCreateDiagramDialog, openOpenDiagramDialog]
);
const baseItems: SidebarItem[] = useMemo(
() => [
{
title: t('side_panel.tables_section.tables'),
icon: Table,
@@ -99,17 +131,16 @@ export const EditorSidebar: React.FC<EditorSidebarProps> = () => {
},
]
: []),
];
return baseItems;
}, [
selectSidebarSection,
selectedSidebarSection,
t,
showSidePanel,
dependencies,
databaseType,
]);
],
[
selectSidebarSection,
selectedSidebarSection,
t,
showSidePanel,
dependencies,
databaseType,
]
);
const footerItems: SidebarItem[] = useMemo(
() => [
@@ -171,7 +202,25 @@ export const EditorSidebar: React.FC<EditorSidebarProps> = () => {
{/* <SidebarGroupLabel /> */}
<SidebarGroupContent>
<SidebarMenu>
{items.map((item) => (
{diagramItems.map((item) => (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton
className="hover:bg-gray-200 data-[active=true]:bg-gray-100 data-[active=true]:text-pink-600 data-[active=true]:hover:bg-pink-100 dark:hover:bg-gray-800 dark:data-[active=true]:bg-gray-900 dark:data-[active=true]:text-pink-400 dark:data-[active=true]:hover:bg-pink-950"
isActive={item.active}
asChild
tooltip={item.title}
>
<button onClick={item.onClick}>
<item.icon />
<span>{item.title}</span>
</button>
</SidebarMenuButton>
</SidebarMenuItem>
))}
</SidebarMenu>
<Separator className="my-2" />
<SidebarMenu>
{baseItems.map((item) => (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton
className="hover:bg-gray-200 data-[active=true]:bg-gray-100 data-[active=true]:text-pink-600 data-[active=true]:hover:bg-pink-100 dark:hover:bg-gray-800 dark:data-[active=true]:bg-gray-900 dark:data-[active=true]:text-pink-400 dark:data-[active=true]:hover:bg-pink-950"