[WIP]: Initial wip refactor nav tree without kendo

[Alex-Swann]

Initial WIP on replacing nav tree with something not reliant on Kendo

[ShahSheel]

Looks good, however whomever will be contributing to the development of this - some things might be worth considering to implement also.

• Child navigation
• Fixation of drop downs

This is some draft (untested) code that should be feasible to allow child pages - however this is with Kendo.

convertTreeToKendoTree(item, parentAncestors = [], actions = []) {
  const { expandedItems } = this.state;
  const opened = !!expandedItems.find(
    ({ directory }) => directory === item.directory
  );
  const childAncestors = !!item.directory
    ? [...parentAncestors, item.directory]
    : parentAncestors;

  const node = {
    text: item.directory ? item.directory : item.title,
    opened,
    items: Array.isArray(item.links)
      ? item.links.map(childItem =>
          this.convertTreeToKendoTree(childItem, childAncestors, actions)
        )
      : [],
    ancestors: parentAncestors,
    ...item,
  };

  node.items = this.sortByItems(node.items);

  return actions.reduce((mutatedNode, fn) => fn(mutatedNode), node);
}

With the Nav component tree to then be updated to reflect:

const NavItem = ({ item }) => {
  if (!item.directory) {
    return (
      <Link className="nav nav-link" to={item.path}>
        {item.title}
      </Link>
    );
  }

  // If the item has child pages, render them recursively
  if (Array.isArray(item.links) && item.links.length > 0) {
    return (
      <div className="nav nav-directory">
        <p>{item.directory}</p>
        <ul>
          {item.links.map(childItem => (
            <li key={childItem.path}>
              <NavItem item={childItem} />
            </li>
          ))}
        </ul>
      </div>
    );
  }

  // If the item is an empty directory, render it without child pages
  return <p className="nav nav-directory">{item.directory}</p>;
};