strapi-plugin-navigation 2.0.0-beta.3 → 2.0.0-beta.4

package/README.md

@@ -1,34 +1,45 @@
-# Strapi v4 - Navigation plugin - BETA
-
-<p align="center">
+<div align="center">
+  <h1>Strapi v4 - Navigation plugin - BETA</h1>
+  <p>Create consumable navigation with a simple and straigthforward visual builder.</p>
   <a href="https://www.npmjs.org/package/strapi-plugin-navigation">
-    <img src="https://img.shields.io/npm/v/strapi-plugin-navigation/latest.svg" alt="NPM Version" />
+    <img src="https://img.shields.io/github/package-json/v/VirtusLab-Open-Source/strapi-plugin-navigation/feat%252Fstrapi-v4-support?label=npm" alt="NPM Version" />
   </a>
   <a href="https://www.npmjs.org/package/strapi-plugin-navigation">
     <img src="https://img.shields.io/npm/dm/strapi-plugin-navigation.svg" alt="Monthly download on NPM" />
   </a>
   <a href="https://circleci.com/gh/VirtusLab/strapi-plugin-navigation">
-    <img src="https://circleci.com/gh/VirtusLab/strapi-plugin-navigation.svg?style=shield" alt="CircleCI" />
+    <img src="https://circleci.com/gh/VirtusLab-Open-Source/strapi-plugin-navigation/tree/feat%2Fstrapi-v4-support.svg?style=shield" alt="CircleCI" />
   </a>
   <a href="https://codecov.io/gh/VirtusLab/strapi-plugin-navigation">
-    <img src="https://codecov.io/gh/VirtusLab/strapi-plugin-navigation/coverage.svg?branch=master" alt="codecov.io" />
+    <img src="https://codecov.io/gh/VirtusLab/strapi-plugin-navigation/coverage.svg?branch=feat%2Fstrapi-v4-support" alt="codecov.io" />
   </a>
-</p>
+</div>
+
+---
 
-A plugin for [Strapi Headless CMS](https://github.com/strapi/strapi) that provides navigation / menu builder feature with their possibility to control the audience and different output structure renderers:
+Strapi Navigation Plugin provides a website navigation / menu builder feature for [Strapi Headless CMS](https://github.com/strapi/strapi) admin panel. Navigation has the possibility to control the audience and can be consumed by the website with different output structure renderers:
 
 - Flat
 - Tree (nested)
 - RFR (ready for handling by Redux First Router)
 
-### Versions
+## ✨ Features
+
+- **Navigation Public API:** Simple and ready for use API endpoint for consuming the navigation structure you've created
+- **Visual builder:** Elegant and easy to use visual builder
+- **Any Content Type relation:** Navigation can by linked to any of your Content Types by default. Simply, you're controlling it and also limiting available content types by configuration props
+- **Customizable:** Possibility to customize the options like: available Content Types, Maximum level for "attach to menu", Additional fields (audience)
+- **[Audit log](https://github.com/VirtusLab/strapi-molecules/tree/master/packages/strapi-plugin-audit-log):** integration with Strapi Molecules Audit Log plugin that provides changes track record
+
+
+## ⚙️ Versions
 
 - **Stable** - [v1.1.2](https://github.com/VirtusLab-Open-Source/strapi-plugin-navigation)
 - **Beta** - v4 support - [v2.0.0-beta.x](https://github.com/VirtusLab-Open-Source/strapi-plugin-navigation/tree/feat/strapi-v4-support)
 
-### ⏳ Installation
+## ⏳ Installation
 
-(Use **yarn** to install this plugin within your Strapi project (recommended). [Install yarn with these docs](https://yarnpkg.com/lang/en/docs/install/).)
+It's recommended to use **yarn** to install this plugin within your Strapi project. [You can install yarn with these docs](https://yarnpkg.com/lang/en/docs/install/).
 
 ```bash
 yarn add strapi-plugin-navigation@latest
@@ -49,87 +60,53 @@ yarn develop --watch-admin
 
 The **UI Navigation** plugin should appear in the **Plugins** section of Strapi sidebar after you run app again.
 
-
 Enjoy 🎉
 
-### 🖐 Requirements
+## 🖐 Requirements
 
-Complete installation requirements are exact same as for Strapi itself and can be found in the documentation under <a href="https://strapi.io/documentation/v3.x/installation/cli.html#step-1-make-sure-requirements-are-met">Installation Requirements</a>.
+Complete installation requirements are exact same as for Strapi itself and can be found in the documentation under <a href="https://docs.strapi.io/developer-docs/latest/setup-deployment-guides/installation/cli.html#preparing-the-installation">Installation Requirements</a>.
 
 **Supported Strapi versions**:
 
-- Strapi v4.0.2 (recently tested)
-
-(This plugin is not working with v3.x and not may work with the older Strapi v4 versions, but these are not tested nor officially supported at this time.)
-
-**We recommend always using the latest version of Strapi to start your new projects**.
-
-## Features
-
-- **Navigation Public API:** Simple and ready for use API endpoint for getting the navigation structure you've created
-- **Visual builder:** Elegant and easy to use visual builder
-- **Any Content Type relation:** Navigation can by linked to any of your Content Types by default. Simply, you're controlling it and also limiting available content types by configuration props
-- **Customizable:** Possibility to customize the options like: available Content Types, Maximum level for "attach to menu", Additional fields (audience)
-- **[Audit log](https://github.com/VirtusLab/strapi-molecules/tree/master/packages/strapi-plugin-audit-log):** integration with Strapi Molecules Audit Log plugin that provides changes track record
-
-
-## Content Type model relation to Navigation Item
-
-To enable Content Type to work with Navigation Item, you've to add following field to your model `*.settings.json`:
+- Strapi v4.0.5 (recently tested)
+- Strapi v4.x
 
-```
-    "navigation": {
-      "model": "navigationitem",
-      "plugin": "navigation",
-      "via": "related",
-      "configurable": false,
-      "hidden": true
-    }
-```
+_This plugin is not working with v3.x._
 
-inside the `attributes` section like in example below:
+It may or may not work with the older Strapi v4 versions, these are not tested nor officially supported at this time.
 
-```
-    "attributes": {
-        ...,
-        "navigation": {
-            "model": "navigationitem",
-            "plugin": "navigation",
-            "via": "related",
-            "configurable": false,
-            "hidden": true
-        },
-        ...
-    },
-```
+**We recommend always using the latest version of Strapi to start your new projects**.
 
-## Configuration
-To setup the plugin properly we recommend to put following snippet as part of `config/custom.js` or `config/<env>/custom.js` file. If you've got already configurations for other plugins stores by this way, use just the `navigation` part within exising `plugins` item.
+## 🔧 Configuration
+Config for this plugin is stored as a part of `config/plugins.js` or `config/<env>/plugins.js` file. You can use following snippet to make sure that the config structure is correct. If you've got already configurations for other plugins stores by this way, you can use the `navigation` along with them. 
 
 ```js
-    ...
-    plugins: {
-      navigation: {
-        additionalFields: ['audience'],
-        allowedLevels: 2,
-        contentTypesNameFields: {
-          'blog_posts': ['altTitle'],
-          'pages': ['title'],
-        },
-        gql: { ... }
-      },
-    },
-    ...
+    module.exports = ({ env }) => ({
+        // ...
+        navigation: {
+            enabled: true,
+            config: {
+                additionalFields: ['audience'],
+                contentTypes: ['api::page.page'],
+                contentTypesNameFields: {
+                    'api::page.page': ['title']
+                },
+                allowedLevels: 2,
+                gql: {...},
+            }
+        }
+    });
 ```
 
 ### Properties
 - `additionalFields` - Additional fields: 'audience', more in the future
 - `allowedLevels` - Maximum level for which your're able to mark item as "Menu attached"
-- `contentTypesNameFields` - Definition of content type title fields like `'content_type_name': ['field_name_1', 'field_name_2']`, if not set titles are pulled from fields like `['title', 'subject', 'name']`
+- `contentTypes` - UIDs of related content types
+- `contentTypesNameFields` - Definition of content type title fields like `'api::<collection name>.<content type name>': ['field_name_1', 'field_name_2']`, if not set titles are pulled from fields like `['title', 'subject', 'name']`. **TIP** - Proper content type uid you can find in the URL of Content Manager where you're managing relevant entities like: `admin/content-manager/collectionType/< THE UID HERE >?page=1&pageSize=10&sort=Title:ASC&plugins[i18n][locale]=en`
 - `gql` - If you're using GraphQL that's the right place to put all necessary settings. More **[ here ](#gql-configuration)**
 
 ## GQL Configuration
-To properly configure GQL to work with navigation you should provide `gql` prop which should contain union types which will be used for define GQL response format for your data while fetching:
+Using navigation with GraphQL requires both plugins to be installed and working. You can find instalation guide for GraphQL plugin **[here](https://docs.strapi.io/developer-docs/latest/plugins/graphql.html#graphql)**.  To properly configure GQL to work with navigation you should provide `gql` prop. This should contain union types that will be used to define GQL response format for your data while fetching:
 
 ```gql
 master: Int
@@ -137,11 +114,11 @@ items: [NavigationItem]
 related: NavigationRelated
 ```
 
-as follows:   
+This prop should look as follows:   
 
 ```js
 gql: {
-    navigationItemRelated: 'union NavigationRelated = <your GQL related entities>',
+    navigationItemRelated: ['<your GQL related content types>'],
 },
 ```
 
@@ -149,10 +126,10 @@ for example:
 
 ```js
 gql: {
-        navigationItemRelated: 'union NavigationRelated = Pages | UploadFile',
+    navigationItemRelated: ['Page', 'UploadFile'],
 },
 ```
-where `Pages` and `UploadFile` are your types to the **Content Types** you're referring by navigation items relations. 
+where `Page` and `UploadFile` are your type names for the **Content Types** you're referring by navigation items relations. 
 
 
 ## Public API Navigation Item model
@@ -225,13 +202,13 @@ where `Pages` and `UploadFile` are your types to the **Content Types** you're re
 
 ### Render
 
-`GET <host>/navigation/render/<idOrSlug>?type=<type>`
+`GET <host>/api/navigation/render/<idOrSlug>?type=<type>`
 
 Return a rendered navigation structure depends on passed type (`tree`, `rfr` or nothing to render as `flat/raw`).
 
 *Note: The ID of navigation by default is `1`, that's for future extensions and multi-navigation feature.*
 
-**Example URL**: `https://localhost:1337/navigation/render/1`
+**Example URL**: `https://localhost:1337/api/navigation/render/1`
 
 **Example response body**
 
@@ -260,7 +237,7 @@ Return a rendered navigation structure depends on passed type (`tree`, `rfr` or
 ]
 ```
 
-**Example URL**: `https://localhost:1337/navigation/render/1?type=tree`
+**Example URL**: `https://localhost:1337/api/navigation/render/1?type=tree`
 
 **Example response body**
 
@@ -296,7 +273,7 @@ Return a rendered navigation structure depends on passed type (`tree`, `rfr` or
 ]
 ```
 
-**Example URL**: `https://localhost:1337/navigation/render/1?type=rfr`
+**Example URL**: `https://localhost:1337/api/navigation/render/1?type=rfr`
 
 **Example response body**
 
@@ -387,30 +364,11 @@ For collection types it will be read from content type's attribute name `templat
 
 For single types a global name of this content type will be used as a template name or it can be set manually with an option named `templateName`.
 
-## Audit log
-If you would like to use the [Strapi Molecules Audit Log](https://github.com/VirtusLab/strapi-molecules/tree/master/packages/strapi-plugin-audit-log) plugin you've to first install and then add in you `config/middleware.js` following section enable it:
-```js
-{
-    'audit-log': {
-          enabled: true,
-          exclude: [],
-          map: [
-            {
-              pluginName: 'navigation',
-              serviceName: 'navigation',
-              Class: Navigation,
-            },
-          ]
-        }
-}
-```
-As a last step you've to provide the Navigation class to let Audit Log use it. To not provide external & hard dependencies we've added the example of class code in the `examples/audit-log-integration.js` .
-
-## Examples
+## 🧩 Examples
 
 Live example of plugin usage can be found in the [VirtusLab Strapi Examples](https://github.com/VirtusLab/strapi-examples/tree/master/strapi-plugin-navigation) repository.
 
-## Q&A
+## 💬 Q&A
 
 ### Content Types
 
@@ -418,11 +376,11 @@ Live example of plugin usage can be found in the [VirtusLab Strapi Examples](htt
 
 **A:** As an authors of the plugin we're not supporting any editing of mentioned content types via built-in Strapi Content Manager. Plugin delivers highly customized & extended functionality which might be covered only by dedicated editor UI accessible via **Plugins Section > UI Navigation**. Only issues that has been recognized there, are in the scope of support we've providing.
 
-## Contributing
+## 🤝 Contributing
 
 Feel free to fork and make a Pull Request to this plugin project. All the input is warmly welcome!
 
-## Community support
+## 👨‍💻 Community support
 
 For general help using Strapi, please refer to [the official Strapi documentation](https://strapi.io/documentation/). For additional help, you can use one of these channels to ask a question:
 
@@ -430,6 +388,6 @@ For general help using Strapi, please refer to [the official Strapi documentatio
 - [Slack - VirtusLab Open Source](https://virtuslab-oss.slack.com) We're present on a public channel #strapi-molecules
 - [GitHub](https://github.com/VirtusLab/strapi-plugin-navigation/issues) (Bug reports, Contributions, Questions and Discussions)
 
-## License
+## 📝 License
 
 [MIT License](LICENSE.md) Copyright (c) 2021 [VirtusLab Sp. z o.o.](https://virtuslab.com/) &amp; [Strapi Solutions](https://strapi.io/).

package/admin/src/components/Item/ItemCardHeader/index.js

@@ -12,7 +12,7 @@ import Wrapper from './Wrapper';
 import ItemCardBadge from '../ItemCardBadge';
 import { getTrad } from "../../../translations";
 
-const ItemCardHeader = ({ title, path, icon, removed, isPublished, onItemRemove, onItemEdit, onItemRestore }) => {
+const ItemCardHeader = ({ title, path, icon, removed, isExternal, isPublished, onItemRemove, onItemEdit, onItemRestore }) => {
 	const badgeColor = isPublished ? 'success' : 'secondary';
 	const { formatMessage } = useIntl();
 
@@ -36,7 +36,7 @@ const ItemCardHeader = ({ title, path, icon, removed, isPublished, onItemRemove,
 					>
 						{formatMessage(getTrad("navigation.item.badge.removed"))}
 					</ItemCardBadge>
-					: <ItemCardBadge
+					: !isExternal && <ItemCardBadge
 						borderColor={`${badgeColor}200`}
 						backgroundColor={`${badgeColor}100`}
 						textColor={`${badgeColor}600`}

package/admin/src/components/Item/index.js

@@ -31,6 +31,7 @@ const Item = (props) => {
     onItemRestore,
     onItemEdit,
     error,
+    displayChildren,
   } = props;
 
   const {
@@ -48,7 +49,7 @@ const Item = (props) => {
   const isPublished = relatedRef && relatedRef?.publishedAt;
   const isNextMenuAllowedLevel = isNumber(allowedLevels) ? level < (allowedLevels - 1) : true;
   const isMenuAllowedLevel = isNumber(allowedLevels) ? level < allowedLevels : true;
-  const hasChildren = !isEmpty(item.items) && !isExternal;
+  const hasChildren = !isEmpty(item.items) && !isExternal && !displayChildren;
   const absolutePath = isExternal ? undefined : `${levelPath === '/' ? '' : levelPath}/${path === '/' ? '' : path}`;
 
   return (
@@ -60,6 +61,7 @@ const Item = (props) => {
             path={isExternal ? externalPath : absolutePath}
             icon={isExternal ? <EarthIcon /> : <LinkIcon />}
             isPublished={isPublished}
+            isExternal={isExternal}
             onItemRemove={() => onItemRemove(item)}
             onItemEdit={() => onItemEdit({
               ...item,

package/admin/src/components/NavigationItemList/index.js

@@ -15,6 +15,7 @@ const List = ({
   onItemLevelAdd,
   onItemRemove,
   onItemRestore,
+  displayFlat,
 }) => (
   <Wrapper level={level}>
     {items.map((item, n) => {
@@ -34,6 +35,7 @@ const List = ({
           onItemRemove={onItemRemove}
           onItemEdit={onItemEdit}
           error={error}
+          displayChildren={displayFlat}
         />
       );
     })}

package/admin/src/components/Search/index.js

@@ -0,0 +1,49 @@
+import React, { useRef, useState, useEffect } from 'react';
+import { useIntl } from 'react-intl';
+import { IconButton } from '@strapi/design-system/IconButton';
+import { Searchbar, SearchForm } from '@strapi/design-system/Searchbar';
+import SearchIcon from "@strapi/icons/Search";
+import { getTradId } from '../../translations';
+
+const Search = ({ value, setValue }) => {
+	const [isOpen, setIsOpen] = useState(!!value);
+	const wrapperRef = useRef(null);
+	const { formatMessage } = useIntl();
+
+	useEffect(() => {
+    if (isOpen) {
+      setTimeout(() => {
+        wrapperRef.current.querySelector('input').focus();
+      }, 0);
+    }
+	}, [isOpen]);
+	
+	if (isOpen) {
+		return (
+			<div ref={wrapperRef}>
+				<SearchForm>
+					<Searchbar
+						name="searchbar"
+						onClear={() => setValue('')}
+						value={value}
+						size="S"
+						onChange={(e) => setValue(e.target.value)}
+						clearLabel="Clearing the search"
+						placeholder={formatMessage({
+							id: getTradId('popup.item.form.audience.placeholder'),
+							defaultMessage: 'Type to start searching...',
+						})}
+					>
+						Search for navigation items
+					</Searchbar>
+				</SearchForm>
+			</div>
+		);
+	} else {
+		return (
+			<IconButton icon={<SearchIcon />} onClick={() => setIsOpen(!isOpen)} />
+		);
+	}
+}
+
+export default Search;

package/admin/src/pages/View/index.js

@@ -14,10 +14,8 @@ import { ContentLayout } from '@strapi/design-system/Layout';
 import { Button } from '@strapi/design-system/Button';
 import { LoadingIndicatorPage } from "@strapi/helper-plugin";
 import { EmptyStateLayout } from '@strapi/design-system/EmptyStateLayout';
-import { IconButton } from '@strapi/design-system/IconButton';
 import EmptyDocumentsIcon from '@strapi/icons/EmptyDocuments';
 import PlusIcon from "@strapi/icons/Plus";
-import SearchIcon from "@strapi/icons/Search";
 
 // Components 
 import List from '../../components/NavigationItemList';
@@ -32,6 +30,7 @@ import {
   usedContentTypes,
   validateNavigationStructure,
 } from './utils/parsers';
+import Search from '../../components/Search';
 
 const View = () => {
   const {
@@ -55,6 +54,9 @@ const View = () => {
   const [activeNavigationItem, setActiveNavigationItemState] = useState({});
   const { formatMessage } = useIntl();
 
+  const [searchValue, setSearchValue] = useState('');
+  const isSearchEmpty = isEmpty(searchValue);
+
   const structureHasErrors = !validateNavigationStructure((changedActiveNavigation || {}).items);
   const navigationSelectValue = get(activeNavigation, "id", null);
   const handleSave = () => isLoadingForSubmit || structureHasErrors
@@ -104,6 +106,15 @@ const View = () => {
     handleChangeNavigationData(changedStructure, true);
   };
 
+  const filteredListFactory = (items, filterFunction) => items.reduce((acc, item) => {
+    const subItems = !isEmpty(item.items) ? filteredListFactory(item.items, filterFunction) : [];
+    if (filterFunction(item))
+      return [item, ...subItems, ...acc];
+    else
+      return [...subItems, ...acc];
+  }, []);
+  const filteredList = !isSearchEmpty ? filteredListFactory(changedActiveNavigation.items, (item) => item?.title.includes(searchValue)) : [];
+
   const handleItemRemove = (item) => {
     handleSubmitNavigationItem({
       ...item,
@@ -147,7 +158,7 @@ const View = () => {
         {changedActiveNavigation && (
           <>
             <NavigationContentHeader
-              startActions={<IconButton icon={<SearchIcon />} />}
+              startActions={<Search value={searchValue} setValue={setSearchValue}/>}
               endActions={<Button
                 onClick={addNewNavigationItem}
                 startIcon={<PlusIcon />}
@@ -176,11 +187,12 @@ const View = () => {
             {
               !isEmpty(changedActiveNavigation.items || [])
               && <List
-                items={changedActiveNavigation.items || []}
+                items={isSearchEmpty ? changedActiveNavigation.items || [] : filteredList}
                 onItemLevelAdd={addNewNavigationItem}
                 onItemRemove={handleItemRemove}
                 onItemEdit={handleItemEdit}
                 onItemRestore={handleItemRestore}
+                displayFlat={!isSearchEmpty}
                 root
                 error={error}
                 allowedLevels={config.allowedLevels}

package/admin/src/pages/View/utils/parsers.js

@@ -28,7 +28,7 @@ export const transformItemToRESTPayload = (
   const { contentTypes = [] } = config;
 
   const parsedRelated = Number(related);
-  const relatedId = isExternal || isNaN(parsedRelated) ? related.value || related : parsedRelated;
+  const relatedId = isExternal || isNaN(parsedRelated) ? related?.value || related : parsedRelated;
 
   const relatedContentType = relatedType ?
     find(contentTypes,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "strapi-plugin-navigation",
-  "version": "2.0.0-beta.3",
+  "version": "2.0.0-beta.4",
   "description": "Strapi - Navigation plugin",
   "strapi": {
     "name": "navigation",
@@ -16,7 +16,7 @@
     "test:unit": "jest --verbose --coverage"
   },
   "dependencies": {
-    "@types/uuid": "^8.3.0",
+    "uuid": "^8.3.0",
     "bad-words": "^3.0.3",
     "lodash": "^4.17.11",
     "react": "^16.9.0",
@@ -38,6 +38,9 @@
     "jest-styled-components": "^7.0.2",
     "codecov": "^3.7.2"
   },
+  "peerDependencies": {
+    "@strapi/strapi": "4.x"
+  },
   "author": {
     "name": "VirtusLab // Mateusz Ziarko",
     "email": "mziarko@virtuslab.com",

package/server/config/index.js

@@ -0,0 +1,8 @@
+module.exports = {
+	default: {
+		additionalFields: [],
+		contentTypes: [],
+		contentTypesNameFields: {},
+		allowedLevels: 2
+	}
+}

package/server/controllers/navigation.js

@@ -48,4 +48,25 @@ module.exports = {
     return getService().put(id, body, auditLog)
       .catch(errorHandler(ctx));
   },
+  async render(ctx) {
+    const { params, query = {} } = ctx;
+    const { type, menu: menuOnly } = query;
+    const { idOrSlug } = parseParams(params);
+    return getService().render(
+      idOrSlug,
+      type,
+      menuOnly,
+    );
+  },
+  async renderChild(ctx) {
+    const { params, query = {} } = ctx;
+    const { type, menu: menuOnly } = query;
+    const { idOrSlug, childUIKey } = parseParams(params);
+    return getService().renderChildren(
+      idOrSlug,
+      childUIKey,
+      type,
+      menuOnly
+    );
+  },
 };

package/server/graphql/index.js

@@ -0,0 +1,23 @@
+const getTypes = require('./types');
+const getQueries = require('./queries');
+const getResolversConfig = require('./resolvers-config');
+
+module.exports = () => {
+	const extensionService = strapi.plugin('graphql').service('extension');
+
+	extensionService.shadowCRUD('plugin::navigation.audience').disable();
+	extensionService.shadowCRUD('plugin::navigation.navigation').disable();
+	extensionService.shadowCRUD('plugin::navigation.navigation-item').disable();
+	extensionService.shadowCRUD('plugin::navigation.navigations-items-related').disable();
+
+	extensionService.use(({ nexus }) => {
+		const types = getTypes({ strapi, nexus });
+		const queries = getQueries({ strapi, nexus });
+		const resolversConfig = getResolversConfig({ strapi });
+
+		return {
+			types: [types, queries],
+			resolversConfig,
+		}
+	});
+}

package/server/graphql/queries/index.js

@@ -0,0 +1,17 @@
+module.exports = (context) => {
+	const queries = {
+		renderNavigationChild: require('./render-navigation-child'),
+		renderNavigation: require('./render-navigation'),
+	}
+
+  return context.nexus.extendType({
+    type: 'Query',
+		definition(t) {
+			for (const [name, configFactory] of Object.entries(queries)) {
+				const config = configFactory(context);
+
+				t.field(name, config);
+			}
+    },
+  });
+};

package/server/graphql/queries/render-navigation-child.js

@@ -0,0 +1,16 @@
+module.exports = ({ strapi, nexus }) => {
+	const { nonNull, list, stringArg, booleanArg } = nexus;
+	return {
+		type: nonNull(list('NavigationItem')),
+		args: {
+			id: nonNull(stringArg()),
+			childUiKey: nonNull(stringArg()),
+			type: 'NavigationRenderType',
+			menuOnly: booleanArg()
+		},
+		resolve(obj, args) {
+			const { id, childUIKey, type, menuOnly } = args;
+			return strapi.plugin('navigation').service('navigation').renderChildren(id, childUIKey, type, menuOnly);
+		},
+	};
+}

package/server/graphql/queries/render-navigation.js

@@ -0,0 +1,15 @@
+module.exports = ({ strapi, nexus }) => {
+	const { nonNull, list, stringArg, booleanArg } = nexus;
+	return {
+		type: nonNull(list('NavigationItem')),
+		args: {
+			navigationIdOrSlug: nonNull(stringArg()),
+			type: 'NavigationRenderType',
+			menuOnly: booleanArg()
+		},
+		resolve(obj, args) {
+			const { navigationIdOrSlug, type, menuOnly } = args;
+			return strapi.plugin('navigation').service('navigation').render(navigationIdOrSlug, type, menuOnly);
+		},
+	};
+}

package/server/graphql/resolvers-config.js

@@ -0,0 +1,4 @@
+module.exports = ({ }) => ({
+	'Query.renderNavigationChild': { auth: false },
+	'Query.renderNavigation': { auth: false },
+});

package/server/graphql/types/content-types-name-fields.js

@@ -0,0 +1,8 @@
+module.exports = ({ nexus }) => nexus.objectType({
+  name: "ContentTypesNameFields",
+  definition(t) {
+		t.nonNull.list.nonNull.string("default")
+		const contentTypesNameFields = strapi.plugin('navigation').config('contentTypesNameFields')
+		Object.keys(contentTypesNameFields || {}).forEach(key => t.nonNull.list.string(key))
+  }
+})

package/server/graphql/types/content-types.js

@@ -0,0 +1,16 @@
+module.exports = ({ nexus }) => nexus.objectType({
+  name: "ContentTypes",
+  definition(t) {
+    t.nonNull.string("uid")
+    t.nonNull.string("name")
+    t.nonNull.boolean("isSingle")
+    t.nonNull.string("collectionName")
+    t.nonNull.string("contentTypeName")
+    t.nonNull.string("label")
+    t.nonNull.string("relatedField")
+    t.nonNull.string("labelSingular")
+    t.nonNull.string("endpoint")
+    t.nonNull.boolean("available")
+    t.nonNull.boolean("visible")
+  }
+})

package/server/graphql/types/create-navigation-item.js

@@ -0,0 +1,17 @@
+module.exports = ({ nexus }) => nexus.inputObjectType({
+  name: "CreateNavigationItem",
+  definition(t) {
+    t.nonNull.string("title")
+    t.nonNull.string("type")
+    t.string("path")
+    t.string("externalPath")
+    t.nonNull.string("uiRouterKey")
+    t.nonNull.boolean("menuAttached")
+    t.nonNull.int("order")
+    t.int("parent")
+    t.int("master")
+    t.list.field("items", { type: 'CreateNavigationItem' })
+    t.list.string("audience")
+    t.field("related", { type: 'CreateNavigationRelated' })
+  }
+});

package/server/graphql/types/create-navigation-related.js

@@ -0,0 +1,8 @@
+module.exports = ({ nexus }) => nexus.inputObjectType({
+  name: "CreateNavigationRelated",
+  definition(t) {
+    t.nonNull.string("ref")
+    t.nonNull.string("field")
+    t.nonNull.string("refId")
+  }
+});

package/server/graphql/types/create-navigation.js

@@ -0,0 +1,7 @@
+module.exports = ({ nexus }) => nexus.inputObjectType({
+  name: "CreateNavigation",
+  definition(t) {
+    t.nonNull.string("name")
+    t.nonNull.list.field("items", { type: 'CreateNavigationItem' })
+  }
+});

package/server/graphql/types/index.js

@@ -0,0 +1,15 @@
+const typesFactories = [
+	require('./navigation-item'),
+	require('./navigation-related'),
+	require('./navigation-render-type'),
+	require('./navigation'),
+	require('./navigation-details'),
+	require('./content-types-name-fields'),
+	require('./content-types'),
+	require('./navigation-config'),
+	require('./create-navigation-related'),
+	require('./create-navigation-item'),
+	require('./create-navigation'),
+];
+
+module.exports = context => typesFactories.map(factory => factory(context));

package/server/graphql/types/navigation-config.js

@@ -0,0 +1,9 @@
+module.exports = ({ nexus }) => nexus.objectType({
+  name: "NavigationConfig",
+  definition(t) {
+    t.int("allowedLevels");
+    t.nonNull.list.string("additionalFields");
+    t.field("contentTypesNameFields", { type: 'ContentTypesNameFields' });
+    t.list.field("contentTypes", { type: 'ContentTypes' });
+  }
+})

package/server/graphql/types/navigation-details.js

@@ -0,0 +1,10 @@
+module.exports = ({ nexus }) => nexus.objectType({
+  name: "NavigationDetails",
+  definition(t) {
+    t.nonNull.string("id")
+    t.nonNull.string("name")
+    t.nonNull.string("slug")
+    t.nonNull.boolean("visible")
+    t.nonNull.list.field("items", { type: 'NavigationItem' })
+  }
+})

package/server/graphql/types/navigation-item.js

@@ -0,0 +1,29 @@
+module.exports = ({ nexus }) =>
+	nexus.objectType({
+		name: "NavigationItem",
+		definition(t) {
+			t.nonNull.int("id")
+			t.nonNull.string("title")
+			t.nonNull.string("type")
+			t.string("path")
+			t.string("externalPath")
+			t.nonNull.string("uiRouterKey")
+			t.nonNull.boolean("menuAttached")
+			t.nonNull.int("order")
+			t.int("parent")
+			t.int("master")
+			t.list.field("items", { type: 'NavigationItem' })
+			t.list.field("related", { type: 'NavigationRelated' })
+			t.list.string("audience")
+			// SQL
+			t.string("created_at")
+			t.string("updated_at")
+			t.string("created_by")
+			t.string("updated_by")
+			// MONGO
+			t.string("createdAt")
+			t.string("updatedAt")
+			t.string("createdBy")
+			t.string("updatedBy")
+		}
+	});

package/server/graphql/types/navigation-related.js

@@ -0,0 +1,23 @@
+module.exports = ({ strapi, nexus }) => {
+	const related = strapi.plugin('navigation').config('gql').navigationItemRelated;
+	const name = "NavigationRelated";
+
+	if (related?.length) {
+		return nexus.unionType({
+			name,
+			definition(t) {
+				t.members(...related)
+			},
+			resolveType: (item) => strapi.contentTypes[item.__contentType]?.globalId
+		});
+	}
+	
+	return nexus.objectType({
+		name,
+		definition(t) {
+			t.int("id")
+			t.string("title")
+			t.string("name")
+		}
+	})
+}

package/server/graphql/types/navigation-render-type.js

@@ -0,0 +1,4 @@
+module.exports = ({nexus}) => nexus.enumType({
+  name: "NavigationRenderType",
+  members: ['FLAT','TREE','RFR'],
+});

package/server/graphql/types/navigation.js

@@ -0,0 +1,9 @@
+module.exports = ({ nexus }) => nexus.objectType({
+  name: "Navigation",
+  definition(t) {
+    t.nonNull.string("id")
+    t.nonNull.string("name")
+    t.nonNull.string("slug")
+    t.nonNull.boolean("visible")
+  }
+})

package/server/register.js

@@ -0,0 +1,5 @@
+module.exports = ({ strapi }) => {
+  if (strapi.plugin('graphql')) {
+    require('./graphql')({ strapi });
+  }
+};

package/server/routes/client.js

@@ -0,0 +1,21 @@
+module.exports = {
+  type: 'content-api',
+  routes: [
+		 {
+      method: "GET",
+      path: "/render/:idOrSlug",
+      handler: "navigation.render",
+      config: {
+        policies: []
+      }
+    },
+    {
+      method: "GET",
+      path: "/render/:idOrSlug/:childUIKey",
+      handler: "navigation.renderChild",
+      config: {
+        policies: []
+      }
+    }
+  ]
+}

package/server/routes/index.js

@@ -1,3 +1,4 @@
 module.exports = {
-	'admin': require('./admin')
+	'admin': require('./admin'),
+	'content-api': require('./client'),
 };

package/server/services/navigation.js

@@ -8,11 +8,18 @@ const {
   last,
   upperFirst,
   map,
+  toNumber,
+  isString,
+  first,
+
 } = require('lodash');
+const { validate: isUuid } = require('uuid');
+const slugify = require('slugify');
 const { KIND_TYPES } = require('./utils/constant');
 const utilsFunctionsFactory = require('./utils/functions');
-const { additionalFields: configAdditionalFields } = require('../content-types/navigation-item').lifecycle;
-
+const { renderType } = require('../content-types/navigation/lifecycle');
+const { type: itemType, additionalFields: configAdditionalFields } = require('../content-types/navigation-item').lifecycle;
+const { NotFoundError } =  require('@strapi/utils').errors
 const excludedContentTypes = ['strapi::'];
 const contentTypesNameFieldsDefaults = ['title', 'subject', 'name'];
 
@@ -37,7 +44,7 @@ module.exports = ({ strapi }) => {
       const { masterModel, itemModel } = utilsFunctions.extractMeta(strapi.plugins);
       const entity = await strapi
         .query(masterModel.uid)
-        .findOne({ where: { id }});
+        .findOne({ where: { id } });
 
       const entityItems = await strapi
         .query(itemModel.uid)
@@ -193,9 +200,11 @@ module.exports = ({ strapi }) => {
               .map(async ([model, related]) => {
                 const relationData = await strapi
                   .query(model)
-                  .findMany({where: {
-                    id: { $in: map(related, 'related_id') }
-                  }});
+                  .findMany({
+                    where: {
+                      id: { $in: map(related, 'related_id') }
+                    }
+                  });
                 return relationData
                   .flatMap(_ =>
                     Object.assign(
@@ -286,6 +295,263 @@ module.exports = ({ strapi }) => {
         });
     },
 
+    async renderChildren(
+      idOrSlug,
+      childUIKey,
+      type = renderType.FLAT,
+      menuOnly = false,
+    ) {
+      const { service } = utilsFunctions.extractMeta(strapi.plugins);
+      const findById = !isNaN(toNumber(idOrSlug)) || isUuid(idOrSlug);
+      const criteria = findById ? { id: idOrSlug } : { slug: idOrSlug };
+      const filter = type === renderType.FLAT ? null : childUIKey;
+
+      const itemCriteria = {
+        ...(menuOnly && { menuAttached: true }),
+        ...(type === renderType.FLAT ? { uiRouterKey: childUIKey } : {}),
+      };
+
+      return service.renderType(type, criteria, itemCriteria, filter);
+    },
+
+    async render(idOrSlug, type = renderType.FLAT, menuOnly = false) {
+      const { service } = utilsFunctions.extractMeta(strapi.plugins);
+
+      const findById = !isNaN(toNumber(idOrSlug)) || isUuid(idOrSlug);
+      const criteria = findById ? { id: idOrSlug } : { slug: idOrSlug };
+      const itemCriteria = menuOnly ? { menuAttached: true } : {};
+
+      return service.renderType(type, criteria, itemCriteria);
+    },
+
+    async renderType(type = renderType.FLAT, criteria = {}, itemCriteria = {}, filter = null) {
+      const { pluginName, service, masterModel, itemModel } = utilsFunctions.extractMeta(
+        strapi.plugins,
+      );
+
+      const entity = await strapi
+        .query(masterModel.uid)
+        .findOne({
+          where: {
+            ...criteria,
+            visible: true,
+          }
+        });
+      if (entity && entity.id) {
+        const entities = await strapi.query(itemModel.uid).findMany({
+          where: {
+            master: entity.id,
+            ...itemCriteria,
+          },
+          paggination: {
+            limit: -1,
+          },
+          sort: ['order:asc'],
+          populate: ['related', 'audience', 'parent'],
+        });
+
+        if (!entities) {
+          return [];
+        }
+        const items = await this.getRelatedItems(entities);
+        const { contentTypes, contentTypesNameFields } = await service.config();
+
+        switch (type?.toLowerCase()) {
+          case renderType.TREE:
+          case renderType.RFR:
+            const getTemplateName = await utilsFunctions.templateNameFactory(items, strapi, contentTypes);
+            const itemParser = (item, path = '', field) => {
+              const isExternal = item.type === itemType.EXTERNAL;
+              const parentPath = isExternal ? undefined : `${path === '/' ? '' : path}/${item.path === '/'
+                ? ''
+                : item.path}`;
+              const slug = isString(parentPath) ? slugify(
+                (first(parentPath) === '/' ? parentPath.substring(1) : parentPath).replace(/\//g, '-')) : undefined;
+              const lastRelated = item.related ? last(item.related) : undefined;
+              return {
+                id: item.id,
+                title: utilsFunctions.composeItemTitle(item, contentTypesNameFields, contentTypes),
+                menuAttached: item.menuAttached,
+                path: isExternal ? item.externalPath : parentPath,
+                type: item.type,
+                uiRouterKey: item.uiRouterKey,
+                slug: !slug && item.uiRouterKey ? slugify(item.uiRouterKey) : slug,
+                external: isExternal,
+                related: isExternal || !lastRelated ? undefined : {
+                  ...lastRelated,
+                  __templateName: getTemplateName(lastRelated.relatedType || lastRelated.__contentType, lastRelated.id),
+                },
+                audience: !isEmpty(item.audience) ? item.audience.map(aItem => aItem.key) : undefined,
+                items: isExternal ? undefined : service.renderTree({
+                  items,
+                  id: item.id,
+                  field,
+                  path: parentPath,
+                  itemParser,
+                }),
+              };
+            };
+            const treeStructure = service.renderTree({
+              items,
+              field: 'parent',
+              itemParser,
+            });
+
+            const filteredStructure = filter
+              ? treeStructure.filter((item) => item.uiRouterKey === filter)
+              : treeStructure;
+
+            if (type === renderType.RFR) {
+              return service.renderRFR({
+                items: filteredStructure,
+                contentTypes,
+              });
+            }
+            return filteredStructure;
+          default:
+            return items
+              .filter(utilsFunctions.filterOutUnpublished)
+              .map((item) => ({
+                ...item,
+                audience: item.audience?.map(_ => _.key),
+                title: utilsFunctions.composeItemTitle(item, contentTypesNameFields, contentTypes),
+                related: item.related?.map(({ localizations, ...item }) => item),
+                items: null,
+              }));
+        }
+      }
+      throw new NotFoundError();
+    },
+
+    renderTree({
+      items = [],
+      id = null,
+      field = 'parent',
+      path = '',
+      itemParser = (i) => i,
+    }) {
+      return items
+        .filter(
+          (item) => {
+            if (item[field] === null && id === null) {
+              return true;
+            }
+            let data = item[field];
+            if (data && typeof id === 'string') {
+              data = data.toString();
+            }
+            return (data && data === id) || (isObject(item[field]) && (item[field].id === id));
+          },
+        )
+        .filter(utilsFunctions.filterOutUnpublished)
+        .map(item => itemParser({
+          ...item,
+        }, path, field));
+    },
+
+    renderRFR({ items, parent = null, parentNavItem = null, contentTypes = [] }) {
+      const { service } = utilsFunctions.extractMeta(strapi.plugins);
+      let pages = {};
+      let nav = {};
+      let navItems = [];
+
+      items.forEach(item => {
+        const { items: itemChilds, ...itemProps } = item;
+        const itemNav = service.renderRFRNav(itemProps);
+        const itemPage = service.renderRFRPage({
+          item: itemProps,
+          parent,
+        });
+
+        if (item.type === itemType.INTERNAL) {
+          pages = {
+            ...pages,
+            [itemPage.id]: {
+              ...itemPage,
+            },
+          };
+        }
+
+        if (item.menuAttached) {
+          navItems.push(itemNav);
+        }
+
+        if (!parent) {
+          nav = {
+            ...nav,
+            root: navItems,
+          };
+        } else {
+          const navLevel = navItems
+            .filter(navItem => navItem.type === itemType.INTERNAL.toLowerCase());
+          if (!isEmpty(navLevel))
+            nav = {
+              ...nav,
+              [parent]: [].concat(parentNavItem ? parentNavItem : [], navLevel),
+            };
+        }
+
+        if (!isEmpty(itemChilds)) {
+          const { nav: nestedNavs } = service.renderRFR({
+            items: itemChilds,
+            parent: itemPage.id,
+            parentNavItem: itemNav,
+            contentTypes,
+          });
+          const { pages: nestedPages } = service.renderRFR({
+            items: itemChilds.filter(child => child.type === itemType.INTERNAL),
+            parent: itemPage.id,
+            parentNavItem: itemNav,
+            contentTypes,
+          });
+          pages = {
+            ...pages,
+            ...nestedPages,
+          };
+          nav = {
+            ...nav,
+            ...nestedNavs,
+          };
+        }
+      });
+
+      return {
+        pages,
+        nav,
+      };
+    },
+
+    renderRFRNav(item) {
+      const { uiRouterKey, title, path, type, audience } = item;
+      return {
+        label: title,
+        type: type.toLowerCase(),
+        page: type === itemType.INTERNAL ? uiRouterKey : undefined,
+        url: type === itemType.EXTERNAL ? path : undefined,
+        audience,
+      };
+    },
+
+    renderRFRPage({ item, parent }) {
+      const { uiRouterKey, title, path, slug, related, type, audience, menuAttached } = item;
+      const { __contentType, id, __templateName } = related || {};
+      const contentType = __contentType || '';
+      return {
+        id: uiRouterKey,
+        title,
+        templateName: __templateName,
+        related: type === itemType.INTERNAL ? {
+          contentType,
+          id,
+        } : undefined,
+        path,
+        slug,
+        parent,
+        audience,
+        menuAttached,
+      };
+    },
+
     createBranch(items = [], masterEntity = null, parentItem = null, operations = {}) {
       const { itemModel, service } = utilsFunctions.extractMeta(strapi.plugins);
       return Promise.all(

package/server/services/utils/functions.js

@@ -2,9 +2,13 @@ const {
   last,
   isObject,
   isEmpty,
+  flatten,
+  find,
+  isString,
+  get,
 } = require('lodash');
 
-const { type: itemType } = require('../../content-types/navigation-item');
+const { type: itemType } = require('../../content-types/navigation-item/lifecycle');
 const { NavigationError } = require('../../../utils/NavigationError');
 const { TEMPLATE_DEFAULT } = require('./constant');
 
@@ -13,7 +17,7 @@ module.exports = ({ strapi }) => {
     singularize(value = '') {
       return last(value) === 's' ? value.substr(0, value.length - 1) : value;
     },
-    
+
     extractMeta(plugins) {
       const { navigation: plugin } = plugins;
       const { navigation: service } = plugin.services;
@@ -99,5 +103,83 @@ module.exports = ({ strapi }) => {
         return resolve();
       });
     },
+
+    async templateNameFactory(items, strapi, contentTypes = []) {
+      const flatRelated = flatten(items.map(i => i.related)).filter(_ => !!_);
+      const relatedMap = flatRelated.reduce((acc, curr) => {
+        if (!acc[curr.__contentType]) {
+          acc[curr.__contentType] = [];
+        }
+        acc[curr.__contentType].push(curr.id);
+        return acc;
+      }, {});
+      const responses = await Promise.all(
+        Object.entries(relatedMap)
+          .map(
+            ([contentType, ids]) => {
+              const contentTypeUid = get(find(contentTypes, cnt => cnt.uid === contentType), 'uid');
+              return strapi.query(contentTypeUid)
+                .findMany({ id_in: ids, _limit: -1 })
+                .then(res => ({ [contentType]: res }))
+            }),
+      );
+      const relatedResponseMap = responses.reduce((acc, curr) => ({ ...acc, ...curr }), {});
+      const singleTypes = new Map(
+        contentTypes
+          .filter(x => x.isSingle)
+          .map(({ contentTypeName, templateName }) => [contentTypeName, templateName || contentTypeName])
+      );
+
+      return (contentType, id) => {
+        const template = get(relatedResponseMap[contentType].find(data => data.id === id), 'template');
+
+        if (template) {
+          const templateComponent = this.getTemplateComponentFromTemplate(template);
+          return get(templateComponent, 'options.templateName', TEMPLATE_DEFAULT);
+        }
+
+        if (singleTypes.get(contentType)) {
+          return singleTypes.get(contentType);
+        }
+
+        return TEMPLATE_DEFAULT;
+      };
+    },
+
+    getTemplateComponentFromTemplate(template = []) {
+      const componentName = get(first(template), '__component');
+      return componentName ? strapi.components[componentName] : null;
+    },
+
+    composeItemTitle(item = {}, fields = {}, contentTypes = []) {
+      const { title, related } = item;
+      if (title) {
+        return isString(title) && !isEmpty(title) ? title : undefined;
+      } else if (related) {
+        const relationTitle = this.extractItemRelationTitle(isArray(related) ? last(related) : related, fields, { contentTypes });
+        return isString(relationTitle) && !isEmpty(relationTitle) ? relationTitle : undefined;
+      }
+      return undefined;
+    },
+
+    extractItemRelationTitle(relatedItem = {}, fields = {}, contentTypes = []) {
+      const { __contentType } = relatedItem;
+      const contentType = find(contentTypes, _ => _.contentTypeName === __contentType);
+      const { default: defaultFields = [] } = fields;
+      return get(fields, `${contentType ? contentType.collectionName : ''}`, defaultFields).map((_) => relatedItem[_]).filter((_) => _)[0] || '';
+    },
+
+    filterOutUnpublished(item) {
+      const relatedItem = item.related && last(item.related);
+      const isHandledByPublshFlow = relatedItem ? 'published_at' in relatedItem : false;
+
+      if (isHandledByPublshFlow) {
+        const isRelatedDefinedAndPublished = relatedItem ?
+          isHandledByPublshFlow && get(relatedItem, 'published_at') :
+          false;
+        return item.type === itemType.INTERNAL ? isRelatedDefinedAndPublished : true;
+      }
+      return (item.type === itemType.EXTERNAL) || relatedItem;
+    },
   };
 }

package/strapi-server.js

@@ -4,6 +4,7 @@ const routes = require('./server/routes');
 const controllers = require('./server/controllers');
 const contentTypes = require('./server/content-types');
 const config = require('./server/config');
+const register = require('./server/register');
 
 
 module.exports = () => {
@@ -13,6 +14,7 @@ module.exports = () => {
     routes,
     controllers,
     services,
-    contentTypes
+    contentTypes,
+    register,
   };
 };