env files

.env

@@ -0,0 +1,2 @@
+REACT_APP_IDENTITY_AUTHENTICATION_URL=https://toodle.ddns.net/identity-server-api/identity/authenticate?UserName={username}&Password={password}
+REACT_APP_ENABLE_TEMPLATE_CONTENT=True

.env.production

@@ -0,0 +1,3 @@
+PUBLIC_URL=/cdn-admin/
+REACT_APP_IDENTITY_AUTHENTICATION_URL=https://toodle.ddns.net/identity-server-api/identity/authenticate?UserName={username}&Password={password}
+REACT_APP_ENABLE_TEMPLATE_CONTENT=False

src/components/App.js

@@ -16,7 +16,7 @@ export default function App() {
   var { isAuthenticated } = useUserState();
 
   return (
-    <HashRouter>
+    <HashRouter basename={process.env.PUBLIC_URL || ""}>
       <Switch>
         <Route exact path="/" render={() => <Redirect to="/app/dashboard" />} />
         <Route
@@ -31,8 +31,6 @@ export default function App() {
     </HashRouter>
   );
 
-  // #######################################################################
-
   function PrivateRoute({ component, ...rest }) {
     return (
       <Route

src/components/Sidebar/menu.js

@@ -14,7 +14,7 @@ import {
 } from "@material-ui/icons";
 import Dot from "./components/Dot";
 
-const menu = [
+let menu = [
   {
     id: 0,
     label: "Dashboard",
@@ -75,50 +75,58 @@ const menu = [
     label: "FAQ",
     link: "https://toodle.ddns.net/forum",
     icon: <FAQIcon />
-  },
-  { id: 12, type: "divider" },
-  {
-    id: 13,
-    label: "Template",
-    children: [
-      {
-        id: 14,
-        label: "Typography",
-        link: "/app/typography",
-        icon: <TypographyIcon />
-      },
-      { id: 15, label: "Tables", link: "/app/tables", icon: <TableIcon /> },
-      {
-        id: 16,
-        label: "UI Elements",
-        link: "/app/ui",
-        icon: <UIElementsIcon />,
-        children: [
-          { label: "Icons", link: "/app/ui/icons" },
-          { label: "Charts", link: "/app/ui/charts" },
-          { label: "Maps", link: "/app/ui/maps" }
-        ]
-      },
-      {
-        id: 17,
-        label: "My recent",
-        link: "",
-        icon: <Dot size="small" color="warning" />
-      },
-      {
-        id: 18,
-        label: "Starred",
-        link: "",
-        icon: <Dot size="small" color="primary" />
-      },
-      {
-        id: 19,
-        label: "Background",
-        link: "",
-        icon: <Dot size="small" color="secondary" />
-      }
-    ]
   }
 ];
 
+const enableTemplateContent =
+  process.env.REACT_APP_ENABLE_TEMPLATE_CONTENT === "True";
+
+if (enableTemplateContent) {
+  menu.push(
+    { id: 12, type: "divider" },
+    {
+      id: 13,
+      label: "Template",
+      children: [
+        {
+          id: 14,
+          label: "Typography",
+          link: "/app/typography",
+          icon: <TypographyIcon />
+        },
+        { id: 15, label: "Tables", link: "/app/tables", icon: <TableIcon /> },
+        {
+          id: 16,
+          label: "UI Elements",
+          link: "/app/ui",
+          icon: <UIElementsIcon />,
+          children: [
+            { label: "Icons", link: "/app/ui/icons" },
+            { label: "Charts", link: "/app/ui/charts" },
+            { label: "Maps", link: "/app/ui/maps" }
+          ]
+        },
+        {
+          id: 17,
+          label: "My recent",
+          link: "",
+          icon: <Dot size="small" color="warning" />
+        },
+        {
+          id: 18,
+          label: "Starred",
+          link: "",
+          icon: <Dot size="small" color="primary" />
+        },
+        {
+          id: 19,
+          label: "Background",
+          link: "",
+          icon: <Dot size="small" color="secondary" />
+        }
+      ]
+    }
+  );
+}
+
 export default menu;