From a833b4d3679f3f2fdbdaffcb74e473ad64ecc795 Mon Sep 17 00:00:00 2001 From: Sedrak Adoyan Date: Thu, 23 Nov 2023 18:12:04 +0400 Subject: [PATCH 01/12] fix: navbar --- src/components/BurgerMenu/index.tsx | 10 ++- src/components/ExploreWorkspace/index.tsx | 1 + src/components/Navbar/index.module.less | 4 + src/components/Navbar/index.tsx | 104 ++++++++++++++++++---- src/components/Sidebar/index.tsx | 10 ++- src/layouts/AppLayout/index.tsx | 25 +++++- src/layouts/SettingsLayout/index.tsx | 1 + src/layouts/SidebarLayout/index.tsx | 3 + src/mocks/user.ts | 4 - src/pages/Explore/index.tsx | 2 + src/pages/Models/index.tsx | 1 + 11 files changed, 136 insertions(+), 29 deletions(-) diff --git a/src/components/BurgerMenu/index.tsx b/src/components/BurgerMenu/index.tsx index 8fa71f22..f865ebe5 100644 --- a/src/components/BurgerMenu/index.tsx +++ b/src/components/BurgerMenu/index.tsx @@ -6,11 +6,15 @@ import { Suspense } from "react"; import Button from "@/components/Button"; import useLocation from "@/hooks/useLocation"; -import type { FC, PropsWithChildren } from "react"; +import type { FC, PropsWithChildren, ReactNode } from "react"; const DRAWER_DEFAULT_WIDTH = 320; -const BurgerMenu: FC = ({ children }) => { +interface BurgerMenuProps extends PropsWithChildren { + header?: ReactNode; +} + +const BurgerMenu: FC = ({ header = null, children }) => { const [isOpen, setIsOpen] = useState(false); const windowSize = useResponsive(); const isMobile = windowSize.sm === false; @@ -28,6 +32,8 @@ const BurgerMenu: FC = ({ children }) => { setIsOpen(false)} diff --git a/src/components/ExploreWorkspace/index.tsx b/src/components/ExploreWorkspace/index.tsx index 078acfc4..92297b2c 100644 --- a/src/components/ExploreWorkspace/index.tsx +++ b/src/components/ExploreWorkspace/index.tsx @@ -237,6 +237,7 @@ const Explore: FC = (props) => { divider={false} subTitle={subTitle} items={sidebar} + burgerTitle={subTitle as any} > {dataSource?.id ? (
diff --git a/src/components/Navbar/index.module.less b/src/components/Navbar/index.module.less index 16a26b1b..5100f084 100644 --- a/src/components/Navbar/index.module.less +++ b/src/components/Navbar/index.module.less @@ -4,6 +4,10 @@ justify-content: flex-end; } +.wrapper { + padding: 25px; +} + .docs { position: relative; // top: -2px; diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx index 38853874..de1f7560 100644 --- a/src/components/Navbar/index.tsx +++ b/src/components/Navbar/index.tsx @@ -1,6 +1,6 @@ import { useResponsive } from "ahooks"; import { useTranslation } from "react-i18next"; -import { Dropdown, Button, Space } from "antd"; +import { Dropdown, Button, Space, Tag } from "antd"; import { DownOutlined } from "@ant-design/icons"; import cn from "classnames"; @@ -15,26 +15,33 @@ import DocsIcon from "@/assets/docs.svg"; import styles from "./index.module.less"; import type { FC } from "react"; +import type { MenuProps } from "antd"; -interface MenuItem { +interface NavItem { label: string; href: string; } +type MenuItem = Required["items"][number]; + interface NavbarProps { - userMenu: MenuItem[]; + userMenu: NavItem[]; username?: string | null; userAvatar?: string | null; direction?: "horizontal" | "vertical"; teams?: Team[]; + wrap?: boolean; + type?: "inline" | "dropdown"; } const Navbar: FC = ({ direction, - teams, + teams = [], userMenu, username, userAvatar, + wrap = false, + type = "inline", }) => { const [, setLocation] = useLocation(); const { currentTeam, setCurrentTeamId } = CurrentUserStore(); @@ -48,10 +55,7 @@ const Navbar: FC = ({ setTeamsOpen(false); }; - const onClick = ({ item }) => { - const { - props: { href }, - } = item; + const onClick = (href: string) => { setLocation(href); }; @@ -66,11 +70,39 @@ const Navbar: FC = ({ ); + const teamsMenu: MenuItem[] = teams.map((tm) => ({ + key: tm.id, + label: ( + + {tm.name} + {currentTeam?.id === tm.id && ( + {t("common:words.current")} + )} + + ), + onClick: () => onSelectTeam(tm.id), + })); + + teamsMenu.push({ + key: "/teams", + label: "Edit teams", + onClick: () => onClick("/teams"), + }); + + const userMenuItems: MenuItem[] = userMenu.map((u) => ({ + label: u.label, + key: u.href, + onClick: () => onClick(u.href), + type: "item", + })); + const account = ( ({ ...u, key: i })), onClick }} + menu={{ + items: userMenuItems, + }} > @@ -81,19 +113,61 @@ const Navbar: FC = ({ ); + if (type === "dropdown") { + if (!!teams?.length) { + const teamMobileMenu: MenuItem = { + label: "Teams", + key: "/teams", + children: teamsMenu, + type: "group", + }; + + teamMobileMenu?.children?.push({ + label: "Edit teams", + key: "/teams", + onClick: () => onClick("/teams"), + }); + + userMenuItems.unshift({ type: "divider" }); + userMenuItems.unshift(teamMobileMenu); + userMenuItems.unshift({ type: "divider" }); + + userMenuItems.unshift({ + label: t("common:words.docs"), + key: "/docs", + onClick: () => onClick("/docs"), + }); + } else { + userMenuItems.unshift({ + label: "Edit teams", + key: "/teams", + onClick: () => onClick("/teams"), + }); + userMenuItems.unshift({ + label: t("common:words.docs"), + key: "/docs", + onClick: () => onClick("/docs"), + }); + } + + return account; + } + return ( - + {docs} {!!teams?.length && ( ({ - key: i, - label: tm.name, - onClick: () => onSelectTeam(tm.id), - })), + items: teamsMenu, }} >