Navigation (#750)

assets/js/src/core/modules/app/base-layout/left-sidebar-view.styles.ts

@@ -23,7 +23,7 @@ export const useStlyes = createStyles(({
       top: 0;
       left: 0;
       bottom: 0;
-      z-index: 2;
+      z-index: 1001;
       pointer-events: none;
 
       .left-sidebar__avatar {
@@ -38,6 +38,25 @@ export const useStlyes = createStyles(({
           vertical-align: 0;
         }
       }
+      
+      .left-sidebar__nav {
+        list-style: none;
+        padding: ${token.paddingXXS}px 0;
+        margin: ${token.marginSM}px 0;
+        position: relative;
+        pointer-events: auto;
+        text-align: center;
+        
+        &:before {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: ${token.paddingSM}px;
+          right: ${token.paddingSM}px;
+          height: 1px;
+          background: ${token.Divider.colorSplit};
+        }
+      }
     `
   }
 }, { hashPriority: 'low' })

assets/js/src/core/modules/app/base-layout/left-sidebar-view.tsx

@@ -15,9 +15,71 @@ import { Avatar } from 'antd'
 import React from 'react'
 import { useStlyes } from './left-sidebar-view.styles'
 import { Icon } from '@Pimcore/components/icon/icon'
+import { MainNav } from '@Pimcore/modules/app/nav/main-nav'
+import { useMainNav } from '@Pimcore/modules/app/nav/hooks/use-main-nav'
 
 export const LeftSidebarView = (): React.JSX.Element => {
   const { styles } = useStlyes()
+  const { addNavItem } = useMainNav()
+
+  addNavItem({
+    path: 'Settings/Document Types',
+    permission: 'documents'
+  })
+
+  addNavItem({
+    path: 'Tools/Glossary'
+  })
+
+  addNavItem({
+    path: 'Settings/User & Roles/Users',
+    className: 'item-style-modifier',
+    widgetConfig: {
+      name: 'Users',
+      id: 'user-management',
+      component: 'user-management',
+      config: {
+        icon: {
+          type: 'name',
+          value: 'user-01'
+        }
+      }
+    }
+  })
+
+  addNavItem({
+    path: 'Settings/User & Roles/Open ID Connect Config/Configuration'
+  })
+
+  addNavItem({
+    path: 'Settings',
+    icon: 'appstore-outlined'
+  })
+
+  addNavItem({
+    path: 'Tools',
+    icon: 'tools-outlined'
+  })
+
+  addNavItem({
+    path: 'Marketing',
+    icon: 'bar-chart-08'
+  })
+
+  addNavItem({
+    path: 'Customers',
+    icon: 'shopping-car-outlined'
+  })
+
+  addNavItem({
+    path: 'Cache',
+    icon: 'brush-03'
+  })
+
+  addNavItem({
+    path: 'System Related',
+    icon: 'shield-02'
+  })
 
   return (
     <div className={ styles.leftSidebar }>
@@ -26,6 +88,12 @@ export const LeftSidebarView = (): React.JSX.Element => {
         icon={ <Icon value='user-01' /> }
         size={ 26 }
       />
+
+      <ul className='left-sidebar__nav'>
+        <li>
+          <MainNav />
+        </li>
+      </ul>
     </div>
   )
 }

assets/js/src/core/modules/app/nav/hooks/use-main-nav.ts

@@ -0,0 +1,48 @@
+/**
+* Pimcore
+*
+* This source file is available under two different licenses:
+* - Pimcore Open Core License (POCL)
+* - Pimcore Commercial License (PCL)
+* Full copyright and license information is available in
+* LICENSE.md which is distributed with this source code.
+*
+*  @copyright  Copyright (c) Pimcore GmbH (http://www.pimcore.org)
+*  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
+*/
+
+import { useAppDispatch, useAppSelector } from '@Pimcore/app/store'
+import {
+  addNavItem as addNavItemAction,
+  type IMainNavItem
+} from '@Pimcore/modules/app/nav/main-nav-slice'
+import { isAllowed } from '@Pimcore/modules/auth/permission-helper'
+
+interface IUseMainNavReturn {
+  addNavItem: (item: IMainNavItem) => void
+  getNavItems: IMainNavItem[]
+}
+
+export const useMainNav = (): IUseMainNavReturn => {
+  const dispatch = useAppDispatch()
+
+  function addNavItem (item: IMainNavItem): void {
+    let userIsAllowed = true
+    if (item.permission !== undefined) {
+      userIsAllowed = isAllowed(item.permission)
+    }
+
+    if (!userIsAllowed) {
+      return
+    }
+
+    dispatch(addNavItemAction(item))
+  }
+
+  const getNavItems = useAppSelector(state => state['main-nav'].items)
+
+  return {
+    addNavItem,
+    getNavItems
+  }
+}