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 04609ab108..44d1acf7cc 100644
--- 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: ,
label: 'New Transfer',
- onPress: () => {},
+ href: 'https://kadena.io',
});
}, []);
@@ -80,7 +80,7 @@ const InnerLayout = () => {
}
- activeUrl="https://mastersoftheuniverse.com"
+ activeUrl="https://kadena.io"
topBanner={
topbanner
}
breadcrumbs={
}>
@@ -100,7 +100,7 @@ const InnerLayout = () => {
navigation={
<>
} label="My Wallet">
- {}} />
+
{}} />
= ({
href,
component,
}) => {
+ const { isActiveUrl } = useSideBar();
+
if (children) return children;
const handlePress = (e: PressEvent) => {
@@ -36,6 +39,7 @@ export const SideBarFooterItem: FC = ({
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
index c82b2700b2..2ebee71468 100644
--- 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 = ({
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 = ({
href={href}
variant="outlined"
aria-label={label}
+ isDisabled={isActiveUrl(href)}
component={component}
startVisual={visual}
>
@@ -78,6 +79,7 @@ export const SideBarItem: FC = ({
onPress={handleLinkClick}
variant="outlined"
aria-label={label}
+ isDisabled={isActiveUrl(href)}
startVisual={visual}
isCompact
href={href}
@@ -91,6 +93,7 @@ export const SideBarItem: FC = ({
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({
isExpanded: true,
@@ -33,6 +35,7 @@ export const SideBarContext = createContext({
setBreadCrumbs: () => {},
breadCrumbs: [],
setActiveUrl: () => {},
+ isActiveUrl: () => {},
});
export const useSideBar = (): ISideBarContext => useContext(SideBarContext);
@@ -64,6 +67,10 @@ export const SideBarProvider: FC = ({ children }) => {
setActiveUrlState(value);
};
+ const isActiveUrl = (url?: string) => {
+ return !!url && url === activeUrl;
+ };
+
return (
= ({ 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
index cb7a46bd3d..5f15d5d327 100644
--- 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 = ({
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 = ({
component={component}
variant="transparent"
isCompact
+ isDisabled={isActiveUrl(href)}
href={href}
onPress={handlePress}
>