export function Sidebar()

in frontend/src/components/sidebar/sidebar.tsx [30:141]
105 lines of code
8 McCabe index (conditional complexity)

export function Sidebar(props: any) {
    const { t } = useTranslation();
    const [selectedKeys, setSelectedKeys] = useState('/dashboard/overview');
    const [collapsed, setCollapsed] = useState(true);
    const { mode } = props;
    const user = useContext(UserInfoContext);

    const navigate = useNavigate();
    const location = useLocation();
    const isSuperAdmin = user?.is_super_admin;
    const isSpaceAdmin = user?.is_admin;
    const isInSpace = !GLOBAL_PATHS.includes(selectedKeys);
    const logoRoute = useMemo(
        () => (GLOBAL_PATHS.some(path => location.pathname.startsWith(path)) ? '/space' : '/cluster'),
        [location.pathname],
    );
    const MENU_KEYS = ['/cluster', '/space', '/settings', '/admin', '/meta'];
    useEffect(() => {
        let selectKey = location.pathname;
        MENU_KEYS.forEach(key => {
            if (location.pathname.startsWith(key)) {
                selectKey = key;
            }
        });
        setSelectedKeys(selectKey);
    }, [location.pathname]);

    function onCollapse() {
        setCollapsed(!collapsed);
    }

    const handleMenuChange = (e: any) => {
        setSelectedKeys(e.key);
    };

    if (mode === 'initialize') {
        return (
            <Sider
                collapsible
                collapsed={collapsed}
                onCollapse={onCollapse}
                width={200}
                className={styles[`doris-manager-side`]}
            >
                <Menu
                    mode="inline"
                    theme="dark"
                    defaultSelectedKeys={['/dashboard/overview']}
                    selectedKeys={[selectedKeys]}
                    style={{ height: '100%', borderRight: 0 }}
                >
                    <Menu.Item
                        style={{
                            height: 60,
                            backgroundColor: '#00284D',
                            marginTop: 0,
                            display: 'flex',
                            justifyContent: 'center',
                            alignItems: 'center',
                        }}
                    >
                        <div
                            className={collapsed ? styles['logo-collapsed'] : styles['logo']}
                            onClick={() => navigate(`/meta/index`)}
                        />
                    </Menu.Item>
                </Menu>
            </Sider>
        );
    } else {
        return (
            <Sider
                collapsible
                collapsed={collapsed}
                onCollapse={onCollapse}
                width={200}
                className={styles[`doris-manager-side`]}
            >
                <Menu
                    mode="inline"
                    theme="dark"
                    defaultSelectedKeys={['/dashboard/overview']}
                    selectedKeys={[selectedKeys]}
                    style={{ height: '100%', borderRight: 0 }}
                    onClick={handleMenuChange}
                >
                    <Menu.Item
                        style={{
                            backgroundColor: '#00284D',
                            marginTop: 0,
                            display: 'flex',
                            justifyContent: 'center',
                            alignItems: 'center',
                        }}
                        key="/logo"
                        onClick={() => navigate(logoRoute)}
                    >
                        <div className={collapsed ? styles['logo-collapsed'] : styles['logo']} />
                    </Menu.Item>
                    {isInSpace && (
                        <>
                            <Menu.Item key="/cluster" title={t`Cluster`} icon={<ClusterOutlined />}>
                                <Link to={`/cluster`}>{t`Cluster`}</Link>
                            </Menu.Item>
                            <Menu.Item key="/meta" icon={<TableOutlined />}>
                                <Link to={`/meta`}>{t`data`}</Link>
                            </Menu.Item>
                            {(isSuperAdmin || isSpaceAdmin) && (
                                <Menu.Item key="/admin" icon={<AppstoreOutlined />}>
                                    <Link to={`/admin`}>{t`Space Manager`}</Link>
                                </Menu.Item>
                            )}