(frontend)[Age 1401]: Collapsible side menu

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

agenta-web/src/components/Logo/Logo.tsx

@@ -21,14 +21,7 @@ const Logo: React.FC<Partial<React.ComponentProps<typeof Image>> & {isOnlyIconLo
 
     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={40} height={51} {...imageProps} src={logoSrc.onlyIcon} alt="Agenta Logo" />
     ) : (
         <Image width={154.8} height={51} {...imageProps} src={logoSrc.complete} alt="Agenta Logo" />
     )