reformatted all relevant files to new style

package.json

@@ -5,6 +5,7 @@
   "proxy": "http://localhost:8000",
   "dependencies": {
     "@asseinfo/react-kanban": "2.2.0",
+    "@auth0/auth0-react": "1.10.2",
     "@emotion/cache": "11.7.1",
     "@emotion/react": "11.7.1",
     "@emotion/styled": "11.6.0",

src/qqq/components/BaseLayout/index.tsx

@@ -20,8 +20,9 @@ import breakpoints from "assets/theme/base/breakpoints";
 
 // Material Dashboard 2 PRO React TS examples components
 import DashboardLayout from "examples/LayoutContainers/DashboardLayout";
-import DashboardNavbar from "examples/Navbars/DashboardNavbar";
+import Navbar from "qqq/components/Navbar";
 import Footer from "qqq/components/Footer";
+import DashboardNavbar from "examples/Navbars/DashboardNavbar";
 import MDBox from "../../../components/MDBox";
 
 // Declaring props types for BaseLayout

src/qqq/components/Navbar/index.tsx

@@ -0,0 +1,214 @@
+import {useState, useEffect} from "react";
+
+// react-router components
+import {useLocation, Link} from "react-router-dom";
+
+// @material-ui core components
+import AppBar from "@mui/material/AppBar";
+import Toolbar from "@mui/material/Toolbar";
+import IconButton from "@mui/material/IconButton";
+import Menu from "@mui/material/Menu";
+import Icon from "@mui/material/Icon";
+
+// Material Dashboard 2 PRO React TS components
+import MDBox from "components/MDBox";
+import MDInput from "components/MDInput";
+import MDBadge from "components/MDBadge";
+
+// Material Dashboard 2 PRO React TS examples components
+import Breadcrumbs from "examples/Breadcrumbs";
+import NotificationItem from "examples/Items/NotificationItem";
+
+// Custom styles for Navbar
+import {
+   navbar,
+   navbarContainer,
+   navbarRow,
+   navbarIconButton,
+   navbarDesktopMenu,
+   navbarMobileMenu,
+} from "qqq/components/Navbar/styles";
+
+// Material Dashboard 2 PRO React context
+import {
+   useMaterialUIController,
+   setTransparentNavbar,
+   setMiniSidenav,
+   setOpenConfigurator,
+} from "context";
+
+// qqq
+import AuthenticationButton from "qqq/components/buttons/AuthenticationButton";
+
+// Declaring prop types for Navbar
+interface Props
+{
+   absolute?: boolean;
+   light?: boolean;
+   isMini?: boolean;
+}
+
+function Navbar({absolute, light, isMini}: Props): JSX.Element
+{
+   const [navbarType, setNavbarType] = useState<"fixed" | "absolute" | "relative" | "static" | "sticky">();
+   const [controller, dispatch] = useMaterialUIController();
+   const {
+      miniSidenav, transparentNavbar, fixedNavbar, openConfigurator, darkMode,
+   } = controller;
+   const [openMenu, setOpenMenu] = useState<any>(false);
+   const route = useLocation().pathname.split("/").slice(1);
+
+   useEffect(() =>
+   {
+      // Setting the navbar type
+      if (fixedNavbar)
+      {
+         setNavbarType("sticky");
+      }
+      else
+      {
+         setNavbarType("static");
+      }
+
+      // A function that sets the transparent state of the navbar.
+      function handleTransparentNavbar()
+      {
+         setTransparentNavbar(dispatch, (fixedNavbar && window.scrollY === 0) || !fixedNavbar);
+      }
+
+      /**
+       The event listener that's calling the handleTransparentNavbar function when
+       scrolling the window.
+       */
+      window.addEventListener("scroll", handleTransparentNavbar);
+
+      // Call the handleTransparentNavbar function to set the state with the initial value.
+      handleTransparentNavbar();
+
+      // Remove event listener on cleanup
+      return () => window.removeEventListener("scroll", handleTransparentNavbar);
+   }, [dispatch, fixedNavbar]);
+
+   const handleMiniSidenav = () => setMiniSidenav(dispatch, !miniSidenav);
+   const handleConfiguratorOpen = () => setOpenConfigurator(dispatch, !openConfigurator);
+   const handleOpenMenu = (event: any) => setOpenMenu(event.currentTarget);
+   const handleCloseMenu = () => setOpenMenu(false);
+
+   // Render the notifications menu
+   const renderMenu = () => (
+      <Menu
+         anchorEl={openMenu}
+         anchorReference={null}
+         anchorOrigin={{
+            vertical: "bottom",
+            horizontal: "left",
+         }}
+         open={Boolean(openMenu)}
+         onClose={handleCloseMenu}
+         sx={{mt: 2}}
+      >
+         <NotificationItem icon={<Icon>email</Icon>} title="Check new messages" />
+         <NotificationItem icon={<Icon>podcasts</Icon>} title="Manage Podcast sessions" />
+         <NotificationItem icon={<Icon>shopping_cart</Icon>} title="Payment successfully completed" />
+      </Menu>
+   );
+
+   // Styles for the navbar icons
+   const iconsStyle = ({
+      palette: {dark, white, text},
+      functions: {rgba},
+   }: {
+      palette: any;
+      functions: any;
+   }) => ({
+      color: () =>
+      {
+         let colorValue = light || darkMode ? white.main : dark.main;
+
+         if (transparentNavbar && !light)
+         {
+            colorValue = darkMode ? rgba(text.main, 0.6) : text.main;
+         }
+
+         return colorValue;
+      },
+   });
+
+   return (
+      <AppBar
+         position={absolute ? "absolute" : navbarType}
+         color="inherit"
+         sx={(theme) => navbar(theme, {
+            transparentNavbar, absolute, light, darkMode,
+         })}
+      >
+         <Toolbar sx={navbarContainer}>
+            <MDBox color="inherit" mb={{xs: 1, md: 0}} sx={(theme) => navbarRow(theme, {isMini})}>
+               <Breadcrumbs icon="home" title={route[route.length - 1]} route={route} light={light} />
+               <IconButton sx={navbarDesktopMenu} onClick={handleMiniSidenav} size="small" disableRipple>
+                  <Icon fontSize="medium" sx={iconsStyle}>
+                     {miniSidenav ? "menu_open" : "menu"}
+                  </Icon>
+               </IconButton>
+            </MDBox>
+            {isMini ? null : (
+               <MDBox sx={(theme) => navbarRow(theme, {isMini})}>
+                  <MDBox pr={1}>
+                     <MDInput label="Search here" />
+                  </MDBox>
+                  <MDBox color={light ? "white" : "inherit"}>
+                     <AuthenticationButton />
+                     { /*
+                     <Link to="/authentication/sign-in/basic">
+                        <IconButton sx={navbarIconButton} size="small" disableRipple>
+                           <Icon sx={iconsStyle}>account_circle</Icon>
+                        </IconButton>
+                     </Link>
+                     */ }
+                     <IconButton
+                        size="small"
+                        disableRipple
+                        color="inherit"
+                        sx={navbarMobileMenu}
+                        onClick={handleMiniSidenav}
+                     >
+                        <Icon sx={iconsStyle} fontSize="medium">
+                           {miniSidenav ? "menu_open" : "menu"}
+                        </Icon>
+                     </IconButton>
+                     <IconButton
+                        size="small"
+                        disableRipple
+                        color="inherit"
+                        sx={navbarIconButton}
+                        onClick={handleConfiguratorOpen}
+                     >
+                        <Icon sx={iconsStyle}>settings</Icon>
+                     </IconButton>
+                     <IconButton
+                        size="small"
+                        color="inherit"
+                        sx={navbarIconButton}
+                        onClick={handleOpenMenu}
+                     >
+                        <MDBadge badgeContent={9} color="error" size="xs" circular>
+                           <Icon sx={iconsStyle}>notifications</Icon>
+                        </MDBadge>
+                     </IconButton>
+                     {renderMenu()}
+                  </MDBox>
+               </MDBox>
+            )}
+         </Toolbar>
+      </AppBar>
+   );
+}
+
+// Declaring default props for Navbar
+Navbar.defaultProps = {
+   absolute: false,
+   light: false,
+   isMini: false,
+};
+
+export default Navbar;

src/qqq/components/Navbar/styles.ts

@@ -0,0 +1,167 @@
+/**
+ =========================================================
+ * Material Dashboard 2 PRO React TS - v1.0.0
+ =========================================================
+
+ * Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+ * Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+ Coded by www.creative-tim.com
+
+ =========================================================
+
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+ */
+
+// @mui material components
+import {Theme} from "@mui/material/styles";
+
+function navbar(theme: Theme | any, ownerState: any)
+{
+   const {
+      palette, boxShadows, functions, transitions, breakpoints, borders,
+   } = theme;
+   const {
+      transparentNavbar, absolute, light, darkMode,
+   } = ownerState;
+
+   const {
+      dark, white, text, transparent, background,
+   } = palette;
+   const {navbarBoxShadow} = boxShadows;
+   const {rgba, pxToRem} = functions;
+   const {borderRadius} = borders;
+
+   return {
+      boxShadow: transparentNavbar || absolute ? "none" : navbarBoxShadow,
+      backdropFilter: transparentNavbar || absolute ? "none" : `saturate(200%) blur(${pxToRem(30)})`,
+      backgroundColor:
+         transparentNavbar || absolute
+            ? `${transparent.main} !important`
+            : rgba(darkMode ? background.default : white.main, 0.8),
+
+      color: () =>
+      {
+         let color;
+
+         if (light)
+         {
+            color = white.main;
+         }
+         else if (transparentNavbar)
+         {
+            color = text.main;
+         }
+         else
+         {
+            color = dark.main;
+         }
+
+         return color;
+      },
+      top: absolute ? 0 : pxToRem(12),
+      minHeight: pxToRem(75),
+      display: "grid",
+      alignItems: "center",
+      borderRadius: borderRadius.xl,
+      paddingTop: pxToRem(8),
+      paddingBottom: pxToRem(8),
+      paddingRight: absolute ? pxToRem(8) : 0,
+      paddingLeft: absolute ? pxToRem(16) : 0,
+
+      "& > *": {
+         transition: transitions.create("all", {
+            easing: transitions.easing.easeInOut,
+            duration: transitions.duration.standard,
+         }),
+      },
+
+      "& .MuiToolbar-root": {
+         display: "flex",
+         justifyContent: "space-between",
+         alignItems: "center",
+
+         [breakpoints.up("sm")]: {
+            minHeight: "auto",
+            padding: `${pxToRem(4)} ${pxToRem(16)}`,
+         },
+      },
+   };
+}
+
+const navbarContainer = ({breakpoints}: Theme): any => ({
+   flexDirection: "column",
+   alignItems: "flex-start",
+   justifyContent: "space-between",
+   pt: 0.5,
+   pb: 0.5,
+
+   [breakpoints.up("md")]: {
+      flexDirection: "row",
+      alignItems: "center",
+      paddingTop: "0",
+      paddingBottom: "0",
+   },
+});
+
+const navbarRow = ({breakpoints}: Theme, {isMini}: any) => ({
+   display: "flex",
+   alignItems: "center",
+   justifyContent: "space-between",
+   width: "100%",
+
+   [breakpoints.up("md")]: {
+      justifyContent: isMini ? "space-between" : "stretch",
+      width: isMini ? "100%" : "max-content",
+   },
+
+   [breakpoints.up("xl")]: {
+      justifyContent: "stretch !important",
+      width: "max-content !important",
+   },
+});
+
+const navbarIconButton = ({typography: {size}, breakpoints}: Theme) => ({
+   px: 1,
+
+   "& .material-icons, .material-icons-round": {
+      fontSize: `${size.xl} !important`,
+   },
+
+   "& .MuiTypography-root": {
+      display: "none",
+
+      [breakpoints.up("sm")]: {
+         display: "inline-block",
+         lineHeight: 1.2,
+         ml: 0.5,
+      },
+   },
+});
+
+const navbarDesktopMenu = ({breakpoints}: Theme) => ({
+   display: "none !important",
+   cursor: "pointer",
+
+   [breakpoints.up("xl")]: {
+      display: "inline-block !important",
+   },
+});
+
+const navbarMobileMenu = ({breakpoints}: Theme) => ({
+   display: "inline-block",
+   lineHeight: 0,
+
+   [breakpoints.up("xl")]: {
+      display: "none",
+   },
+});
+
+export {
+   navbar,
+   navbarContainer,
+   navbarRow,
+   navbarIconButton,
+   navbarDesktopMenu,
+   navbarMobileMenu,
+};

src/qqq/components/buttons/AuthenticationButton/index.tsx

@@ -0,0 +1,17 @@
+import {useAuth0} from "@auth0/auth0-react";
+import React from "react";
+import {Button} from "@mui/material";
+
+function AuthenticationButton()
+{
+   const {loginWithRedirect, logout, isAuthenticated} = useAuth0();
+
+   if (isAuthenticated)
+   {
+      return <Button onClick={() => logout({returnTo: window.location.origin})}>Log Out</Button>;
+   }
+
+   return <Button onClick={() => loginWithRedirect()}>Log In</Button>;
+}
+
+export default AuthenticationButton;