bro.config.js

@@ -1,9 +1,9 @@
 /* eslint-disable no-undef */
 /* eslint-disable @typescript-eslint/no-require-imports */
-const pkg = require('./package');
+const pkg = require("./package");
 
 module.exports = {
-  apiPath: 'stubs/api',
+  apiPath: "stubs/api",
   webpackConfig: {
     output: {
       publicPath: `/static/${pkg.name}/${process.env.VERSION || pkg.version}/`,
@@ -11,19 +11,17 @@ module.exports = {
   },
   /* use https://admin.bro-js.ru/ to create config, navigations and features */
   navigations: {
-    'dry-wash.main': '/dry-wash',
+    "dry-wash.main": "/dry-wash",
-    'dry-wash.create': '/order',
+    "dry-wash.create": "/order",
-    'dry-wash.view.order': '/order/:orderId',
+    "dry-wash.view.order": "/order/:orderId",
-    'dry-wash.arm.master': '/master',
+    "dry-wash.arm": "/arm",
-    'dry-wash.arm.order': '/order',
-    'dry-wash.arm': '/arm/*',
   },
   features: {
-    'dry-wash-pl': {
+    "dry-wash-pl": {
       // add your features here in the format [featureName]: { value: string }
     },
   },
   config: {
-    'dry-wash-pl.api': '/api',
+    "dry-wash-pl.api": "/api",
   },
 };

src/__data__/urls.ts

@@ -1,40 +1,25 @@
-import { generatePath } from 'react-router-dom';
+import { generatePath } from "react-router-dom";
-import { getNavigationValue } from '@brojs/cli';
+import { getNavigationValue } from "@brojs/cli";
 
-import { Order } from '../models';
+import { Order } from "../models";
-
-const getFullUrls = (url: string) =>
-  `${getNavigationValue('dry-wash.main')}${url}`;
 
 export const URLs = {
   landing: {
-    url: getNavigationValue('dry-wash.main'),
+    url: getNavigationValue("dry-wash.main"),
     getUrl() {
       return this.url;
-    },
+    }
   },
   orderForm: {
-    url: getNavigationValue('dry-wash.create'),
+    url: getNavigationValue("dry-wash.create"),
     getUrl() {
       return this.url;
-    },
+    }
   },
   orderView: {
-    url: getNavigationValue('dry-wash.view.order'),
+    url: getNavigationValue("dry-wash.view.order"),
     getUrl(orderId: Order.Id) {
       return generatePath(this.url, { orderId });
-    },
+    }
-  },
+  }
-  armMaster: {
-    url: getNavigationValue('dry-wash.arm.master'),
-    isOn: Boolean(getNavigationValue('dry-wash.arm.master')),
-  },
-  armOrder: {
-    url: getNavigationValue('dry-wash.arm.order'),
-    isOn: Boolean(getNavigationValue('dry-wash.arm.order')),
-  },
-  armBase: {
-    url: getFullUrls(getNavigationValue('dry-wash.arm')),
-    isOn: Boolean(getNavigationValue('dry-wash.arm')),
-  },
 };

src/components/LayoutArm/LayoutArm.tsx

@@ -5,33 +5,20 @@ import { Navigate, Route, Routes } from 'react-router-dom';
 import Sidebar from '../Sidebar';
 import Orders from '../Orders';
 import Masters from '../Masters';
-import { URLs } from '../../__data__/urls';
 
-const LayoutArm = () => {
+const LayoutArm = () => (
-  let defaultRedirect = null;
+  <Flex h='100vh'>
-
+    <Sidebar />
-  if (URLs.armOrder.isOn) {
+    <Box flex='1' bg='gray.50'>
-    defaultRedirect = URLs.armOrder.url;
+      <Routes>
-  } else if (URLs.armMaster.isOn) {
+        <Route>
-    defaultRedirect = URLs.armMaster.url;
+          <Route index element={<Navigate to='orders' replace />} />
-  }
+          <Route path='orders' element={<Orders />} />
-
+          <Route path='masters' element={<Masters />} />
-  return (
+        </Route>
-    <Flex h='100vh'>
+      </Routes>
-      <Sidebar />
+    </Box>
-      <Box flex='1' bg='gray.50'>
+  </Flex>
-        <Routes>
+);
-          <Route index element={<Navigate to={defaultRedirect} replace />} />
-          {URLs.armOrder.isOn && (
-            <Route path={URLs.armOrder.url} element={<Orders />} />
-          )}
-          {URLs.armMaster.isOn && (
-            <Route path={URLs.armMaster.url} element={<Masters />} />
-          )}
-        </Routes>
-      </Box>
-    </Flex>
-  );
-};
 
 export default LayoutArm;

src/components/Sidebar/Sidebar.tsx

@@ -3,8 +3,6 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 
-import { URLs } from '../../__data__/urls';
-
 const Sidebar = () => {
   const { t } = useTranslation('~', {
     keyPrefix: 'dry-wash.arm.master.sideBar',
@@ -25,29 +23,25 @@ const Sidebar = () => {
 
       <VStack align='start' spacing='4'>
         <Divider />
-        {URLs.armOrder.isOn && (
+        <Button
-          <Button
+          as={Link}
-            as={Link}
+          to='orders'
-            to={URLs.armOrder.url}
+          w='100%'
-            w='100%'
+          colorScheme='green'
-            colorScheme='green'
+          variant='ghost'
-            variant='ghost'
+        >
-          >
+          {t('orders')}
-            {t('orders')}
+        </Button>
-          </Button>
-        )}
         <Divider />
-        {URLs.armMaster.isOn && (
+        <Button
-          <Button
+          as={Link}
-            as={Link}
+          to='masters'
-            to={URLs.armMaster.url}
+          w='100%'
-            w='100%'
+          colorScheme='green'
-            colorScheme='green'
+          variant='ghost'
-            variant='ghost'
+        >
-          >
+          {t('master')}
-            {t('master')}
+        </Button>
-          </Button>
-        )}
         <Divider />
       </VStack>
     </Box>

src/routes.tsx

@@ -17,9 +17,7 @@ const Routers = () => {
         <Route path={URLs.landing.url} element={<Landing />} />
         <Route path={URLs.orderForm.url} element={<OrderForm />} />
         <Route path={URLs.orderView.url} element={<OrderView />} />
-        {URLs.armBase.isOn && (
+        <Route path='/dry-wash/arm/*' element={<Arm />}></Route>
-          <Route path={URLs.armBase.url} element={<Arm />}></Route>
-        )}
         <Route path='*' element={<NotFound />} />
       </Routes>
     </Suspense>