<commit_before>import React from "react";
import menuData from '../data/menu.json';
import './menu.scss';
import { Link } from 'gatsby';

const MenuItem = ({ item, currentFramework }) => {
    if (item.frameworkSpecific && !isCurrentFramework(item.title, currentFramework)) { return null; }

    return (
        <li key={item.title}>
            {item.url
                ? <Link to={`../../${item.url.replace('${framework}', currentFramework)}`}>{item.title}</Link>
                : item.title
            }
            {item.items && <MenuGroup group={{ group: item.title, items: item.items }} currentFramework={currentFramework} />}
        </li>
    );
};

const MenuGroup = ({ group, currentFramework }) => {
    if (group.frameworkSpecific && !isCurrentFramework(group.title, currentFramework)) { return null; }

    return (
        <ul>
            {group.items.map(item => <MenuItem key={item.title} item={item} currentFramework={currentFramework} />)}
        </ul>
    );
};

const isCurrentFramework = (title, currentFramework) => title.toLowerCase().indexOf(currentFramework) !== -1;

const Menu = ({ currentFramework }) => {
    return <div className="menu_view">
        {menuData.map(group => <MenuGroup key={group.group} group={group} currentFramework={currentFramework} />)}
    </div>;
};

export default Menu;<commit_msg>AG-4633 - allow menu sections to be expanded/collapsed<commit_after>import React, { useState } from "react";
import menuData from '../data/menu.json';
import './menu.scss';
import { Link } from 'gatsby';

const MenuSection = ({ title, items, currentFramework, isActive, setActive }) => {
    return <li key={title} onClick={() => setActive()}>
        {title}
        {isActive && <MenuGroup group={{ group: title, items }} currentFramework={currentFramework} />}
    </li>;
};

const MenuGroup = ({ group, currentFramework }) => {
    if (group.frameworkSpecific && !isCurrentFramework(group.title, currentFramework)) { return null; }

    return (
        <ul>
            {group.items.map(item => <MenuItem key={item.title} item={item} currentFramework={currentFramework} />)}
        </ul>
    );
};

const MenuItem = ({ item, currentFramework }) => {
    if (item.frameworkSpecific && !isCurrentFramework(item.title, currentFramework)) { return null; }

    return (
        <li key={item.title}>
            {item.url
                ? <Link to={`../../${item.url.replace('${framework}', currentFramework)}`}>{item.title}</Link>
                : item.title
            }
            {item.items && <MenuGroup group={{ group: item.title, items: item.items }} currentFramework={currentFramework} />}
        </li>
    );
};

const isCurrentFramework = (title, currentFramework) => title.toLowerCase().indexOf(currentFramework) !== -1;

const Menu = ({ currentFramework }) => {
    const combinedMenuItems = menuData.reduce((combined, group) => [...combined, ...group.items], []);
    const [activeSection, setActiveSection] = useState(null);

    return <div className="menu_view">
        <ul>
            {combinedMenuItems.map(item => <MenuSection
                key={item.title}
                title={item.title}
                items={item.items}
                currentFramework={currentFramework}
                isActive={item.title === activeSection}
                setActive={() => setActiveSection(item.title)}
            />)}
        </ul>
    </div>;
};

export default Menu;
{'fraction_non_alphanumeric': 0.16686046511627908, 'fraction_numerical': 0.0017441860465116279, 'mean_word_length': 2.861952861952862, 'pattern_counts': {'":': 0, '<': 30, '<?xml version=': 0, '>': 46, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6536781', 'n_tokens_mistral': 955, 'n_tokens_neox': 946, 'n_words': 204}