Add a navigation example

[donavan-tangible]

Do someone is able to inject navigation in module extension?

https://github.com/dwaring87/directus-extension-publish-node/blob/main/directus-module-publish-node/src/components/navigation.vue

[donavan-tangible]

This solution is not the best but it works:
Feel free to suggest a better solution...

import { createRoot } from 'react-dom/client';
import { useTFSStyles } from '../assets/tfsstyles';
import { useTranslation } from 'react-i18next';
import { moduleSettings } from './index';

const List = (): JSX.Element => {
  return (
    <ul className="v-list nav">
      <ListItem
        title={moduleSettings.routes.default?.title as string}
        href={'/admin/' + moduleSettings.id + '/' + moduleSettings.routes.default?.href}
        icon={moduleSettings.routes.default?.navigationIcon as string}
      ></ListItem>
      <ListItem
        title={moduleSettings.routes.conversations?.title as string}
        href={'/admin/' + moduleSettings.id + '/' + moduleSettings.routes.conversations?.href}
        icon={moduleSettings.routes.conversations?.navigationIcon as string}
      ></ListItem>
      <ListItem
        title={moduleSettings.routes.form?.title as string}
        href={'/admin/' + moduleSettings.id + '/' + moduleSettings.routes.form?.href}
        icon={moduleSettings.routes.form?.navigationIcon as string}
      ></ListItem>
    </ul>
  );
};

export interface navigationListItemProps {
  title: string;
  href: string;
  icon: string;
}

export const ListItem = ({ href, icon, title }: navigationListItemProps): JSX.Element => {
  return (
    <a href={href} className="v-list-item link">
      <div className="v-list-item-icon">
        <span className="v-icon">
          <i data-icon={icon}></i>
        </span>
      </div>
      <div className="v-list-item-content">
        <div className="v-text-overflow">{title}</div>
      </div>
    </a>
  );
};

export function setupNavigation(): any {
  const classes = useTFSStyles({});
  const { t } = useTranslation();
  const root = createRoot(document.getElementsByClassName('module-nav-content')[0] as HTMLElement);
  root.render(<List />);
}

[exsurgo]

The other thing you could try is to convert the existing v-list-item Vue component into a React component. Using the createReactComponent method in this repo, the code would be something like ...

 export const ListItem = createReactComponent('VListItem')

<ListItem href={'/admin/' + route) />

Note that this code is very experimental however.

[donavan-tangible]

I already tried this but I don't think this could be possible...
At the end, you need to inject ListItem in

<template #navigation>
 <Navigation> <--- inject here
</template>

[exsurgo]

Yeah, there doesn't seem to be a built-in Directus method for updating the navigation, so I think your current implementation for setupNavigation is probably the only option for now. I was essentially thinking to do the same thing with React.render()

I was only suggesting that instead of recreating the HTML/CSS for each menu item, try to re-use their component instead, by converting the Vue component into a React component. The benefit being that if the HTML/CSS changes in the v-list-item, you wouldn't need to change it on your end.