export function PageNavigation()

in karavan-app/src/main/webui/src/main/PageNavigation.tsx [61:170]
90 lines of code
5 McCabe index (conditional complexity)

export function PageNavigation () {

    const [config, loading] = useAppConfigStore((state) => [state.config, state.loading], shallow)
    const [setFile] = useFileStore((state) => [state.setFile], shallow)
    const [setStatus, setPodName] = useDevModeStore((state) => [state.setStatus, state.setPodName], shallow)
    const [showUser, setShowUser] = useState<boolean>(false);
    const [pageId, setPageId] = useState<string>();
    const navigate = useNavigate();

    function getMenu() : MenuItem[]  {
        const pages: MenuItem[] = [
            // new MenuItem("dashboard", "Dashboard", <DashboardIcon/>),
            new MenuItem("projects", "Projects", <ProjectsIcon/>),
            new MenuItem("resources", "Resources", <ResourcesIcon/>),
        ]
        if (config.infrastructure === 'docker') {
            pages.push(
                new MenuItem("services", "Services", <ServicesIcon/>),
                new MenuItem("containers", "Containers", <ContainersIcon/>)
            )
        }
        pages.push(new MenuItem("help", "Help", <KnowledgebaseIcon/>));
        pages.push(new MenuItem("system", "System", <ConfigIcon/>));
        return pages;
    }

    return (<div className="nav-buttons" style={{height: "100%", display: "flex", flexDirection: "column"}}>
        <div style={{alignSelf: 'center'}}>
            <Bullseye>
                {loading && <Spinner style={{position: "absolute"}} diameter="40px" aria-label="Loading..."/>}
                <Tooltip className="logo-tooltip" content={config.title + " " + config.version}
                         position={"right"}>
                    {Icon()}
                </Tooltip>
            </Bullseye>

        </div>
        {getMenu().map((page, index) => {
            let className = "nav-button";
            className = className.concat(pageId === page.pageId ? " nav-button-selected" : "");
            className = className.concat((index === getMenu().length - 1) ? " nav-button-last" : "");
            return (
                <div key={page.pageId} style={{width: '100%'}} className={pageId === page.pageId ? "nav-button-selected" : ""}>
                <Button id={page.pageId}
                        icon={page.icon}
                        variant={"link"}
                        className={className}
                        onClick={event => {
                            setFile('none', undefined);
                            setPodName(undefined);
                            setStatus("none");
                            setPageId(page.pageId);
                            navigate(page.pageId);
                        }}
                >
                    {page.pageId}
                </Button>
            </div>
            )
        })}
        <div style={{alignSelf: 'center', flexGrow: '2'}}>
            <Divider/>
        </div>
        {KaravanApi.authType !== 'public' &&
            <div style={{alignSelf: 'center'}}>
                <Popover
                    hasAutoWidth
                    aria-label="Current user"
                    position={"right-end"}
                    hideOnOutsideClick={false}
                    isVisible={showUser}
                    shouldClose={(_event, tip) => setShowUser(false)}
                    shouldOpen={(_event, tip) => setShowUser(true)}
                    headerContent={
                        <TextContent>
                            <Text component={TextVariants.h3}>Profile</Text>
                        </TextContent>
                    }
                    bodyContent={
                        <DescriptionList isHorizontal>
                            <DescriptionListGroup>
                                <DescriptionListTerm>UserName</DescriptionListTerm>
                                <DescriptionListDescription>{KaravanApi.me?.userName}</DescriptionListDescription>
                            </DescriptionListGroup>
                            <DescriptionListGroup>
                                <DescriptionListTerm>Display Name</DescriptionListTerm>
                                <DescriptionListDescription>{KaravanApi.me?.displayName}</DescriptionListDescription>
                            </DescriptionListGroup>
                        </DescriptionList>
                    }
                    footerContent={
                        <Flex justifyContent={{default: "justifyContentFlexEnd"}}>
                            <Button size="sm"
                                    variant={"primary"}
                                    icon={<LogoutIcon/>}
                                    onClick={e => {
                                        setShowUser(false);
                                        SsoApi.logout(() => {});
                                    }}
                            >
                                Logout
                            </Button>
                        </Flex>
                    }
                >
                    <UserIcon className="avatar"/>
                </Popover>
            </div>}
    </div>)
}