From 999a823291af2c126d0a68e77c757728d27d951d Mon Sep 17 00:00:00 2001
From: Arnaud <arnaud@status.im>
Date: Wed, 23 Oct 2024 10:41:16 +0200
Subject: [PATCH] Update menu integration

---
 src/components/Logo/Logo.tsx |  8 +++++++-
 src/components/Menu/Menu.tsx | 13 +++++++------
 src/components/Menu/menu.css | 36 +++++++++++++++++++++---------------
 src/routes/dashboard.tsx     | 15 ++++++---------
 src/routes/index.tsx         |  2 +-
 5 files changed, 42 insertions(+), 32 deletions(-)

diff --git a/src/components/Logo/Logo.tsx b/src/components/Logo/Logo.tsx
index af31432..648edfb 100644
--- a/src/components/Logo/Logo.tsx
+++ b/src/components/Logo/Logo.tsx
@@ -1,6 +1,12 @@
-export function Logo() {
+type Props = {
+  onClick?: () => void;
+};
+
+export function Logo({ onClick }: Props) {
   return (
     <svg
+      onClick={onClick}
+      className="logo"
       width="30"
       height="34"
       viewBox="0 0 30 34"
diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
index 09793c7..fe5b55d 100644
--- a/src/components/Menu/Menu.tsx
+++ b/src/components/Menu/Menu.tsx
@@ -19,9 +19,6 @@ export type MenuItem =
   | {
       type: "space";
     }
-  | {
-      type: "empty";
-    }
   | {
       type: "item";
       Component: ComponentType<MenuItemComponentProps>;
@@ -65,6 +62,12 @@ export function Menu({
     }
   }, [expanded, onOpen]);
 
+  const onLogoClick = () => {
+    if (!isExpanded) {
+      setIsExpanded(true);
+    }
+  };
+
   const onExpandMenu = () => setIsExpanded(!isExpanded);
 
   const renderItem = (i: MenuItem, index: number) => {
@@ -73,8 +76,6 @@ export function Menu({
         return <hr className="menu-item-separator" key={index}></hr>;
       case "space":
         return <div className="menu-space" key={index}></div>;
-      case "empty":
-        return <div className="menu-empty" key={index}></div>;
       case "item":
         return (
           <i.Component onClick={onClose} className="menu-item" key={index} />
@@ -94,7 +95,7 @@ export function Menu({
         {...attributes({ "aria-expanded": expanded })}>
         <div className="menu-container">
           <div className="menu-header">
-            <Logo />
+            <Logo onClick={onLogoClick} />
             <Logotype height={34} className={"menu-logotype"} />
             <div className="menu-header-right">
               <ExpandIcon onClick={onExpandMenu}></ExpandIcon>
diff --git a/src/components/Menu/menu.css b/src/components/Menu/menu.css
index 60f16c7..90fb2c9 100644
--- a/src/components/Menu/menu.css
+++ b/src/components/Menu/menu.css
@@ -5,15 +5,22 @@
   border-radius: var(--codex-border-radius);
   transform: translatex(-500px);
   transition: transform 0.25s;
-  position: fixed;
+  position: sticky;
   z-index: 10;
   view-transition-name: main-menu;
   height: 100%;
   top: 0;
-  left: 0;
-  width: 75px;
+  width: 80px;
   transition: width 0.5s;
-  min-width: 75px;
+  min-width: 0;
+}
+
+.logo {
+  cursor: pointer;
+}
+
+.menu--expanded .logo {
+  cursor: default;
 }
 
 .menu--expanded {
@@ -29,8 +36,10 @@
 .menu-container {
   display: flex;
   flex-direction: column;
-  flex: 1;
   padding: 12px;
+  position: sticky;
+  top: 0;
+  height: calc(100vh - 24px);
 }
 
 .menu-header-right {
@@ -53,10 +62,11 @@
 .menu-items {
   border-top: 2px solid var(--codex-border-color);
   padding-top: 1.5rem;
-  flex: 1;
   display: flex;
   flex-direction: column;
   position: relative;
+  height: 100%;
+  margin-bottom: 2.5rem;
 }
 
 .menu[aria-expanded] {
@@ -134,15 +144,15 @@
 }
 
 .menu-items:has(.active:nth-child(14))::before {
-  bottom: 133px;
+  top: calc(100vh - 246px);
 }
 
 .menu-items:has(.active:nth-child(15))::before {
-  bottom: 90px;
+  top: calc(100vh - 203px);
 }
 
 .menu-items:has(.active:nth-child(16))::before {
-  bottom: 47px;
+  top: calc(100vh - 160px);
 }
 
 .menu-item:not(:first-child) {
@@ -150,7 +160,7 @@
 }
 
 .menu-item {
-  padding: 8px 16px;
+  padding: 8px 18px;
   margin-bottom: 0;
   text-decoration: none;
   font-size: 14px;
@@ -209,10 +219,6 @@
   flex: 1;
 }
 
-.menu-empty {
-  height: 40px;
-}
-
 .menu-icon {
   display: flex;
   align-items: center;
@@ -225,6 +231,6 @@
 @media (min-width: 1000px) {
   .menu {
     transform: translatex(0px);
-    position: inherit;
+    /* position: inherit; */
   }
 }
diff --git a/src/routes/dashboard.tsx b/src/routes/dashboard.tsx
index d879ba8..0d19e24 100644
--- a/src/routes/dashboard.tsx
+++ b/src/routes/dashboard.tsx
@@ -52,22 +52,22 @@ const Layout = () => {
     {
       type: "item",
       Component: (p: MenuItemComponentProps) => (
-        <Link to="/dashboard/nodes" {...p}>
+        <Link to="/dashboard/files" {...p}>
           <span className="menu-icon">
-            <NodesIcon />
+            <FilesIcon />
           </span>
-          <span className="menu-text">Nodes</span>
+          <span className="menu-text">Files</span>
         </Link>
       ),
     },
     {
       type: "item",
       Component: (p: MenuItemComponentProps) => (
-        <Link to="/dashboard/files" {...p}>
+        <Link to="/dashboard/nodes" {...p}>
           <span className="menu-icon">
-            <FilesIcon />
+            <NodesIcon />
           </span>
-          <span className="menu-text">Files</span>
+          <span className="menu-text">Nodes</span>
         </Link>
       ),
     },
@@ -179,9 +179,6 @@ const Layout = () => {
         </Link>
       ),
     },
-    {
-      type: "empty",
-    },
   ] satisfies MenuItem[];
 
   return (
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 167f8f6..a0a9ef3 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -56,7 +56,7 @@ function Index() {
       <div className="index-container">
         <div className="index-column">
           <div className="index-column-section">
-            <Logotype />
+            <Logotype width={111} />
           </div>
 
           {components[step]}