Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(devwallet): style sidemenu #2643

Merged
merged 4 commits into from
Nov 7, 2024
Merged

fix(devwallet): style sidemenu #2643

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f1aa870
style sidemenu
sstraatemans Nov 7, 2024
4ab23b4
fix style of header padding
sstraatemans Nov 7, 2024
58ad1d4
sidebar padding
sstraatemans Nov 7, 2024
6440ea7
fix issues with isa
sstraatemans Nov 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .changeset/quick-beans-join.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
---
---
86 changes: 49 additions & 37 deletions packages/apps/dev-wallet/src/App/Layout/SideBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,16 @@
import {
MonoApps,
MonoBackupTable,
MonoContacts,
MonoContrast,
MonoDashboardCustomize,
MonoDarkMode,
MonoKey,
MonoLightMode,
MonoLogout,
MonoNetworkCheck,
MonoSignature,
MonoSwapHoriz,
MonoTableRows,
MonoWallet,
MonoWindow,
} from '@kadena/kode-icons/system';

import { NetworkSelector } from '@/Components/NetworkSelector/NetworkSelector';
Expand All @@ -21,8 +25,6 @@ import {
import {
SideBarItem,
SideBarItemsInline,
SideBarTree,
SideBarTreeItem,
SideBar as SideBarUI,
useLayout,
} from '@kadena/kode-ui/patterns';
Expand Down Expand Up @@ -50,52 +52,60 @@ export const SideBar: FC = () => {
<NetworkSelector
showLabel={isExpanded}
variant="outlined"
isCompact={!isExpanded}
isCompact
/>
</SideBarItem>
}
navigation={
<>
<SideBarItem
visual={<MonoWindow />}
visual={<MonoApps />}
label="Dashboard"
component={Link}
href="/"
/>

<SideBarTree visual={<MonoWallet />} label="My Wallets">
<SideBarTreeItem
label="Keys"
component={Link}
href="/key-management/keys"
/>
</SideBarTree>
<SideBarTree visual={<MonoTableRows />} label="Transactions">
<SideBarTreeItem
label="History"
component={Link}
href="/transactions"
/>
</SideBarTree>
<SideBarTree visual={<MonoDashboardCustomize />} label="Utilities">
<SideBarTreeItem
label="Sig Builder"
component={Link}
href="/sig-builder"
/>
<SideBarTreeItem
label="Backup"
component={Link}
href="/backup-recovery-phrase/write-down"
/>
</SideBarTree>
<SideBarItem
visual={<MonoSwapHoriz />}
label="Transfer"
component={Link}
href="/transfer"
/>

<SideBarItem
visual={<MonoSignature />}
label="Sig Builder"
component={Link}
href="/sig-builder"
/>

<SideBarItem
visual={<MonoTableRows />}
label="Transactions"
component={Link}
href="/transactions"
/>

<SideBarItem
label="Key Management"
component={Link}
href="/key-management/keys"
visual={<MonoKey />}
/>

<SideBarItem
visual={<MonoContacts />}
label="Contacts"
component={Link}
href="/contacts"
/>

<SideBarItem
visual={<MonoBackupTable />}
label="Backup"
component={Link}
href="/backup-recovery-phrase/write-down"
/>
</>
}
context={
Expand All @@ -105,8 +115,8 @@ export const SideBar: FC = () => {
<ContextMenu
trigger={
<Button
isCompact={!isExpanded}
variant="outlined"
isCompact
variant={isExpanded ? 'outlined' : 'transparent'}
endVisual={<MonoContacts />}
>
{isExpanded ? 'Profile' : undefined}
Expand All @@ -130,9 +140,11 @@ export const SideBar: FC = () => {
label="Change theme"
>
<Button
variant={isExpanded ? 'transparent' : 'outlined'}
variant="transparent"
onPress={() => toggleTheme()}
startVisual={<MonoContrast />}
startVisual={
theme === 'dark' ? <MonoDarkMode /> : <MonoLightMode />
}
isCompact={!isExpanded}
/>
</SideBarItem>
Expand Down
6 changes: 3 additions & 3 deletions packages/apps/dev-wallet/src/pages/home/home-page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,10 +42,10 @@ export function HomePage() {
<SideBarBreadcrumbs icon={<MonoDashboard />}>
<SideBarBreadcrumbsItem href="/">Dashboard</SideBarBreadcrumbsItem>
</SideBarBreadcrumbs>
<Box gap={'lg'}>
<Box gap={'lg'} width="100%">
<Text>Welcome back</Text>
<Heading as="h1">{profile?.name} </Heading>
<Stack gap={'lg'} flexDirection={'column'}>
<Heading as="h4">{profile?.name} </Heading>
<Stack gap={'lg'} flexDirection={'column'} width="100%">
<AssetsCard />
<Stack className={panelClass} flexDirection={'column'} gap={'lg'}>
<Heading variant="h4">Wallet Activities</Heading>
Expand Down
8 changes: 6 additions & 2 deletions packages/libs/kode-ui/src/components/Breadcrumbs/Breadcrumbs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import type { FC, FunctionComponentElement } from 'react';
import React from 'react';
import type { AriaBreadcrumbsProps } from 'react-aria';
import { useBreadcrumbs } from 'react-aria';
import { Box } from '..';
import { Box, Text } from '..';
import { containerClass, navClass } from './Breadcrumbs.css';
import type { IBreadcrumbItemProps } from './BreadcrumbsItem';

Expand All @@ -22,7 +22,11 @@ export const Breadcrumbs: FC<IBreadcrumbsProps> = ({

return (
<nav className={navClass} {...navProps}>
{icon && <Box marginInline="sm">{icon}</Box>}
{icon && (
<Box marginInline="sm">
<Text>{icon}</Text>
</Box>
)}
<ol className={containerClass}>
{React.Children.map(breadcrumbProps.children, (child, i) =>
React.cloneElement(child as any, { isCurrent: i === childCount - 1 }),
Expand Down
12 changes: 5 additions & 7 deletions packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,15 +103,13 @@ const InnerLayout = () => {
<KLogo height={40} />
</a>
}
appContext={
<SideBarItem
visual={<MonoWifiTethering />}
label="Mainnet"
href="javascript:void()"
/>
}
navigation={
<>
<SideBarItem
visual={<MonoWifiTethering />}
label="Mainnet"
href="javascript:void()"
/>
<SideBarTree visual={<MonoWallet />} label="My Wallet">
<SideBarTreeItem label="Accounts" href="https://kadena.io" />
<SideBarTreeItem
Expand Down
100 changes: 27 additions & 73 deletions packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
import type { FC, PropsWithChildren } from 'react';
import type { FC, PropsWithChildren, ReactElement } from 'react';
import React, { useEffect } from 'react';
import { useMedia } from 'react-use';
import { listItemClass } from '../sidebar.css';
import { Link } from './../../../components';
import { listItemClass, sidebartreeItemClass } from '../sidebar.css';
import { Anchor } from '../utils';
import type { PressEvent } from './../../../components/Button';
import { Button } from './../../../components/Button';
import { Media } from './../../../components/Media';
import { breakpoints } from './../../../styles';
import { useLayout } from './LayoutProvider';
Expand All @@ -16,6 +15,7 @@ export interface ISideBarItemProps extends PropsWithChildren {
isAppContext?: boolean;
href?: string;
component?: any;
tree?: ReactElement | boolean;
}
export const SideBarItem: FC<ISideBarItemProps> = ({
visual,
Expand All @@ -24,6 +24,7 @@ export const SideBarItem: FC<ISideBarItemProps> = ({
children,
href,
component,
tree,
}) => {
const { isExpanded, handleSetExpanded, isActiveUrl } = useLayout();
const isMediumDevice = useMedia(breakpoints.md, true);
Expand All @@ -42,86 +43,39 @@ export const SideBarItem: FC<ISideBarItemProps> = ({
handlePress(e as unknown as PressEvent);
};

const renderChildren = () => {
const render = (isExpanded: boolean) => {
const LinkWrapper = component ? component : Anchor;
return (
<>
<Media greaterThanOrEqual="md" style={{ flex: 1, display: 'flex' }}>
{children}
</Media>
<Media lessThan="md" style={{ flex: 1, display: 'flex' }}>
{children}
</Media>
</>
);
};

const renderMobile = () => {
const Component = href ? Link : Button;
return (
<Component
<LinkWrapper
onPress={handleLinkClick}
href={href}
variant={isActiveUrl(href) ? 'primary' : 'outlined'}
aria-label={label}
data-isactive={isActiveUrl(href)}
component={component}
startVisual={visual}
>
{label}
</Component>
);
};

const renderDeskTopNotExpanded = () => {
const Component = href ? Link : Button;
return (
<Component
onPress={handleLinkClick}
variant={isActiveUrl(href) ? 'primary' : 'outlined'}
aria-label={label}
data-isactive={isActiveUrl(href)}
component={component}
startVisual={visual}
href={href}
/>
);
};

const renderDeskTopExpanded = () => {
const Component = href ? Link : Button;
return (
<Component
onPress={handleLinkClick}
aria-label={label}
data-isactive={isActiveUrl(href)}
startVisual={visual}
component={component}
variant={isActiveUrl(href) ? 'primary' : 'outlined'}
className={sidebartreeItemClass({
isActive: isActiveUrl(href),
isExpanded,
})}
href={href}
to={href}
title={label}
>
{label}
</Component>
{visual && <span>{visual}</span>}
{isExpanded && label}
</LinkWrapper>
);
};

if (children) return children;

return (
<li className={listItemClass}>
<>
{children ? (
renderChildren()
) : (
<>
<Media lessThan="md" style={{ flex: 1, display: 'flex' }}>
{renderMobile()}
</Media>
<Media greaterThanOrEqual="md" style={{ flex: 1, display: 'flex' }}>
{!isExpanded
? renderDeskTopNotExpanded()
: renderDeskTopExpanded()}
</Media>
</>
)}
</>
<Media lessThan="md" style={{ flex: 1, display: 'flex' }}>
{render(true)}
</Media>
<Media greaterThanOrEqual="md" style={{ flex: 1, display: 'flex' }}>
{render(isExpanded)}
</Media>

{tree}
</li>
);
};
Loading
Loading