[PUI] Small nav additions (#5855)

* Added nav items from main nav

* Added system settings to nav

* removed duplicate entry

* renamed logo button to be clearer about it's intend

* change target of InvenTree icon in header to open nav

* added delay to not open hover on fast header click

src/frontend/src/components/items/InvenTreeLogo.tsx

@@ -5,14 +5,20 @@ import { NavLink } from 'react-router-dom';
 
 import InvenTreeIcon from './inventree.svg';
 
-export const InvenTreeLogo = forwardRef<HTMLDivElement>((props, ref) => {
+export const InvenTreeLogoHomeButton = forwardRef<HTMLDivElement>(
-  return (
+  (props, ref) => {
-    <div ref={ref} {...props}>
+    return (
-      <NavLink to={'/'}>
+      <div ref={ref} {...props}>
-        <ActionIcon size={28}>
+        <NavLink to={'/'}>
-          <img src={InvenTreeIcon} alt={t`InvenTree Logo`} height={28} />
+          <ActionIcon size={28}>
-        </ActionIcon>
+            <InvenTreeLogo />
-      </NavLink>
+          </ActionIcon>
-    </div>
+        </NavLink>
-  );
+      </div>
-});
+    );
+  }
+);
+
+export const InvenTreeLogo = () => {
+  return <img src={InvenTreeIcon} alt={t`InvenTree Logo`} height={28} />;
+};

src/frontend/src/components/nav/Footer.tsx

@@ -2,7 +2,7 @@ import { Anchor, Container, Group } from '@mantine/core';
 
 import { footerLinks } from '../../defaults/links';
 import { InvenTreeStyle } from '../../globalStyle';
-import { InvenTreeLogo } from '../items/InvenTreeLogo';
+import { InvenTreeLogoHomeButton } from '../items/InvenTreeLogo';
 
 export function Footer() {
   const { classes } = InvenTreeStyle();
@@ -21,7 +21,7 @@ export function Footer() {
   return (
     <div className={classes.layoutFooter}>
       <Container className={classes.layoutFooterInner} size={'100%'}>
-        <InvenTreeLogo />
+        <InvenTreeLogoHomeButton />
         <Group className={classes.layoutFooterLinks}>{items}</Group>
       </Container>
     </div>

src/frontend/src/components/nav/NavHoverMenu.tsx

@@ -7,7 +7,8 @@ import {
   Group,
   HoverCard,
   Skeleton,
-  Text
+  Text,
+  UnstyledButton
 } from '@mantine/core';
 import { IconLayoutSidebar } from '@tabler/icons-react';
 import { useEffect, useState } from 'react';
@@ -39,9 +40,17 @@ export function NavHoverMenu({
   }, [hostKey]);
 
   return (
-    <HoverCard width={600} position="bottom" shadow="md" withinPortal>
+    <HoverCard
+      width={600}
+      openDelay={300}
+      position="bottom"
+      shadow="md"
+      withinPortal
+    >
       <HoverCard.Target>
-        <InvenTreeLogo />
+        <UnstyledButton onClick={() => openDrawer()}>
+          <InvenTreeLogo />
+        </UnstyledButton>
       </HoverCard.Target>
 
       <HoverCard.Dropdown sx={{ overflow: 'hidden' }}>

src/frontend/src/defaults/menuItems.tsx

@@ -12,8 +12,8 @@ export const menuItems: MenuLinkItem[] = [
   },
   {
     id: 'profile',
-    text: <Trans>Profile page</Trans>,
+    text: <Trans>Account settings</Trans>,
-    link: '/profile/user',
+    link: '/settings/user',
     doctext: <Trans>User attributes and design settings.</Trans>
   },
   {
@@ -22,6 +22,41 @@ export const menuItems: MenuLinkItem[] = [
     link: '/scan',
     doctext: <Trans>View for interactive scanning and multiple actions.</Trans>,
     highlight: true
+  },
+  {
+    id: 'dashboard',
+    text: <Trans>Dashboard</Trans>,
+    link: '/dashboard'
+  },
+  {
+    id: 'parts',
+    text: <Trans>Parts</Trans>,
+    link: '/part/'
+  },
+  {
+    id: 'stock',
+    text: <Trans>Stock</Trans>,
+    link: '/stock'
+  },
+  {
+    id: 'build',
+    text: <Trans>Build</Trans>,
+    link: '/build/'
+  },
+  {
+    id: 'purchasing',
+    text: <Trans>Purchasing</Trans>,
+    link: '/purchasing/'
+  },
+  {
+    id: 'sales',
+    text: <Trans>Sales</Trans>,
+    link: '/sales/'
+  },
+  {
+    id: 'settings-system',
+    text: <Trans>System Settings</Trans>,
+    link: '/settings/system'
   }
 ];