Skip to content

Commit

Permalink
✨ feat(menu): improve current menu state
Browse files Browse the repository at this point in the history
  • Loading branch information
thrownullexception committed Nov 16, 2023
1 parent 79f5146 commit 8c1bb5e
Show file tree
Hide file tree
Showing 3 changed files with 45 additions and 31 deletions.
47 changes: 22 additions & 25 deletions src/frontend/_layouts/app/LayoutImpl/RenderNavigation.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import {
} from "shared/types/menu";
import { NAVIGATION_LINKS } from "frontend/lib/routing/links";
import { systemIconToSVG } from "shared/constants/Icons";
import { useSessionStorage } from "react-use";
import { ChevronRight } from "react-feather";
import { SYSTEM_COLORS } from "frontend/design-system/theme/system";
import { Typo } from "frontend/design-system/primitives/Typo";
Expand Down Expand Up @@ -109,6 +108,8 @@ interface IProp {
isFullWidth: boolean;
setIsFullWidth: (value: boolean) => void;
depth?: number;
activeItem: Record<string, string>;
setActiveItem: (depth: number, value: string) => void;
}

const SYSTEM_LINK_MAP: Record<SystemLinks, string> = {
Expand Down Expand Up @@ -145,21 +146,27 @@ export function RenderNavigation({
isFullWidth,
setIsFullWidth,
depth = 1,
setActiveItem,
activeItem,
}: IProp) {
// TODO clear the parent activeitems
const [activeItem, setActiveItem] = useSessionStorage(
`navigation-item-${depth}`,
""
);

const { clear: clearBreadCrumbStack } = useNavigationStack();

const getBackgroundColor = useThemeColorShade();

return (
<LeftSideNavMenu>
{navigation.map(({ title, icon, type, link, id, children }) => {
const isActive = activeItem === id;
const isActive = activeItem[depth] === id;

const iconComponent = (
<IconRoot
$isFullWidth={isFullWidth}
dangerouslySetInnerHTML={{
__html: systemIconToSVG(icon, isActive ? 2 : 1),
}}
/>
);

return (
<LeftSideNavMenuList key={id}>
{/* eslint-disable-next-line no-nested-ternary */}
Expand All @@ -169,21 +176,16 @@ export function RenderNavigation({
<>
<LeftSideNavMenuListAnchor
as={PlainButton}
$isActive={isActive}
$isActive={false}
$depth={depth}
hoverColor={getBackgroundColor("primary-color", 45)}
onClick={() => {
clearBreadCrumbStack();
setIsFullWidth(true);
setActiveItem(isActive ? "" : id);
setActiveItem(depth, isActive ? "" : id);
}}
>
<IconRoot
$isFullWidth={isFullWidth}
dangerouslySetInnerHTML={{
__html: systemIconToSVG(icon, isActive ? 2 : 1),
}}
/>
{iconComponent}
{isFullWidth && (
<Stack justify="space-between" spacing={0} align="center">
<NavLabel ellipsis $isFullWidth={isFullWidth}>
Expand All @@ -203,6 +205,8 @@ export function RenderNavigation({
navigation={children}
isFullWidth={isFullWidth}
depth={depth + 1}
activeItem={activeItem}
setActiveItem={setActiveItem}
/>
)}
</>
Expand All @@ -213,7 +217,7 @@ export function RenderNavigation({
$depth={depth}
onClick={() => {
clearBreadCrumbStack();
setActiveItem(id);
setActiveItem(depth, id);
}}
target={
type === NavigationMenuItemType.ExternalLink
Expand All @@ -222,14 +226,7 @@ export function RenderNavigation({
}
hoverColor={getBackgroundColor("primary-color", 45)}
>
{icon && (
<IconRoot
$isFullWidth={isFullWidth}
dangerouslySetInnerHTML={{
__html: systemIconToSVG(icon, isActive ? 2 : 1),
}}
/>
)}
{icon && iconComponent}
<NavLabel ellipsis $isFullWidth={isFullWidth}>
{title}
</NavLabel>
Expand Down
17 changes: 17 additions & 0 deletions src/frontend/_layouts/app/LayoutImpl/SideBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { useThemeColorShade } from "frontend/design-system/theme/useTheme";
import { Stack } from "frontend/design-system/primitives/Stack";
import { useStorageApi } from "frontend/lib/data/useApi";
import { INavigationMenuItem } from "shared/types/menu";
import { useSessionStorage } from "react-use";
import { PlainButton } from "frontend/design-system/components/Button/TextButton";
import {
NAVIGATION_MENU_ENDPOINT,
Expand Down Expand Up @@ -98,6 +99,20 @@ export function SideBar({ isFullWidth, setIsFullWidth }: IProps) {
const navigationMenuItems = useNavigationMenuItems();
const getThemeColorShade = useThemeColorShade();

const [activeItem, setActiveItem$1] = useSessionStorage<
Record<string, string>
>(`navigation-current-item`, {});

const setActiveItem = (depth: number, value: string) => {
const newValue = { ...activeItem, [depth]: value };

const newValueFiltered = Object.fromEntries(
Object.entries(newValue).filter(([key]) => +key <= depth)
) as Record<string, string>;

setActiveItem$1(newValueFiltered);
};

return (
<Root $isFullWidth={isFullWidth}>
<Brand
Expand Down Expand Up @@ -134,6 +149,8 @@ export function SideBar({ isFullWidth, setIsFullWidth }: IProps) {
navigation={navigationMenuItems.data}
isFullWidth={isFullWidth}
setIsFullWidth={setIsFullWidth}
activeItem={activeItem}
setActiveItem={setActiveItem}
/>
</ViewStateMachine>
</Scroll>
Expand Down
12 changes: 6 additions & 6 deletions src/frontend/views/settings/_Base.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,37 +36,37 @@ const baseMenuItems: IMenuSectionItem[] = [
action: NAVIGATION_LINKS.SETTINGS.THEME,
name: "Theme",
IconComponent: Eye,
order: 30,
order: 20,
},
{
action: NAVIGATION_LINKS.SETTINGS.SITE,
name: "Site",
IconComponent: Globe,
order: 40,
order: 30,
},
{
action: NAVIGATION_LINKS.SETTINGS.DATE,
name: "Date Format",
IconComponent: Calendar,
order: 50,
order: 40,
},
{
action: NAVIGATION_LINKS.SETTINGS.VARIABLES,
name: "Variables",
IconComponent: Book,
order: 60,
order: 50,
},
{
action: NAVIGATION_LINKS.SETTINGS.SYSTEM,
name: "System",
IconComponent: Server,
order: 70,
order: 60,
},
{
action: NAVIGATION_LINKS.SETTINGS.VERSIONS,
name: "System Info",
IconComponent: Terminal,
order: 80,
order: 70,
},
];

Expand Down

0 comments on commit 8c1bb5e

Please sign in to comment.