fix bug in route changes

kadena-community · Nov 7, 2024 · 823b256 · 823b256
1 parent 44f7ee0
commit 823b256
Show file tree

Hide file tree

Showing 9 changed files with 79 additions and 135 deletions.
diff --git a/.changeset/wicked-masks-love.md 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
@@ -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
@@ -6,22 +6,15 @@ import {
   MonoDarkMode,
   MonoKey,
   MonoLightMode,
-  MonoLogout,
   MonoNetworkCheck,
   MonoSignature,
   MonoSwapHoriz,
   MonoTableRows,
 } 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
@@ -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
@@ -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
@@ -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
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
@@ -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
@@ -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