🆙 Init V3

src/components/catalog/views/navigation/CatalogNavigationItemView.tsx

@@ -0,0 +1,35 @@
+import { FC } from 'react';
+import { FaCaretDown, FaCaretUp } from 'react-icons/fa';
+import { ICatalogNode } from '../../../../api';
+import { LayoutGridItem, Text } from '../../../../common';
+import { useCatalog } from '../../../../hooks';
+import { CatalogIconView } from '../catalog-icon/CatalogIconView';
+import { CatalogNavigationSetView } from './CatalogNavigationSetView';
+
+export interface CatalogNavigationItemViewProps
+{
+    node: ICatalogNode;
+    child?: boolean;
+}
+
+export const CatalogNavigationItemView: FC<CatalogNavigationItemViewProps> = props =>
+{
+    const { node = null, child = false } = props;
+    const { activateNode = null } = useCatalog();
+
+    return (
+        <div className={ child ? 'pl-[5px] border-s-2 border-[#b6bec5]' : '' }>
+            <LayoutGridItem className={ ' !h-[23px] bg-[#cdd3d9] !border-[0] px-[3px] py-px text-sm' } column={ false } gap={ 1 } itemActive={ node.isActive } onClick={ event => activateNode(node) }>
+                <CatalogIconView icon={ node.iconId } />
+                <Text truncate className="!flex-grow">{ node.localization }</Text>
+                { node.isBranch &&
+                    <>
+                        { node.isOpen && <FaCaretUp className="fa-icon" /> }
+                        { !node.isOpen && <FaCaretDown className="fa-icon" /> }
+                    </> }
+            </LayoutGridItem>
+            { node.isOpen && node.isBranch &&
+                <CatalogNavigationSetView child={ true } node={ node } /> }
+        </div>
+    );
+};

src/components/catalog/views/navigation/CatalogNavigationSetView.tsx

@@ -0,0 +1,25 @@
+import { FC } from 'react';
+import { ICatalogNode } from '../../../../api';
+import { CatalogNavigationItemView } from './CatalogNavigationItemView';
+
+export interface CatalogNavigationSetViewProps
+{
+    node: ICatalogNode;
+    child?: boolean;
+}
+
+export const CatalogNavigationSetView: FC<CatalogNavigationSetViewProps> = props =>
+{
+    const { node = null, child = false } = props;
+
+    return (
+        <>
+            { node && (node.children.length > 0) && node.children.map((n, index) =>
+            {
+                if(!n.isVisible) return null;
+
+                return <CatalogNavigationItemView key={ index } child={ child } node={ n } />;
+            }) }
+        </>
+    );
+};

src/components/catalog/views/navigation/CatalogNavigationView.tsx

@@ -0,0 +1,34 @@
+import { FC } from 'react';
+import { ICatalogNode } from '../../../../api';
+import { AutoGrid, Column } from '../../../../common';
+import { useCatalog } from '../../../../hooks';
+import { CatalogSearchView } from '../page/common/CatalogSearchView';
+import { CatalogNavigationItemView } from './CatalogNavigationItemView';
+import { CatalogNavigationSetView } from './CatalogNavigationSetView';
+
+export interface CatalogNavigationViewProps
+{
+    node: ICatalogNode;
+}
+
+export const CatalogNavigationView: FC<CatalogNavigationViewProps> = props =>
+{
+    const { node = null } = props;
+    const { searchResult = null } = useCatalog();
+
+    return (
+        <>
+            <CatalogSearchView />
+            <Column fullHeight className="!border-[#b6bec5] bg-[#cdd3d9] border-[2px] border-[solid] rounded p-1" overflow="hidden">
+                <AutoGrid columnCount={ 1 } gap={ 1 } id="nitro-catalog-main-navigation">
+                    { searchResult && (searchResult.filteredNodes.length > 0) && searchResult.filteredNodes.map((n, index) =>
+                    {
+                        return <CatalogNavigationItemView key={ index } node={ n } />;
+                    }) }
+                    { !searchResult &&
+                        <CatalogNavigationSetView node={ node } /> }
+                </AutoGrid>
+            </Column>
+        </>
+    );
+};