Merge pull request #80 from axif0/testing

Improve Responsive Layout and Sidebar Navigation
karmada-io · Aug 14, 2024 · 97a4171 · 97a4171
2 parents c686b70 + bb26a47
commit 97a4171
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 9 deletions.
diff --git a/ui/apps/dashboard/src/layout/index.tsx b/ui/apps/dashboard/src/layout/index.tsx
@@ -1,27 +1,38 @@
-import { FC, ReactNode } from 'react';
+import { FC ,ReactNode} from 'react';
 import { Layout as AntdLayout } from 'antd';
 import { Outlet, Navigate } from 'react-router-dom';
 import Header from './header';
 import Sidebar from './sidebar';
 import { cn } from '@/utils/cn.ts';
 import { useAuth } from '@/components/auth';
 import { getSidebarWidth } from '@/utils/i18n.tsx';
+import { useWindowSize } from "@uidotdev/usehooks";
 
 const { Sider: AntdSider, Content: AntdContent } = AntdLayout;
 
 export const MainLayout: FC = () => {
   const { authenticated } = useAuth();
+  const { width } = useWindowSize();
+  const isSmallScreen = width !== null && width <= 768;
+
   if (!authenticated) {
     return <Navigate to="/login" />;
   }
+
   return (
     <>
       <Header />
-      <AntdLayout className={cn('h-[calc(100vh-48px)]', 'overflow-hidden')}>
-        <AntdSider width={getSidebarWidth()}>
-          <Sidebar />
+      <AntdLayout className={cn('h-[calc(100vh-48px)]', 'overflow-hidden', 'flex')}>
+        <AntdSider
+          width={getSidebarWidth()}
+          collapsible
+          collapsed={isSmallScreen}
+          breakpoint="lg"
+          trigger={null}
+        >
+          <Sidebar collapsed={isSmallScreen} />
         </AntdSider>
-        <AntdContent>
+        <AntdContent >
           <Outlet />
         </AntdContent>
       </AntdLayout>

diff --git a/ui/apps/dashboard/src/layout/sidebar.tsx b/ui/apps/dashboard/src/layout/sidebar.tsx
@@ -6,11 +6,16 @@ import {
   flattenRoutes,
 } from '@/routes/route.tsx';
 import { useMatches, useNavigate } from 'react-router-dom';
-import { useMemo } from 'react';
+import { FC,useMemo } from 'react';
 import _ from 'lodash';
 import { getSidebarWidth } from '@/utils/i18n.tsx';
+import { cn } from '@/utils/cn.ts';
 
-const Sidebar = () => {
+interface SidebarProps {
+  collapsed: boolean;
+}
+
+const Sidebar: FC<SidebarProps> = ({ collapsed }) => {
   const navigate = useNavigate();
   const onClick: MenuProps['onClick'] = (e) => {
     const url = flattenRoutes[e.key];
@@ -25,10 +30,12 @@ const Sidebar = () => {
       .map((m) => (m.handle as IRouteObjectHandle).sidebarKey);
   }, [matches]);
   return (
-    <div className={'w-full h-full overflow-y-auto'}>
+    <div
+      className={cn('w-full', 'h-full', 'overflow-y-auto')}
+    >
       <Menu
         onClick={onClick}
-        style={{ width: getSidebarWidth() }}
+        style={{ width: collapsed ? '80px' : getSidebarWidth() }}
         selectedKeys={selectKeys}
         defaultOpenKeys={
           selectKeys.length > 0
@@ -37,6 +44,7 @@ const Sidebar = () => {
         }
         mode="inline"
         items={menuItems}
+        inlineCollapsed={collapsed}
       />
     </div>
   );