mirror of
https://github.com/umami-software/umami.git
synced 2026-02-11 08:07:12 +01:00
Fixed nav display.
This commit is contained in:
parent
2f7f8911cd
commit
25f96f6b6b
5 changed files with 30 additions and 32 deletions
|
|
@ -21,8 +21,9 @@ import { WebsiteNav } from '@/app/(main)/websites/[websiteId]/WebsiteNav';
|
||||||
|
|
||||||
export function SideNav(props: SidebarProps) {
|
export function SideNav(props: SidebarProps) {
|
||||||
const { formatMessage, labels } = useMessages();
|
const { formatMessage, labels } = useMessages();
|
||||||
const { pathname, renderUrl, websiteId } = useNavigation();
|
const { pathname, renderUrl, websiteId, teamId } = useNavigation();
|
||||||
const [isCollapsed] = useGlobalState('sidenav-collapsed');
|
const [isCollapsed] = useGlobalState('sidenav-collapsed');
|
||||||
|
const isWebsite = websiteId && !pathname.includes('/settings');
|
||||||
|
|
||||||
const links = [
|
const links = [
|
||||||
{
|
{
|
||||||
|
|
@ -67,10 +68,10 @@ export function SideNav(props: SidebarProps) {
|
||||||
];
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Row height="100%" margin="2" backgroundColor border borderRadius>
|
<Row height="100%" backgroundColor border="right">
|
||||||
<Sidebar
|
<Sidebar
|
||||||
{...props}
|
{...props}
|
||||||
isCollapsed={isCollapsed || websiteId}
|
isCollapsed={isCollapsed || isWebsite}
|
||||||
muteItems={false}
|
muteItems={false}
|
||||||
variant="quiet"
|
variant="quiet"
|
||||||
showBorder={false}
|
showBorder={false}
|
||||||
|
|
@ -88,16 +89,17 @@ export function SideNav(props: SidebarProps) {
|
||||||
})}
|
})}
|
||||||
</SidebarSection>
|
</SidebarSection>
|
||||||
<SidebarSection>
|
<SidebarSection>
|
||||||
{bottomLinks.map(({ id, path, label, icon }) => {
|
{!teamId &&
|
||||||
return (
|
bottomLinks.map(({ id, path, label, icon }) => {
|
||||||
<Link key={id} href={path} role="button">
|
return (
|
||||||
<SidebarItem label={label} icon={icon} isSelected={pathname.startsWith(path)} />
|
<Link key={id} href={path} role="button">
|
||||||
</Link>
|
<SidebarItem label={label} icon={icon} isSelected={pathname.startsWith(path)} />
|
||||||
);
|
</Link>
|
||||||
})}
|
);
|
||||||
|
})}
|
||||||
</SidebarSection>
|
</SidebarSection>
|
||||||
</Sidebar>
|
</Sidebar>
|
||||||
{websiteId && <WebsiteNav websiteId={websiteId} />}
|
{isWebsite && <WebsiteNav websiteId={websiteId} />}
|
||||||
</Row>
|
</Row>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@ import { PanelButton } from '@/components/input/PanelButton';
|
||||||
|
|
||||||
export function TopNav() {
|
export function TopNav() {
|
||||||
const { teamId, websiteId, pathname } = useNavigation();
|
const { teamId, websiteId, pathname } = useNavigation();
|
||||||
const isSettings = pathname.includes('/settings');
|
const isWebsite = websiteId && !pathname.includes('/settings');
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Row
|
<Row
|
||||||
|
|
@ -24,21 +24,19 @@ export function TopNav() {
|
||||||
zIndex={1}
|
zIndex={1}
|
||||||
>
|
>
|
||||||
<Row alignItems="center">
|
<Row alignItems="center">
|
||||||
<PanelButton />
|
<PanelButton isDisabled={!!isWebsite} />
|
||||||
<Seperator />
|
<Seperator />
|
||||||
<Row alignItems="center" gap="1">
|
<TeamsButton />
|
||||||
<TeamsButton />
|
{isWebsite && (
|
||||||
{websiteId && !isSettings && (
|
<>
|
||||||
<>
|
<Seperator />
|
||||||
<Seperator />
|
<WebsiteSelect
|
||||||
<WebsiteSelect
|
buttonProps={{ variant: 'quiet' }}
|
||||||
buttonProps={{ variant: 'quiet' }}
|
websiteId={websiteId}
|
||||||
websiteId={websiteId}
|
teamId={teamId}
|
||||||
teamId={teamId}
|
/>
|
||||||
/>
|
</>
|
||||||
</>
|
)}
|
||||||
)}
|
|
||||||
</Row>
|
|
||||||
</Row>
|
</Row>
|
||||||
<Row alignItems="center" justifyContent="flex-end">
|
<Row alignItems="center" justifyContent="flex-end">
|
||||||
<ThemeButton />
|
<ThemeButton />
|
||||||
|
|
|
||||||
|
|
@ -134,7 +134,7 @@ export function WebsiteNav({ websiteId }: { websiteId: string }) {
|
||||||
'overview';
|
'overview';
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Column gap padding width="240px" border="left">
|
<Column gap padding width="240px" border="left" overflowY="auto">
|
||||||
<NavMenu highlightColor="2">
|
<NavMenu highlightColor="2">
|
||||||
{links.map(({ label, items }) => {
|
{links.map(({ label, items }) => {
|
||||||
return (
|
return (
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
import { Button, Icon } from '@umami/react-zen';
|
import { Button, Icon, ButtonProps } from '@umami/react-zen';
|
||||||
import { PanelLeft } from '@/components/icons';
|
import { PanelLeft } from '@/components/icons';
|
||||||
import { useGlobalState } from '@/components/hooks';
|
import { useGlobalState } from '@/components/hooks';
|
||||||
|
|
||||||
export function PanelButton() {
|
export function PanelButton(props: ButtonProps) {
|
||||||
const [isCollapsed, setIsCollapsed] = useGlobalState('sidenav-collapsed');
|
const [isCollapsed, setIsCollapsed] = useGlobalState('sidenav-collapsed');
|
||||||
return (
|
return (
|
||||||
<Button onPress={() => setIsCollapsed(!isCollapsed)} variant="quiet">
|
<Button onPress={() => setIsCollapsed(!isCollapsed)} variant="quiet" {...props}>
|
||||||
<Icon>
|
<Icon>
|
||||||
<PanelLeft />
|
<PanelLeft />
|
||||||
</Icon>
|
</Icon>
|
||||||
|
|
|
||||||
|
|
@ -170,8 +170,6 @@ async function clickhouseQuery(
|
||||||
from (
|
from (
|
||||||
select session_id s,
|
select session_id s,
|
||||||
${columnQuery} as t
|
${columnQuery} as t
|
||||||
from website_event_stats_hourly website_event
|
|
||||||
select ${columnQuery} as t
|
|
||||||
from website_event_stats_hourly as website_event
|
from website_event_stats_hourly as website_event
|
||||||
${cohortQuery}
|
${cohortQuery}
|
||||||
where website_id = {websiteId:UUID}
|
where website_id = {websiteId:UUID}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue