More catalog updates

src/layout/card/grid/NitroCardGridView.tsx

@@ -3,16 +3,16 @@ import { NitroCardGridViewProps } from './NitroCardGridView.types';
 
 export const NitroCardGridView: FC<NitroCardGridViewProps> = props =>
 {
-    const { columns = 5, className = '', style = null, children = null, ...rest } = props;
+    const { columns = 5, gap = 2, className = '', style = null, children = null, ...rest } = props;
 
     const getClassName = useMemo(() =>
     {
-        let newClassName = 'grid gap-2 overflow-auto';
+        let newClassName = `grid gap-${ gap } overflow-auto`;
 
         if(className && className.length) newClassName += ' ' + className;
 
         return newClassName;
-    }, [ className ]);
+    }, [ className, gap ]);
 
     const getStyle = useMemo(() =>
     {

src/layout/card/grid/NitroCardGridView.types.ts

@@ -3,4 +3,5 @@ import { DetailsHTMLAttributes } from 'react';
 export interface NitroCardGridViewProps extends DetailsHTMLAttributes<HTMLDivElement>
 {
     columns?: number;
+    gap?: number;
 }

src/layout/card/grid/item/NitroCardGridItemView.tsx

@@ -8,7 +8,7 @@ export const NitroCardGridItemView: FC<NitroCardGridItemViewProps> = props =>
 
     const getClassName = useMemo(() =>
     {
-        let newClassName = 'grid-item cursor-pointer overflow-hidden';
+        let newClassName = 'grid-item gap-1 cursor-pointer overflow-hidden';
 
         if(itemActive) newClassName += ' active';
 

src/views/catalog/CatalogView.tsx

@@ -205,7 +205,7 @@ export const CatalogView: FC<CatalogViewProps> = props =>
                     <NitroCardContentView>
                         <div className="row h-100">
                             { currentNavigationPage && !navigationHidden &&
-                                <div className="col-3 d-flex flex-column h-100">
+                                <div className="col-3 h-100">
                                     <CatalogNavigationView page={ currentNavigationPage } pendingTree={ pendingTree } setPendingTree={ setPendingTree } />
                                 </div> }
                             <div className="col h-100">

src/views/catalog/views/navigation/CatalogNavigationView.scss

@@ -1,11 +1,31 @@
-.nitro-catalog-navigation {
+.nitro-catalog-navigation-grid {
-    border-color: $grid-border-color !important;
+    border-radius: 0.25rem;
-    background-color: $grid-bg-color !important;
+    border-color: #B6BEC5 !important;
+    background-color: #CDD3D9;
+    border: 2px solid;
 
-    .navigation-container {
+    .grid-item {
-        overflow-y: auto;
+        font-size: $font-size-sm;
+        height: 23px !important;
+        border-color: unset !important;
+        background-color: #CDD3D9;
+        border: 0 !important;
+        padding: 1px 3px;
+
+        i.fas {
+            color: $black;
+            font-size: 10px;
+            padding: 1px;
         }
     }
 
+    // border-color: $grid-border-color !important;
+    // background-color: $grid-bg-color !important;
+
+    // .navigation-container {
+    //     overflow-y: auto;
+    // }
+}
+
 @import './item/CatalogNavigationItemView';
 @import './set/CatalogNavigationSetView';

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

@@ -1,5 +1,6 @@
 import { INodeData } from '@nitrots/nitro-renderer';
 import { FC, useEffect } from 'react';
+import { NitroCardGridView } from '../../../../layout';
 import { CatalogSearchView } from '../search/CatalogSearchView';
 import { CatalogNavigationViewProps } from './CatalogNavigationView.types';
 import { CatalogNavigationSetView } from './set/CatalogNavigationSetView';
@@ -23,13 +24,15 @@ export const CatalogNavigationView: FC<CatalogNavigationViewProps> = props =>
     }, [ page ]);
     
     return (
-        <>
+        <div className="row h-100">
+            <div className="d-flex flex-column col gap-2 h-100">
                 <CatalogSearchView />
-            <div className="border border-2 rounded overflow-hidden nitro-catalog-navigation p-1 h-100">
+                <div className="d-flex flex-column overflow-hidden nitro-catalog-navigation-grid p-1 h-100">
-                <div className="navigation-container h-100">
+                    <NitroCardGridView columns={ 1 } gap={ 1 }>
                         <CatalogNavigationSetView page={ page } isFirstSet={ true } pendingTree={ pendingTree } setPendingTree={ setPendingTree } />
+                    </NitroCardGridView>
+                </div>
             </div>
         </div>
-        </>
     );
 }

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

@@ -1,6 +1,7 @@
 import { GetCatalogPageComposer, INodeData } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
 import { SendMessageHook } from '../../../../../hooks/messages/message-event';
+import { NitroCardGridItemView } from '../../../../../layout';
 import { CatalogMode } from '../../../CatalogView.types';
 import { CatalogIconView } from '../../catalog-icon/CatalogIconView';
 import { ACTIVE_PAGES } from '../CatalogNavigationView';
@@ -70,16 +71,14 @@ export const CatalogNavigationItemView: FC<CatalogNavigationItemViewProps> = pro
     }, [ isActive, page ]);
     
     return (
-        <div className="col pb-1 catalog-navigation-item-container">
+        <>
-            <div className={ 'd-flex align-items-center cursor-pointer catalog-navigation-item ' + (isActive ? 'active ': '') } onClick={ event => select(page) }>
+            <NitroCardGridItemView itemActive={ isActive } onClick={ event => select(page) }>
                 <CatalogIconView icon={ page.icon } />
-                <div className="flex-grow-1 text-black text-truncate px-1">{ page.localization }</div>
+                <div className="flex-grow-1 text-black text-truncate">{ page.localization }</div>
                 { (page.children.length > 0) && <i className={ 'fas fa-caret-' + (isExpanded ? 'up' : 'down') } /> }
-            </div>
+            </NitroCardGridItemView>
             { isActive && isExpanded && page.children && (page.children.length > 0) &&
-                <div className="d-flex flex-column mt-1">
+                <CatalogNavigationSetView page={ page } pendingTree={ pendingTree } setPendingTree={ setPendingTree } /> }
-                    <CatalogNavigationSetView page={ page } pendingTree={ pendingTree } setPendingTree={ setPendingTree } />
+        </>
-                </div> }
-        </div>
     );
 }

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

@@ -26,13 +26,13 @@ export const CatalogNavigationSetView: FC<CatalogNavigationSetViewProps> = props
     }, [ page, isFirstSet, activeChild, pendingTree ]);
     
     return (
-        <div className="row row-cols-1 g-0 catalog-navigation-set-container w-100">
+        <>
             { page && (page.children.length > 0) && page.children.map((page, index) =>
                 {
                     if(!page.visible) return null;
                     
                     return <CatalogNavigationItemView key={ index } page={ page } isActive={ (activeChild === page) } pendingTree={ pendingTree } setPendingTree={ setPendingTree } setActiveChild={ setActiveChild } />
                 }) }
-        </div>
+        </>
     );
 }

src/views/catalog/views/search/CatalogSearchView.tsx

@@ -110,7 +110,7 @@ export const CatalogSearchView: FC<CatalogSearchViewProps> = props =>
     }, [ searchValue, processSearch ]);
 
     return (
-        <div className="d-flex mb-1">
+        <div className="d-flex">
             <div className="d-flex flex-grow-1 me-1">
                 <input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('generic.search') } value={ searchValue } onChange={ event => setSearchValue(event.target.value) } />
             </div>