From 823b256e7378c4f747001ea2bdb325a48b52109a Mon Sep 17 00:00:00 2001
From: Steven Straatemans <steven@straatemans.nl>
Date: Thu, 7 Nov 2024 20:08:55 +0100
Subject: [PATCH] fix bug in route changes

---
 .changeset/wicked-masks-love.md               |  2 +
 .../apps/dev-wallet/src/App/Layout/KLogo.tsx  | 31 ++++++++++
 .../dev-wallet/src/App/Layout/SideBar.tsx     | 40 +++----------
 .../src/patterns/SideBarLayout/SideBar.tsx    | 16 +----
 .../SideBarLayout/SideBarLayout.stories.tsx   | 10 +---
 .../SideBarLayout/components/Logo/KLogo.tsx   | 36 ++++++-----
 .../components/Logo/KadenaLogo.tsx            | 59 -------------------
 .../components/RightAside/RightAside.tsx      | 14 ++++-
 .../SideBarLayout/components/SideBarAside.tsx |  6 +-
 9 files changed, 79 insertions(+), 135 deletions(-)
 create mode 100644 .changeset/wicked-masks-love.md
 create mode 100644 packages/apps/dev-wallet/src/App/Layout/KLogo.tsx
 delete mode 100644 packages/libs/kode-ui/src/patterns/SideBarLayout/components/Logo/KadenaLogo.tsx

diff --git a/.changeset/wicked-masks-love.md b/.changeset/wicked-masks-love.md
new file mode 100644
index 0000000000..a845151cc8
--- /dev/null
+++ b/.changeset/wicked-masks-love.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/apps/dev-wallet/src/App/Layout/KLogo.tsx b/packages/apps/dev-wallet/src/App/Layout/KLogo.tsx
new file mode 100644
index 0000000000..be5aa27cf4
--- /dev/null
+++ b/packages/apps/dev-wallet/src/App/Layout/KLogo.tsx
@@ -0,0 +1,31 @@
+import type { FC } from 'react';
+
+export const KLogo: FC<{ height: number; className?: string }> = (props) => (
+  <svg
+    data-style="kdacolor"
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g clipPath="url(#clip0_509_65640)">
+      <path
+        d="M28.4352 28L19.739 27.9956L8.89978 19.5354L13.3083 16L28.4352 28Z"
+        fill="#4A9079"
+      />
+      <path
+        d="M28.4352 4H19.7434L8.89978 12.4646L13.3083 16L28.4352 4Z"
+        fill="#4A9079"
+      />
+      <path
+        d="M8.89675 27.9957L3.5 23.7317V8.26851L8.89675 4.00452V27.9957Z"
+        fill="#4A9079"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_509_65640">
+        <rect width="32" height="32" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
diff --git a/packages/apps/dev-wallet/src/App/Layout/SideBar.tsx b/packages/apps/dev-wallet/src/App/Layout/SideBar.tsx
index 68dae5f4a2..4d0cadaef2 100644
--- a/packages/apps/dev-wallet/src/App/Layout/SideBar.tsx
+++ b/packages/apps/dev-wallet/src/App/Layout/SideBar.tsx
@@ -6,7 +6,6 @@ import {
   MonoDarkMode,
   MonoKey,
   MonoLightMode,
-  MonoLogout,
   MonoNetworkCheck,
   MonoSignature,
   MonoSwapHoriz,
@@ -14,14 +13,8 @@ import {
 } from '@kadena/kode-icons/system';
 
 import { NetworkSelector } from '@/Components/NetworkSelector/NetworkSelector';
-import { useWallet } from '@/modules/wallet/wallet.hook';
-import {
-  Button,
-  ContextMenu,
-  ContextMenuItem,
-  Themes,
-  useTheme,
-} from '@kadena/kode-ui';
+
+import { Button, Themes, useTheme } from '@kadena/kode-ui';
 import {
   SideBarItem,
   SideBarItemsInline,
@@ -30,22 +23,24 @@ import {
 } from '@kadena/kode-ui/patterns';
 import { FC } from 'react';
 import { Link } from 'react-router-dom';
+import { KLogo } from './KLogo';
 
 export const SideBar: FC = () => {
   const { theme, setTheme } = useTheme();
   const { isExpanded } = useLayout();
-  const { lockProfile } = useWallet();
 
   const toggleTheme = (): void => {
     const newTheme = theme === Themes.dark ? Themes.light : Themes.dark;
     setTheme(newTheme);
   };
 
-  const handleLogout = () => {
-    lockProfile();
-  };
   return (
     <SideBarUI
+      logo={
+        <Link to="/">
+          <KLogo height={40} />
+        </Link>
+      }
       appContext={
         <SideBarItem visual={<MonoNetworkCheck />} label="Select network">
           <NetworkSelector
@@ -110,25 +105,6 @@ export const SideBar: FC = () => {
       context={
         <>
           <SideBarItemsInline>
-            <SideBarItem visual={<MonoContacts />} label="Profile">
-              <ContextMenu
-                trigger={
-                  <Button
-                    isCompact
-                    variant={isExpanded ? 'outlined' : 'transparent'}
-                    endVisual={<MonoContacts />}
-                  >
-                    {isExpanded ? 'Profile' : undefined}
-                  </Button>
-                }
-              >
-                <ContextMenuItem
-                  endVisual={<MonoLogout />}
-                  label="Logout"
-                  onClick={handleLogout}
-                />
-              </ContextMenu>
-            </SideBarItem>
             <SideBarItem
               visual={<MonoContrast />}
               onPress={toggleTheme}
diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBar.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBar.tsx
index e68d30674c..46d47baa06 100644
--- a/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBar.tsx
+++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBar.tsx
@@ -3,10 +3,9 @@ import classNames from 'classnames';
 import type { FC, PropsWithChildren, ReactElement } from 'react';
 import React from 'react';
 import type { PressEvent } from './../../components';
-import { Button, Media, Stack } from './../../components';
+import { Button, Stack } from './../../components';
 import { useLayout } from './components/LayoutProvider';
 import { KLogo } from './components/Logo/KLogo';
-import { KadenaLogo } from './components/Logo/KadenaLogo';
 import { SideBarAppContext } from './components/SideBarAppContext';
 import { SideBarContext } from './components/SideBarContext';
 import { SideBarNavigation } from './components/SideBarNavigation';
@@ -24,7 +23,6 @@ export interface ISideBarProps extends PropsWithChildren {
   navigation?: ReactElement;
   context?: ReactElement;
   logo?: ReactElement;
-  minifiedLogo?: ReactElement;
 }
 
 export const SideBar: FC<ISideBarProps> = ({
@@ -33,7 +31,6 @@ export const SideBar: FC<ISideBarProps> = ({
   navigation,
   context,
   logo,
-  minifiedLogo,
 }) => {
   const { isExpanded, handleToggleExpand } = useLayout();
 
@@ -44,11 +41,7 @@ export const SideBar: FC<ISideBarProps> = ({
   };
 
   const ShowLogo = () => {
-    if (!isExpanded) {
-      return minifiedLogo ? minifiedLogo : <KLogo height={40} />;
-    }
-
-    return logo ? logo : <KadenaLogo height={40} />;
+    return logo ? logo : <KLogo height={40} />;
   };
 
   return (
@@ -65,10 +58,7 @@ export const SideBar: FC<ISideBarProps> = ({
         })}
       >
         <Stack className={classNames(menuMenuIconClass)}>
-          <div>
-            <Media lessThan="md">{ShowLogo()}</Media>
-            <Media greaterThanOrEqual="md">{ShowLogo()}</Media>
-          </div>
+          {ShowLogo()}
 
           <Button
             variant="transparent"
diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.stories.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.stories.tsx
index f1d5295062..ad15215c3d 100644
--- a/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.stories.tsx
+++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.stories.tsx
@@ -14,7 +14,6 @@ import { Button, Stack } from './../../components';
 import { SideBarBreadcrumbs } from './components/Breadcrumbs/SideBarBreadcrumbs';
 import { SideBarBreadcrumbsItem } from './components/Breadcrumbs/SideBarBreadcrumbsItem';
 import { LayoutProvider, useLayout } from './components/LayoutProvider';
-import { KadenaLogo } from './components/Logo/KadenaLogo';
 import { KLogo } from './components/Logo/KLogo';
 import {
   RightAside,
@@ -75,7 +74,7 @@ const InnerLayout = () => {
         <RightAsideContent>content</RightAsideContent>
       </RightAside>
       <SideBarLayout
-        minifiedLogo={
+        logo={
           <a href="https://kadena.io" target="_blank" rel="noreferrer">
             <KLogo height={40} />
           </a>
@@ -94,11 +93,6 @@ const InnerLayout = () => {
         sidebar={
           <SideBar
             logo={
-              <a href="https://kadena.io" target="_blank" rel="noreferrer">
-                <KadenaLogo height={40} />
-              </a>
-            }
-            minifiedLogo={
               <a href="https://kadena.io" target="_blank" rel="noreferrer">
                 <KLogo height={40} />
               </a>
@@ -312,7 +306,7 @@ const InnerLayoutFull = () => {
       }}
       logo={
         <a href="https://kadena.io" target="_blank" rel="noreferrer">
-          <KadenaLogo height={40} />
+          <KLogo height={40} />
         </a>
       }
       variant="full"
diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/Logo/KLogo.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/Logo/KLogo.tsx
index f86e9b6f77..d494e491cb 100644
--- a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/Logo/KLogo.tsx
+++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/Logo/KLogo.tsx
@@ -4,25 +4,29 @@ import React from 'react';
 export const KLogo: FC<{ height: number; className?: string }> = (props) => (
   <svg
     data-style="kdacolor"
-    viewBox="0 0 64 64"
+    viewBox="0 0 32 32"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
     {...props}
   >
-    <path
-      d="M56.8703 56L39.4779 55.9911L17.7995 39.0708L26.6166 32L56.8703 56Z"
-      id="{kda.foundation.color.icon.brand.logo.default}"
-      fill="#4A9079"
-    />
-    <path
-      d="M56.8703 8H39.4868L17.7995 24.9292L26.6166 32L56.8703 8Z"
-      id="{kda.foundation.color.icon.brand.logo.default}"
-      fill="#4A9079"
-    />
-    <path
-      d="M17.7935 55.9913L7 47.4633V16.537L17.7935 8.00901V55.9913Z"
-      id="{kda.foundation.color.icon.brand.logo.default}"
-      fill="#4A9079"
-    />
+    <g clipPath="url(#clip0_509_65640)">
+      <path
+        d="M28.4352 28L19.739 27.9956L8.89978 19.5354L13.3083 16L28.4352 28Z"
+        fill="#4A9079"
+      />
+      <path
+        d="M28.4352 4H19.7434L8.89978 12.4646L13.3083 16L28.4352 4Z"
+        fill="#4A9079"
+      />
+      <path
+        d="M8.89675 27.9957L3.5 23.7317V8.26851L8.89675 4.00452V27.9957Z"
+        fill="#4A9079"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_509_65640">
+        <rect width="32" height="32" fill="white" />
+      </clipPath>
+    </defs>
   </svg>
 );
diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/Logo/KadenaLogo.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/Logo/KadenaLogo.tsx
deleted file mode 100644
index bf8d54b47c..0000000000
--- a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/Logo/KadenaLogo.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import type { FC } from 'react';
-import React from 'react';
-
-export const KadenaLogo: FC<{ height: number; className?: string }> = (
-  props,
-) => (
-  <svg
-    data-style="kdacolor"
-    viewBox="0 0 225 64"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <path
-      id="{kda.foundation.color.text.brand.wordmark.default}"
-      d="M66.3452 46.2832V17.7139H70.7168V29.5871H71.3924C73.1682 27.6225 76.705 23.6638 82.0089 17.7139H87.7345C85.587 20.0797 81.3068 24.767 74.8938 31.7788C77.118 34.1947 81.5605 39.0295 88.2124 46.2832H82.2891C80.4867 44.2626 76.8555 40.2272 71.3953 34.1682H70.7198V46.2832H66.3481H66.3452Z"
-      fill="#0F0F0F"
-    />
-    <path
-      id="{kda.foundation.color.text.brand.wordmark.default}"
-      d="M89.4012 46.2832C90.7522 41.528 93.4572 32.0029 97.5103 17.7109H105.263C106.614 22.4661 109.319 31.9911 113.372 46.2832H108.838C108.519 45.1681 107.897 42.9233 106.971 39.5487H95.7994C95.5074 40.6637 94.885 42.9086 93.9322 46.2832H89.4012ZM96.9145 35.4838H105.858C105.168 32.9617 103.791 27.9528 101.726 20.4602H101.05C100.36 22.9587 98.9823 27.9646 96.9174 35.4838H96.9145Z"
-      fill="#0F0F0F"
-    />
-    <path
-      id="{kda.foundation.color.text.brand.wordmark.default}"
-      d="M116.159 46.2832V17.7139H127.569C131.36 17.7139 134.26 18.6844 136.274 20.6224C138.313 22.5634 139.336 25.472 139.336 29.3481V34.6873C139.336 38.5929 138.316 41.5015 136.274 43.413C134.26 45.3245 131.357 46.2802 127.569 46.2802H116.159V46.2832ZM120.614 42.2979H127.611C130.074 42.2979 131.903 41.6755 133.097 40.4277C134.289 39.1534 134.885 37.2802 134.885 34.8083V29.1888C134.885 26.6903 134.289 24.8319 133.097 23.6077C131.906 22.3864 130.077 21.7758 127.611 21.7758H120.614V42.2979Z"
-      fill="#0F0F0F"
-    />
-    <path
-      id="{kda.foundation.color.text.brand.wordmark.default}"
-      d="M144.304 46.2832V17.7139H162.233V21.7404H148.676V29.9086H161.121V33.9351H148.676V42.3038H162.434V46.2891H144.304V46.2832Z"
-      fill="#0F0F0F"
-    />
-    <path
-      id="{kda.foundation.color.text.brand.wordmark.default}"
-      d="M167.05 46.2832V17.7139H175.519C176.791 21.9911 179.363 30.531 183.233 43.3363H183.909V17.7139H188.242V46.2861H179.773C178.501 42.0088 175.932 33.4543 172.059 20.6224H171.383V46.2861H167.05V46.2832Z"
-      fill="#0F0F0F"
-    />
-    <path
-      id="{kda.foundation.color.text.brand.wordmark.default}"
-      d="M192.091 46.2832C193.442 41.528 196.147 32.0029 200.201 17.7109H207.953C209.304 22.4661 212.009 31.9911 216.062 46.2832H211.531C211.212 45.1681 210.59 42.9233 209.664 39.5487H198.496C198.204 40.6637 197.581 42.9086 196.628 46.2832H192.094H192.091ZM199.605 35.4838H208.549C207.858 32.9617 206.481 27.9528 204.416 20.4602H203.74C203.05 22.9587 201.673 27.9646 199.608 35.4838H199.605Z"
-      fill="#0F0F0F"
-    />
-    <path
-      id="{kda.foundation.color.icon.brand.logo.default}"
-      d="M57.8702 56L40.4778 55.9911L18.7994 39.0708L27.6165 32L57.8702 56Z"
-      fill="#4A9079"
-    />
-    <path
-      id="{kda.foundation.color.icon.brand.logo.default}"
-      d="M57.8702 8H40.4867L18.7994 24.9292L27.6165 32L57.8702 8Z"
-      fill="#4A9079"
-    />
-    <path
-      id="{kda.foundation.color.icon.brand.logo.default}"
-      d="M18.7935 55.9913L8 47.4633V16.537L18.7935 8.00902V55.9913Z"
-      fill="#4A9079"
-    />
-  </svg>
-);
diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/RightAside/RightAside.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/RightAside/RightAside.tsx
index 01f834df32..f4980e438d 100644
--- a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/RightAside/RightAside.tsx
+++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/RightAside/RightAside.tsx
@@ -1,5 +1,5 @@
 import type { FC, PropsWithChildren } from 'react';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { useLayout } from '../LayoutProvider';
 import { rightAsideClass } from './style.css';
@@ -9,7 +9,17 @@ export interface iRightAside extends PropsWithChildren {
 }
 
 export const RightAside: FC<iRightAside> = ({ children, isOpen }) => {
-  const { rightAsideRef } = useLayout();
+  const {
+    rightAsideRef,
+    location,
+    setIsRightAsideExpanded,
+    isRightAsideExpanded,
+  } = useLayout();
+
+  useEffect(() => {
+    if (!isRightAsideExpanded) return;
+    setIsRightAsideExpanded(false);
+  }, [location?.url]);
 
   if (!isOpen || !rightAsideRef) return null;
 
diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarAside.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarAside.tsx
index e8142a1df1..8492ed07ec 100644
--- a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarAside.tsx
+++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarAside.tsx
@@ -17,7 +17,7 @@ import { useLayout } from './LayoutProvider';
 
 export const SideBarAside: FC<{
   location: ISideBarLayoutLocation;
-}> = ({ location }) => {
+}> = () => {
   const {
     setIsRightAsideExpanded,
     isRightAsideExpanded,
@@ -35,10 +35,6 @@ export const SideBarAside: FC<{
     setRightAsideRef(ref.current);
   }, [ref.current]);
 
-  useEffect(() => {
-    setIsRightAsideExpanded(false);
-  }, [location.url]);
-
   return (
     <>
       <Stack