Skip to content

Commit 3568091

Browse files
franciscao633franciscao633
committed
add page icons to collapsed share menu
1 parent 9e76bd4 commit 3568091

File tree

4 files changed

+88
-66
lines changed

4 files changed

+88
-66
lines changed

‎src/app/(main)/SideNav.tsx‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,3 @@
1-
import {
2-
Button,
3-
type ButtonProps,
4-
Column,
5-
Focusable,
6-
Icon,
7-
Row,
8-
Text,
9-
Tooltip,
10-
TooltipTrigger,
11-
} from '@umami/react-zen';
12-
import Link from 'next/link';
131
import { AdminNav } from '@/app/(main)/admin/AdminNav';
142
import { SettingsNav } from '@/app/(main)/settings/SettingsNav';
153
import { WebsiteNav } from '@/app/(main)/websites/[websiteId]/WebsiteNav';
@@ -25,6 +13,18 @@ import {
2513
} from '@/components/icons';
2614
import { UserButton } from '@/components/input/UserButton';
2715
import { Logo } from '@/components/svg';
16+
import {
17+
Button,
18+
type ButtonProps,
19+
Column,
20+
Focusable,
21+
Icon,
22+
Row,
23+
Text,
24+
Tooltip,
25+
TooltipTrigger,
26+
} from '@umami/react-zen';
27+
import Link from 'next/link';
2828

2929
export function SideNav(props: any) {
3030
const { t, labels } = useMessages();
@@ -79,7 +79,7 @@ export function SideNav(props: any) {
7979
minHeight="0"
8080
margin="2"
8181
style={{
82-
width: isCollapsed ? '55px' : '240px',
82+
width: isCollapsed ? '60px' : '240px',
8383
transition: 'width 0.2s ease-in-out',
8484
overflow: 'hidden',
8585
}}

‎src/app/(main)/websites/[websiteId]/WebsiteNav.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export function WebsiteNav({
1818
const { items, selectedKey } = useWebsiteNavItems(websiteId);
1919

2020
return (
21-
<Column gap="2">
21+
<Column gap="2" marginTop={isCollapsed ? '2' : undefined}>
2222
<Link href={renderUrl('/websites', false)} role="button" onClick={onItemClick}>
2323
<TooltipTrigger isDisabled={!isCollapsed} delay={0}>
2424
<Focusable>

‎src/app/share/[slug]/[[...path]]/ShareNav.tsx‎

Lines changed: 65 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,21 @@
1-
import { Button, Column, Icon, Row, ThemeButton } from '@umami/react-zen';
2-
import { NavMenu } from '@/components/common/NavMenu';
1+
import { IconLabel } from '@/components/common/IconLabel';
32
import { useMessages, useNavigation, useShare } from '@/components/hooks';
43
import { AlignEndHorizontal, Clock, Eye, PanelLeft, Sheet, Tag, User } from '@/components/icons';
54
import { LanguageButton } from '@/components/input/LanguageButton';
65
import { PreferencesButton } from '@/components/input/PreferencesButton';
76
import { Funnel, Gauge, Lightning, Magnet, Money, Network, Path, Target } from '@/components/svg';
7+
import {
8+
Button,
9+
Column,
10+
Focusable,
11+
Icon,
12+
Row,
13+
Text,
14+
ThemeButton,
15+
Tooltip,
16+
TooltipTrigger,
17+
} from '@umami/react-zen';
18+
import Link from 'next/link';
819
import { ShareBranding } from './ShareBranding';
920

1021
export function ShareNav({
@@ -28,18 +39,8 @@ export function ShareNav({
2839
section: 'traffic',
2940
label: t(labels.traffic),
3041
items: [
31-
{
32-
id: 'overview',
33-
label: t(labels.overview),
34-
icon: <Eye />,
35-
path: renderPath(''),
36-
},
37-
{
38-
id: 'events',
39-
label: t(labels.events),
40-
icon: <Lightning />,
41-
path: renderPath('/events'),
42-
},
42+
{ id: 'overview', label: t(labels.overview), icon: <Eye />, path: renderPath('') },
43+
{ id: 'events', label: t(labels.events), icon: <Lightning />, path: renderPath('/events') },
4344
{
4445
id: 'sessions',
4546
label: t(labels.sessions),
@@ -76,18 +77,8 @@ export function ShareNav({
7677
section: 'behavior',
7778
label: t(labels.behavior),
7879
items: [
79-
{
80-
id: 'goals',
81-
label: t(labels.goals),
82-
icon: <Target />,
83-
path: renderPath('/goals'),
84-
},
85-
{
86-
id: 'funnels',
87-
label: t(labels.funnels),
88-
icon: <Funnel />,
89-
path: renderPath('/funnels'),
90-
},
80+
{ id: 'goals', label: t(labels.goals), icon: <Target />, path: renderPath('/goals') },
81+
{ id: 'funnels', label: t(labels.funnels), icon: <Funnel />, path: renderPath('/funnels') },
9182
{
9283
id: 'journeys',
9384
label: t(labels.journeys),
@@ -106,18 +97,8 @@ export function ShareNav({
10697
section: 'growth',
10798
label: t(labels.growth),
10899
items: [
109-
{
110-
id: 'utm',
111-
label: t(labels.utm),
112-
icon: <Tag />,
113-
path: renderPath('/utm'),
114-
},
115-
{
116-
id: 'revenue',
117-
label: t(labels.revenue),
118-
icon: <Money />,
119-
path: renderPath('/revenue'),
120-
},
100+
{ id: 'utm', label: t(labels.utm), icon: <Tag />, path: renderPath('/utm') },
101+
{ id: 'revenue', label: t(labels.revenue), icon: <Money />, path: renderPath('/revenue') },
121102
{
122103
id: 'attribution',
123104
label: t(labels.attribution),
@@ -145,13 +126,19 @@ export function ShareNav({
145126
return (
146127
<Column
147128
position={isMobile ? undefined : 'fixed'}
148-
padding="3"
129+
paddingX={collapsed ? '1' : '3'}
130+
paddingY="3"
149131
width={isMobile ? '100%' : collapsed ? '60px' : '240px'}
150132
maxHeight="100dvh"
151133
height="100dvh"
152134
border={isMobile ? undefined : 'right'}
153135
>
154-
<Row as="header" gap alignItems="center" justifyContent="space-between">
136+
<Row
137+
as="header"
138+
gap
139+
alignItems="center"
140+
justifyContent={collapsed ? 'center' : 'space-between'}
141+
>
155142
{!collapsed && <ShareBranding size="md" />}
156143
{!onItemClick && (
157144
<Button variant="quiet" onPress={() => onCollapse?.(!collapsed)}>
@@ -161,16 +148,44 @@ export function ShareNav({
161148
</Button>
162149
)}
163150
</Row>
164-
{!collapsed && (
165-
<Column flexGrow={1} overflowY="auto" marginTop="6">
166-
<NavMenu
167-
items={items}
168-
selectedKey={selectedKey}
169-
allowMinimize={false}
170-
onItemClick={onItemClick}
171-
/>
172-
</Column>
173-
)}
151+
<Column flexGrow={1} marginTop="2" overflowY="auto" gap="2">
152+
{items.map(({ label: sectionLabel, items: sectionItems }, index) => (
153+
<Column key={`${sectionLabel}${index}`} gap="1" marginBottom="1">
154+
{!collapsed && (
155+
<Row padding>
156+
<Text weight="bold">{sectionLabel}</Text>
157+
</Row>
158+
)}
159+
{sectionItems.map(({ id, path, label, icon }) => {
160+
const isSelected = selectedKey === id;
161+
return (
162+
<Link key={id} href={path} role="button" onClick={onItemClick}>
163+
<TooltipTrigger isDisabled={!collapsed} delay={0}>
164+
<Focusable>
165+
<Row
166+
alignItems="center"
167+
justifyContent={collapsed ? 'center' : undefined}
168+
hover={{ backgroundColor: 'surface-sunken' }}
169+
backgroundColor={isSelected ? 'surface-sunken' : undefined}
170+
borderRadius
171+
minHeight="40px"
172+
>
173+
<IconLabel
174+
icon={icon}
175+
label={collapsed ? '' : label}
176+
weight={isSelected ? 'bold' : undefined}
177+
{...(!collapsed && { padding: true })}
178+
/>
179+
</Row>
180+
</Focusable>
181+
<Tooltip placement="right">{label}</Tooltip>
182+
</TooltipTrigger>
183+
</Link>
184+
);
185+
})}
186+
</Column>
187+
))}
188+
</Column>
174189
<Column
175190
flexGrow={collapsed ? 1 : undefined}
176191
justifyContent="flex-end"

‎src/app/share/[slug]/[[...path]]/SharePage.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,14 @@ function getSharePath(pathname: string) {
5959
}
6060

6161
export function SharePage() {
62-
const [navCollapsed, setNavCollapsed] = useState(false);
62+
const [navCollapsed, setNavCollapsed] = useState(
63+
() => typeof window !== 'undefined' && localStorage.getItem('share:navCollapsed') === 'true',
64+
);
65+
66+
const handleCollapse = (value: boolean) => {
67+
localStorage.setItem('share:navCollapsed', String(value));
68+
setNavCollapsed(value);
69+
};
6370
const share = useShare();
6471
const { setTheme } = useTheme();
6572
const pathname = usePathname();
@@ -113,7 +120,7 @@ export function SharePage() {
113120
</MobileMenuButton>
114121
</Row>
115122
<Column display={{ base: 'none', lg: 'flex' }} marginRight="2">
116-
<ShareNav collapsed={navCollapsed} onCollapse={setNavCollapsed} />
123+
<ShareNav collapsed={navCollapsed} onCollapse={handleCollapse} />
117124
</Column>
118125
<PageBody gap>
119126
<WebsiteProvider websiteId={websiteId}>

0 commit comments

Comments
 (0)