Merge remote-tracking branch 'origin/feat/themes-example-app' into beta

Author: dziraf

.babelrc

@@ -13,5 +13,6 @@
       }
     ],
     "@babel/preset-typescript"
-  ]
+  ],
+  "ignore": ["./src/themes/**/*.bundle.js"]
 }

src/themes/no-sidebar/assets/Navigation.tsx

@@ -0,0 +1,55 @@
+import {
+  Button,
+  DropDown,
+  DropDownItem,
+  DropDownMenu,
+  DropDownTrigger,
+  Icon,
+  NavigationElementWithChildrenProps,
+} from '@adminjs/design-system';
+import { ReduxState, useNavigationResources } from 'adminjs';
+import React, { FC } from 'react';
+import { useSelector } from 'react-redux';
+
+const NavigationComponent: FC = () => {
+  const resources = useSelector((state: ReduxState) => state.resources);
+  const navigatonElements = useNavigationResources(resources);
+
+  console.log(navigatonElements);
+
+  return (
+    <>
+      {navigatonElements.map(element => (
+        <DropDown key={element.label}>
+          <DropDownTrigger>
+            <Button color="text">
+              <Icon icon={element.icon} />
+              {element.label}
+            </Button>
+          </DropDownTrigger>
+          <DropDownMenu>
+            <NavigationElement key={element.href} element={element} />
+          </DropDownMenu>
+        </DropDown>
+      ))}
+    </>
+  );
+};
+
+const NavigationElement: FC<{
+  element: NavigationElementWithChildrenProps;
+}> = ({ element }) => (
+  <DropDownItem>
+    <Icon icon={element.icon} />
+    {element.label}
+    {element.elements && (
+      <DropDownMenu>
+        {element.elements.map(nested => (
+          <NavigationElement key={nested.href} element={nested} />
+        ))}
+      </DropDownMenu>
+    )}
+  </DropDownItem>
+);
+
+export const Navigation = React.memo(NavigationComponent);

src/themes/no-sidebar/components/TopBar.tsx

@@ -13,16 +13,15 @@ import {
 } from 'adminjs';
 import React from 'react';
 import { useSelector } from 'react-redux';
+import { Navigation } from '../assets/Navigation.jsx';
 
 const h = new ViewHelpers();
 
 const TopBar: React.FC = () => {
-  const resources = useSelector((state: ReduxState) => state.resources);
   const session = useSelector((state: ReduxState) => state.session);
   const branding = useSelector((state: ReduxState) => state.branding);
   const { logo, companyName } = branding;
 
-  const elements = useNavigationResources(resources);
   const { tb } = useTranslation();
 
   const dropActions: CurrentUserNavProps['dropActions'] = [
@@ -40,12 +39,7 @@ const TopBar: React.FC = () => {
       <Box as="a" href={h.dashboardUrl()} mx="xl">
         {logo ? <img src={logo} alt={companyName} /> : <h1>{companyName}</h1>}
       </Box>
-      {elements.map(element => (
-        <Button as="a" href={element.href} color="text" key={element.href}>
-          <Icon icon={element.icon} />
-          {element.label}
-        </Button>
-      ))}
+      <Navigation />
       <Box as="div" flex flexGrow={1} />
       {session && (
         <CurrentUserNav