Merge pull request #2397 from Agenta-AI/AGE-1401/-collapsible-side-menu

(frontend)[Age 1401]: Collapsible side menu
Agenta-AI · Jan 24, 2025 · 3af3b04 · 3af3b04
2 parents 69bbb6e + b7ed4c8
commit 3af3b04
Show file tree

Hide file tree

Showing 4 changed files with 195 additions and 252 deletions.
diff --git a/agenta-web/src/components/Layout/Layout.tsx b/agenta-web/src/components/Layout/Layout.tsx
@@ -1,6 +1,15 @@
 import React, {useEffect, useMemo, useState} from "react"
-import {Breadcrumb, Button, ConfigProvider, Layout, Modal, Space, Typography, theme} from "antd"
-import Sidebar from "../Sidebar/Sidebar"
+import {
+    Breadcrumb,
+    Button,
+    ConfigProvider,
+    Layout,
+    Modal,
+    Skeleton,
+    Space,
+    Typography,
+    theme,
+} from "antd"
 import {GithubFilled, LinkedinFilled, TwitterOutlined} from "@ant-design/icons"
 import Link from "next/link"
 import {isDemo} from "@/lib/helpers/utils"
@@ -18,7 +27,9 @@ import {JSSTheme, StyleProps as MainStyleProps} from "@/lib/Types"
 import {Lightning} from "@phosphor-icons/react"
 import packageJsonData from "../../../package.json"
 import {useProjectData} from "@/contexts/project.context"
-import {dynamicContext} from "@/lib/helpers/dynamic"
+import {dynamicComponent, dynamicContext} from "@/lib/helpers/dynamic"
+
+const Sidebar: any = dynamicComponent("Sidebar/Sidebar", () => <Skeleton className="w-[236px]" />)
 
 const {Content, Footer} = Layout
 const {Text} = Typography

diff --git a/agenta-web/src/components/Logo/Logo.tsx b/agenta-web/src/components/Logo/Logo.tsx
@@ -3,14 +3,8 @@ import {useMemo} from "react"
 import {useAppTheme} from "../Layout/ThemeContextProvider"
 
 const LOGOS = {
-    dark: {
-        complete: "/assets/dark-complete-transparent-CROPPED.png",
-        onlyIcon: "/assets/dark-logo.svg",
-    },
-    light: {
-        complete: "/assets/light-complete-transparent-CROPPED.png",
-        onlyIcon: "/assets/light-logo.svg",
-    },
+    dark: "/assets/dark-complete-transparent-CROPPED.png",
+    light: "/assets/light-complete-transparent-CROPPED.png",
 }
 
 const Logo: React.FC<Partial<React.ComponentProps<typeof Image>> & {isOnlyIconLogo?: boolean}> = (
@@ -20,18 +14,8 @@ const Logo: React.FC<Partial<React.ComponentProps<typeof Image>> & {isOnlyIconLo
     const {isOnlyIconLogo, ...imageProps} = props
 
     const logoSrc = useMemo(() => LOGOS[appTheme], [appTheme])
-    return isOnlyIconLogo ? (
-        <Image
-            width={40}
-            height={51}
-            {...imageProps}
-            src={logoSrc.onlyIcon}
-            style={{marginRight: "-20px"}}
-            alt="Agenta Logo"
-        />
-    ) : (
-        <Image width={154.8} height={51} {...imageProps} src={logoSrc.complete} alt="Agenta Logo" />
-    )
+
+    return <Image {...imageProps} src={logoSrc} alt="Agenta Logo" width={154.8} height={51} />
 }
 
 export default Logo