From 955ad3a8312ada1e348b6cf94d7483e97223b67b Mon Sep 17 00:00:00 2001 From: Steven Straatemans Date: Wed, 30 Oct 2024 14:28:13 +0100 Subject: [PATCH] check if link in layout is active --- .../patterns/SideBarLayout/SideBarLayout.stories.tsx | 6 +++--- .../SideBarLayout/components/SideBarFooterItem.tsx | 4 ++++ .../patterns/SideBarLayout/components/SideBarItem.tsx | 5 ++++- .../SideBarLayout/components/SideBarProvider.tsx | 10 +++++++++- .../SideBarLayout/components/SideBarTreeItem.tsx | 3 ++- 5 files changed, 22 insertions(+), 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 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} >