adding new dashboard view. Muchas wow

ui/src/components/navigation/Navigate.less

@@ -1,9 +1,10 @@
 .navigate {
-  &__logout_Button {
+  &__footer {
     align-items: center;
     justify-content: center;
+    flex-direction: column;
+    gap: 0.5rem;
     width: 100%;
     display: flex;
-
   }
 }

ui/src/components/navigation/Navigation.jsx

@@ -3,26 +3,34 @@
  * Licensed under Apache-2.0 with Commons Clause and Attribution/Naming Clause
  */
 
-import React from 'react';
-import { Nav } from '@douyinfe/semi-ui';
-import { IconStar, IconSetting, IconTerminal } from '@douyinfe/semi-icons';
+import React, { useEffect, useState } from 'react';
+import { Button, Nav } from '@douyinfe/semi-ui';
+import { IconStar, IconSetting, IconTerminal, IconHistogram, IconSidebar } from '@douyinfe/semi-icons';
 import logoWhite from '../../assets/logo_white.png';
+import heart from '../../assets/heart.png';
 import Logout from '../logout/Logout.jsx';
 import { useLocation, useNavigate } from 'react-router-dom';
 
 import './Navigate.less';
-import { useScreenWidth } from '../../hooks/screenWidth.js';
 import { useFeature } from '../../hooks/featureHook.js';
+import { useScreenWidth } from '../../hooks/screenWidth.js';
 
 export default function Navigation({ isAdmin }) {
   const navigate = useNavigate();
   const location = useLocation();
 
   const width = useScreenWidth();
-  const collapsed = width <= 850;
+  const [collapsed, setCollapsed] = useState(width <= 850);
   const watchlistFeature = useFeature('WATCHLIST_MANAGEMENT') || false;
 
+  useEffect(() => {
+    if (width <= 850) {
+      setCollapsed(true);
+    }
+  }, [width]);
+
   const items = [
+    { itemKey: '/dashboard', text: 'Dashboard', icon: <IconHistogram /> },
     { itemKey: '/jobs', text: 'Jobs', icon: <IconTerminal /> },
     { itemKey: '/listings', text: 'Listings', icon: <IconStar /> },
   ];
@@ -51,18 +59,21 @@ export default function Navigation({ isAdmin }) {
 
   return (
     <Nav
-      style={{ height: '100%', width: collapsed ? '' : '13.2rem' }}
+      style={{ height: '100%' }}
       items={items}
       isCollapsed={collapsed}
       selectedKeys={[parsePathName(location.pathname)]}
       onSelect={(key) => {
         navigate(key.itemKey);
       }}
-      header={<img src={logoWhite} width="180" alt="Fredy Logo" />}
+      header={<img src={collapsed ? heart : logoWhite} width={collapsed ? '80' : '160'} alt="Fredy Logo" />}
       footer={
-        <div className="navigate__logout_Button">
+        <Nav.Footer className="navigate__footer">
           <Logout text={!collapsed} />
-        </div>
+          <Button icon={<IconSidebar />} onClick={() => setCollapsed(!collapsed)}>
+            {!collapsed && 'Collapse'}
+          </Button>
+        </Nav.Footer>
       }
     />
   );