check if link in layout is active

kadena-community · Oct 30, 2024 · 955ad3a · 955ad3a
1 parent 003f3f8
commit 955ad3a
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 6 deletions.
diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.stories.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.stories.tsx
@@ -64,7 +64,7 @@ const InnerLayout = () => {
     setAppContext({
       visual: <MonoAccountTree />,
       label: 'New Transfer',
-      onPress: () => {},
+      href: 'https://kadena.io',
     });
   }, []);
 
@@ -80,7 +80,7 @@ const InnerLayout = () => {
           <KLogo height={40} />
         </a>
       }
-      activeUrl="https://mastersoftheuniverse.com"
+      activeUrl="https://kadena.io"
       topBanner={<div>topbanner</div>}
       breadcrumbs={
         <Breadcrumbs icon={<MonoAccountTree />}>
@@ -100,7 +100,7 @@ const InnerLayout = () => {
           navigation={
             <>
               <SideBarTree visual={<MonoWallet />} label="My Wallet">
-                <SideBarTreeItem label="Accounts" onPress={() => {}} />
+                <SideBarTreeItem label="Accounts" href="https://kadena.io" />
                 <SideBarTreeItem label="Assets" onPress={() => {}} />
               </SideBarTree>
               <SideBarItem

diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarFooterItem.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarFooterItem.tsx
@@ -2,6 +2,7 @@ import type { FC, PropsWithChildren } from 'react';
 import React from 'react';
 import type { PressEvent } from './../../../components';
 import { Button, Link } from './../../../components';
+import { useSideBar } from './SideBarProvider';
 
 export interface ISideBarFooterItemProps extends PropsWithChildren {
   visual: React.ReactElement;
@@ -21,6 +22,8 @@ export const SideBarFooterItem: FC<ISideBarFooterItemProps> = ({
   href,
   component,
 }) => {
+  const { isActiveUrl } = useSideBar();
+
   if (children) return children;
 
   const handlePress = (e: PressEvent) => {
@@ -36,6 +39,7 @@ export const SideBarFooterItem: FC<ISideBarFooterItemProps> = ({
       onPress={handlePress}
       aria-label={label}
       startVisual={visual}
+      isDisabled={isActiveUrl(href)}
       variant={isAppContext ? 'primary' : 'transparent'}
     />
   );

diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarItem.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarItem.tsx
@@ -25,7 +25,7 @@ export const SideBarItem: FC<ISideBarItemProps> = ({
   href,
   component,
 }) => {
-  const { isExpanded, handleSetExpanded } = useSideBar();
+  const { isExpanded, handleSetExpanded, isActiveUrl } = useSideBar();
   const isMediumDevice = useMedia(breakpoints.md, true);
 
   useEffect(() => {
@@ -63,6 +63,7 @@ export const SideBarItem: FC<ISideBarItemProps> = ({
         href={href}
         variant="outlined"
         aria-label={label}
+        isDisabled={isActiveUrl(href)}
         component={component}
         startVisual={visual}
       >
@@ -78,6 +79,7 @@ export const SideBarItem: FC<ISideBarItemProps> = ({
         onPress={handleLinkClick}
         variant="outlined"
         aria-label={label}
+        isDisabled={isActiveUrl(href)}
         startVisual={visual}
         isCompact
         href={href}
@@ -91,6 +93,7 @@ export const SideBarItem: FC<ISideBarItemProps> = ({
       <Component
         onPress={handleLinkClick}
         aria-label={label}
+        isDisabled={isActiveUrl(href)}
         startVisual={visual}
         variant="outlined"
         href={href}

diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarProvider.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarProvider.tsx
@@ -5,7 +5,8 @@ import type { PressEvent } from 'react-aria';
 export interface IAppContextProps {
   visual: React.ReactElement;
   label: string;
-  onPress: () => void;
+  onPress?: () => void;
+  href?: string;
 }
 
 export interface ISideBarBreadCrumb {
@@ -23,6 +24,7 @@ export interface ISideBarContext {
   setBreadCrumbs: (value: ISideBarBreadCrumb[]) => void;
   setActiveUrl: (value?: string) => void;
   activeUrl?: string;
+  isActiveUrl: (url?: string) => boolean;
 }
 export const SideBarContext = createContext<ISideBarContext>({
   isExpanded: true,
@@ -33,6 +35,7 @@ export const SideBarContext = createContext<ISideBarContext>({
   setBreadCrumbs: () => {},
   breadCrumbs: [],
   setActiveUrl: () => {},
+  isActiveUrl: () => {},
 });
 export const useSideBar = (): ISideBarContext => useContext(SideBarContext);
 
@@ -64,6 +67,10 @@ export const SideBarProvider: FC<ISideBarProvider> = ({ children }) => {
     setActiveUrlState(value);
   };
 
+  const isActiveUrl = (url?: string) => {
+    return !!url && url === activeUrl;
+  };
+
   return (
     <SideBarContext.Provider
       value={{
@@ -76,6 +83,7 @@ export const SideBarProvider: FC<ISideBarProvider> = ({ children }) => {
         setBreadCrumbs,
         setActiveUrl,
         activeUrl,
+        isActiveUrl,
       }}
     >
       {children}

diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarTreeItem.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarTreeItem.tsx
@@ -20,7 +20,7 @@ export const SideBarTreeItem: FC<ISideBarTreeItemProps> = ({
   href,
   component,
 }) => {
-  const { handleSetExpanded } = useSideBar();
+  const { handleSetExpanded, isActiveUrl } = useSideBar();
   const isMediumDevice = useMedia(breakpoints.md, true);
   const handlePress = (e: PressEvent) => {
     if (!isMediumDevice) handleSetExpanded(false);
@@ -34,6 +34,7 @@ export const SideBarTreeItem: FC<ISideBarTreeItemProps> = ({
         component={component}
         variant="transparent"
         isCompact
+        isDisabled={isActiveUrl(href)}
         href={href}
         onPress={handlePress}
       >