fix: burger menu

i18next.config.ts

@@ -12,6 +12,7 @@ use(Backend)
       order: ["localStorage", "cookie"],
       caches: ["localStorage", "cookie"],
     },
+    ns: ["common"],
     interpolation: {
       escapeValue: false,
     },

public/locales/en/common.json

@@ -1,5 +1,8 @@
 {
   "words": {
+    "teams": "Teams",
+    "personal_info": "Personal Info",
+    "logout": "Logout",
     "status": "Status",
     "how_to_create_alerts": "How to create Alerts?",
     "how_to_create_reports": "How to create Reports?",

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<PropsWithChildren> = ({ children }) => {
+interface BurgerMenuProps extends PropsWithChildren {
+  header?: ReactNode;
+}
+
+const BurgerMenu: FC<BurgerMenuProps> = ({ header = null, children }) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const windowSize = useResponsive();
   const isMobile = windowSize.sm === false;
@@ -28,6 +32,8 @@ const BurgerMenu: FC<PropsWithChildren> = ({ children }) => {
       </Button>
 
       <Drawer
+        title={header}
+        bodyStyle={{ padding: 30, paddingTop: 0 }}
         width={isMobile ? window.innerWidth : DRAWER_DEFAULT_WIDTH}
         open={isOpen}
         onClose={() => setIsOpen(false)}

src/components/ExploreDataSection/index.module.less

@@ -4,7 +4,7 @@
 }
 
 .header {
-  padding: 8px 20px;
+  padding: 8px 22px;
   overflow: auto;
 }
 

src/components/ExploreDataSection/index.tsx

@@ -20,7 +20,6 @@ import type { ErrorMessage } from "@/types/errorMessage";
 import type { CubeMember } from "@/types/cube";
 import type { ExplorationState } from "@/types/exploration";
 
-import CSVIcon from "@/assets/csv.svg";
 import AlertIcon from "@/assets/alert-logs.svg";
 import ReportIcon from "@/assets/report-logs.svg";
 

src/components/ExploreWorkspace/index.tsx

@@ -48,12 +48,13 @@ interface ExploreProps {
   onOpenModal: (type: string) => void;
   header?: ReactNode;
   subTitle?: ReactNode;
+  icon?: ReactNode;
 }
 
 const Explore: FC<ExploreProps> = (props) => {
   const {
     header = null,
-    subTitle = <span style={{ fontSize: 20, fontWeight: 600 }}>Explore</span>,
+    subTitle = "Explore",
     source: dataSource,
     meta,
     exploration,
@@ -65,6 +66,7 @@ const Explore: FC<ExploreProps> = (props) => {
     loading = false,
     metaLoading = false,
     params: { screenshotMode } = {},
+    icon,
   } = props;
 
   const selector = screenshotMode
@@ -237,6 +239,8 @@ const Explore: FC<ExploreProps> = (props) => {
       divider={false}
       subTitle={subTitle}
       items={sidebar}
+      icon={icon}
+      burgerTitle={subTitle as any}
     >
       {dataSource?.id ? (
         <div id="data-view">

src/components/Header/index.module.less

@@ -1,6 +1,6 @@
 .header {
   display: flex;
-  max-height: 60px;
+  max-height: 59.8px;
   padding: 0 16px;
   line-height: 60px;
 
@@ -53,10 +53,19 @@
   display: none !important;
 }
 
+.mobile {
+  padding-bottom: 0;
+}
+
+.titleMobile {
+  padding-bottom: 0 !important;
+}
+
 .title {
   width: 100%;
-  margin: 0;
+  margin: 0 !important;
   padding: 0;
+  padding-bottom: 16px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;

src/components/Header/index.tsx

@@ -35,7 +35,8 @@ const Header: React.FC<HeaderProps> = ({
       )}
     >
       <Row
-        className={cx(styles.root, isMobile && styles.rootMobile)}
+        className={cx(styles.root, !responsive.lg && styles.rootMobile)}
+        align={"top"}
         justify="space-between"
       >
         <Col span={16} md={12}>
@@ -48,7 +49,10 @@ const Header: React.FC<HeaderProps> = ({
             {title && (
               <Title
                 ellipsis
-                className={cx(isMobile && styles.title)}
+                className={cx(
+                  styles.title,
+                  !responsive.lg && styles.titleMobile
+                )}
                 level={isMobile ? 5 : 4}
               >
                 {title}

src/components/Navbar/index.module.less

@@ -4,6 +4,10 @@
   justify-content: flex-end;
 }
 
+.wrapper {
+  padding: 25px;
+}
+
 .docs {
   position: relative;
   // top: -2px;

src/components/Navbar/index.tsx

@@ -1,6 +1,5 @@
-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,43 +14,46 @@ 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<MenuProps>["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<NavbarProps> = ({
   direction,
-  teams,
+  teams = [],
   userMenu,
   username,
   userAvatar,
+  wrap = false,
+  type = "inline",
 }) => {
   const [, setLocation] = useLocation();
   const { currentTeam, setCurrentTeamId } = CurrentUserStore();
   const [teamsOpen, setTeamsOpen] = useState<boolean>(false);
   const [accountOpen, setAccountOpen] = useState<boolean>(false);
   const { t } = useTranslation(["common"]);
-  const responsive = useResponsive();
 
   const onSelectTeam = (id: string) => {
     setCurrentTeamId(id);
     setTeamsOpen(false);
   };
 
-  const onClick = ({ item }) => {
-    const {
-      props: { href },
-    } = item;
+  const onClick = (href: string) => {
     setLocation(href);
   };
 
@@ -66,11 +68,39 @@ const Navbar: FC<NavbarProps> = ({
     </Button>
   );
 
+  const teamsMenu: MenuItem[] = teams.map((tm) => ({
+    key: tm.id,
+    label: (
+      <Space>
+        {tm.name}
+        {currentTeam?.id === tm.id && (
+          <Tag style={{ margin: 0 }}>{t("common:words.current")}</Tag>
+        )}
+      </Space>
+    ),
+    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 = (
     <Dropdown
       trigger={["click"]}
       onOpenChange={setAccountOpen}
-      menu={{ items: userMenu.map((u, i) => ({ ...u, key: i })), onClick }}
+      menu={{
+        items: userMenuItems,
+      }}
     >
       <Space className={styles.dropdownHeader} align="center">
         <Avatar username={username} img={userAvatar} />
@@ -81,19 +111,44 @@ const Navbar: FC<NavbarProps> = ({
     </Dropdown>
   );
 
+  if (type === "dropdown") {
+    if (!!teams?.length) {
+      const teamMobileMenu: MenuItem = {
+        label: t("common:words.teams"),
+        key: "/teams",
+        children: teamsMenu,
+        type: "group",
+      };
+
+      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: t("common:words.docs"),
+        key: "/docs",
+        onClick: () => onClick("/docs"),
+      });
+    }
+
+    return account;
+  }
+
   return (
-    <Space size={20} direction={direction} align="start">
+    <Space size={20} direction={direction} align="start" wrap={wrap}>
       {docs}
       {!!teams?.length && (
         <Dropdown
           trigger={["click"]}
           onOpenChange={setTeamsOpen}
           menu={{
-            items: teams.map((tm, i) => ({
-              key: i,
-              label: tm.name,
-              onClick: () => onSelectTeam(tm.id),
-            })),
+            items: teamsMenu,
           }}
         >
           <Button>

src/components/QueryFilters/index.module.less

@@ -1,5 +1,6 @@
 .input {
-  min-width: 187px;
+  width: 100%;
+  min-width: 180px;
   height: 42px;
   * {
     color: #a31bcb !important;