diff --git a/package-lock.json b/package-lock.json index 9ffaf4e..2389c10 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,7 +21,8 @@ "protobuf-ts": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#staging", "react": "^18.3.1", "react-dom": "^18.3.1", - "react-router-dom": "^6.27.0" + "react-image": "^4.1.0", + "react-router-dom": "^6.28.0" }, "devDependencies": { "@babel/types": "^7.25.8", @@ -1176,9 +1177,9 @@ } }, "node_modules/@mui/core-downloads-tracker": { - "version": "6.1.6", - "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.1.6.tgz", - "integrity": "sha512-nz1SlR9TdBYYPz4qKoNasMPRiGb4PaIHFkzLzhju0YVYS5QSuFF2+n7CsiHMIDcHv3piPu/xDWI53ruhOqvZwQ==", + "version": "6.1.7", + "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.1.7.tgz", + "integrity": "sha512-POuIBi80BZBogQkG4PQKIGwy4QFwB+kOr+OI4k7Znh7LqMAIhwB9OC00l6M+w1GrZJYj3T8R5WX8G6QAIvoVEw==", "license": "MIT", "funding": { "type": "opencollective", @@ -1212,16 +1213,16 @@ } }, "node_modules/@mui/material": { - "version": "6.1.6", - "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.1.6.tgz", - "integrity": "sha512-1yvejiQ/601l5AK3uIdUlAVElyCxoqKnl7QA+2oFB/2qYPWfRwDgavW/MoywS5Y2gZEslcJKhe0s2F3IthgFgw==", + "version": "6.1.7", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.1.7.tgz", + "integrity": "sha512-KsjujQL/A2hLd1PV3QboF+W6SSL5QqH6ZlSuQoeYz9r69+TnyBFIevbYLxdjJcJmGBjigL5pfpn7hTGop+vhSg==", "license": "MIT", "dependencies": { "@babel/runtime": "^7.26.0", - "@mui/core-downloads-tracker": "^6.1.6", - "@mui/system": "^6.1.6", + "@mui/core-downloads-tracker": "^6.1.7", + "@mui/system": "^6.1.7", "@mui/types": "^7.2.19", - "@mui/utils": "^6.1.6", + "@mui/utils": "^6.1.7", "@popperjs/core": "^2.11.8", "@types/react-transition-group": "^4.4.11", "clsx": "^2.1.1", @@ -1240,7 +1241,7 @@ "peerDependencies": { "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", - "@mui/material-pigment-css": "^6.1.6", + "@mui/material-pigment-css": "^6.1.7", "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" @@ -1261,13 +1262,13 @@ } }, "node_modules/@mui/private-theming": { - "version": "6.1.6", - "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.1.6.tgz", - "integrity": "sha512-ioAiFckaD/fJSnTrUMWgjl9HYBWt7ixCh7zZw7gDZ+Tae7NuprNV6QJK95EidDT7K0GetR2rU3kAeIR61Myttw==", + "version": "6.1.7", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.1.7.tgz", + "integrity": "sha512-uLbfUSsug5K0LVkv0PI6Flste3le8+6WSL2omdTiYde93P89Qr7pKr8TA6d2yXfr+Bm+SvD8/fGnkaRwFkryuQ==", "license": "MIT", "dependencies": { "@babel/runtime": "^7.26.0", - "@mui/utils": "^6.1.6", + "@mui/utils": "^6.1.7", "prop-types": "^15.8.1" }, "engines": { @@ -1288,9 +1289,9 @@ } }, "node_modules/@mui/styled-engine": { - "version": "6.1.6", - "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.1.6.tgz", - "integrity": "sha512-I+yS1cSuSvHnZDBO7e7VHxTWpj+R7XlSZvTC4lS/OIbUNJOMMSd3UDP6V2sfwzAdmdDNBi7NGCRv2SZ6O9hGDA==", + "version": "6.1.7", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.1.7.tgz", + "integrity": "sha512-Ou4CxN7MQmwrfG1Pu6EYjPgPChQXxPDJrwgizLXlRPOad5qAq4gYXRuzrGQ2DfGjjwmJhjI8T6A0SeapAZPGig==", "license": "MIT", "dependencies": { "@babel/runtime": "^7.26.0", @@ -1363,16 +1364,16 @@ } }, "node_modules/@mui/system": { - "version": "6.1.6", - "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.1.6.tgz", - "integrity": "sha512-qOf1VUE9wK8syiB0BBCp82oNBAVPYdj4Trh+G1s+L+ImYiKlubWhhqlnvWt3xqMevR+D2h1CXzA1vhX2FvA+VQ==", + "version": "6.1.7", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.1.7.tgz", + "integrity": "sha512-qbMGgcC/FodpuRSfjXlEDdbNQaW++eATh0vNBcPUv2/YXSpReoOpoT9FhogxEBNks+aQViDXBRZKh6HX2fVmwg==", "license": "MIT", "dependencies": { "@babel/runtime": "^7.26.0", - "@mui/private-theming": "^6.1.6", - "@mui/styled-engine": "^6.1.6", + "@mui/private-theming": "^6.1.7", + "@mui/styled-engine": "^6.1.7", "@mui/types": "^7.2.19", - "@mui/utils": "^6.1.6", + "@mui/utils": "^6.1.7", "clsx": "^2.1.1", "csstype": "^3.1.3", "prop-types": "^15.8.1" @@ -1417,9 +1418,9 @@ } }, "node_modules/@mui/utils": { - "version": "6.1.6", - "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.1.6.tgz", - "integrity": "sha512-sBS6D9mJECtELASLM+18WUcXF6RH3zNxBRFeyCRg8wad6NbyNrdxLuwK+Ikvc38sTZwBzAz691HmSofLqHd9sQ==", + "version": "6.1.7", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.1.7.tgz", + "integrity": "sha512-Gr7cRZxBoZ0BIa3Xqf/2YaUrBLyNPJvXPQH3OsD9WMZukI/TutibbQBVqLYpgqJn8pKSjbD50Yq2auG0wI1xOw==", "license": "MIT", "dependencies": { "@babel/runtime": "^7.26.0", @@ -1559,9 +1560,9 @@ "license": "BSD-3-Clause" }, "node_modules/@remix-run/router": { - "version": "1.20.0", - "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.20.0.tgz", - "integrity": "sha512-mUnk8rPJBI9loFDZ+YzPGdeniYK+FTmRD1TMCz7ev2SNIozyKKpnGgsxO34u6Z4z/t0ITuu7voi/AshfsGsgFg==", + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.21.0.tgz", + "integrity": "sha512-xfSkCAchbdG5PnbrKqFWwia4Bi61nH+wm8wLEqfHDyp7Y3dZzgqS2itV8i4gAq9pC2HsTpwyBC6Ds8VHZ96JlA==", "license": "MIT", "engines": { "node": ">=14.0.0" @@ -4110,6 +4111,17 @@ "react": "^18.3.1" } }, + "node_modules/react-image": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/react-image/-/react-image-4.1.0.tgz", + "integrity": "sha512-qwPNlelQe9Zy14K2pGWSwoL+vHsAwmJKS6gkotekDgRpcnRuzXNap00GfibD3eEPYu3WCPlyIUUNzcyHOrLHjw==", + "license": "MIT", + "peerDependencies": { + "@babel/runtime": ">=7", + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-is": { "version": "18.3.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz", @@ -4127,12 +4139,12 @@ } }, "node_modules/react-router": { - "version": "6.27.0", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.27.0.tgz", - "integrity": "sha512-YA+HGZXz4jaAkVoYBE98VQl+nVzI+cVI2Oj/06F5ZM+0u3TgedN9Y9kmMRo2mnkSK2nCpNQn0DVob4HCsY/WLw==", + "version": "6.28.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.28.0.tgz", + "integrity": "sha512-HrYdIFqdrnhDw0PqG/AKjAqEqM7AvxCz0DQ4h2W8k6nqmc5uRBYDag0SBxx9iYz5G8gnuNVLzUe13wl9eAsXXg==", "license": "MIT", "dependencies": { - "@remix-run/router": "1.20.0" + "@remix-run/router": "1.21.0" }, "engines": { "node": ">=14.0.0" @@ -4142,13 +4154,13 @@ } }, "node_modules/react-router-dom": { - "version": "6.27.0", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.27.0.tgz", - "integrity": "sha512-+bvtFWMC0DgAFrfKXKG9Fc+BcXWRUO1aJIihbB79xaeq0v5UzfvnM5houGUm1Y461WVRcgAQ+Clh5rdb1eCx4g==", + "version": "6.28.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.28.0.tgz", + "integrity": "sha512-kQ7Unsl5YdyOltsPGl31zOjLrDv+m2VcIEcIHqYYD3Lp0UppLjrzcfJqDJwXxFw3TH/yvapbnUvPlAj7Kx5nbg==", "license": "MIT", "dependencies": { - "@remix-run/router": "1.20.0", - "react-router": "6.27.0" + "@remix-run/router": "1.21.0", + "react-router": "6.28.0" }, "engines": { "node": ">=14.0.0" diff --git a/package.json b/package.json index 2c4df44..e0a7cec 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,8 @@ "protobuf-ts": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#staging", "react": "^18.3.1", "react-dom": "^18.3.1", - "react-router-dom": "^6.27.0" + "react-image": "^4.1.0", + "react-router-dom": "^6.28.0" }, "devDependencies": { "@babel/types": "^7.25.8", diff --git a/src/app/Header.tsx b/src/app/Header.tsx index 04ceb2d..bc7cd87 100644 --- a/src/app/Header.tsx +++ b/src/app/Header.tsx @@ -3,13 +3,13 @@ import { Menu } from "@mui/icons-material"; import classNames from "classnames"; import { makeStyles } from "@mui/styles"; import { getDarkLogo, getLightLogo, getSignatureAccentColour, hasTransparentLogoBG, hideLogo } from "../services/whiteLabel"; -import { Link } from "react-router-dom"; +// import { Link } from "react-router-dom"; import { useThemeType } from "../hooks/useThemeType"; import UserMenu from "../user/UserMenu"; const useStyles = makeStyles((theme: Theme) => ({ appBar: { - zIndex: theme.zIndex.drawer + 1 + zIndex: theme.zIndex.drawer + 1, }, toolbar: { marginLeft: theme.spacing(0.5), @@ -31,8 +31,12 @@ const useStyles = makeStyles((theme: Theme) => ({ }, logoContainer: { display: "flex", - alignItems: "flex-end", - justifyContent: "flex-start" + alignItems: "center", + height: "56px", + justifyContent: "flex-start", + [theme.breakpoints.up("md")]: { + height: "64px" + } }, logoLink: { display: "flex", @@ -43,7 +47,7 @@ const useStyles = makeStyles((theme: Theme) => ({ ? "" : theme.palette.mode === "light" ? "#fff" - : "#323232" + : "#0000" }, HeaderLogo: { objectFit: "cover", @@ -77,6 +81,7 @@ interface Props { export default function Header(props: Props) { const { sideIsOpen, openSide, toggleTheme } = props; + // const { mode, setMode } = useColorScheme(); const themeType = useThemeType(); const classes = useStyles() @@ -86,13 +91,13 @@ export default function Header(props: Props) { {/* {!isMobile && ( */} - - - + + + {/* )} */} diff --git a/src/navigation/NavigationContainer.tsx b/src/navigation/NavigationContainer.tsx index c999277..c2035de 100644 --- a/src/navigation/NavigationContainer.tsx +++ b/src/navigation/NavigationContainer.tsx @@ -18,7 +18,6 @@ interface Props extends PropsWithChildren { export default function NavigationContainer(props: Props) { // const { toggleTheme, teams, setTeams } = props; const { toggleTheme } = props; - const { children } = props; const [sideNavigatorOpen, setSideNavigatorOpen] = useState(false); // const isMobile = useMobile(); @@ -43,7 +42,6 @@ export default function NavigationContainer(props: Props) { {/* {isMobile && } */} - {children} ); } diff --git a/src/navigation/SideNavigator.tsx b/src/navigation/SideNavigator.tsx new file mode 100644 index 0000000..415804b --- /dev/null +++ b/src/navigation/SideNavigator.tsx @@ -0,0 +1,161 @@ +import { ChevronRight, Dashboard as DevicesIcon } from "@mui/icons-material"; +import ChevronLeft from "@mui/icons-material/ChevronLeft"; +import { darken, Divider, Grid2 as Grid, IconButton, lighten, Link, List, ListItem, ListItemButton, ListItemIcon, ListItemText, SwipeableDrawer, Theme, Toolbar, Tooltip, useTheme } from "@mui/material"; +import classNames from "classnames"; +import { useWidth } from "../hooks/useWidth"; +import { makeStyles } from "@mui/styles"; +import BindaptIcon from "../products/Bindapt/BindaptIcon"; + +const drawerWidth = 230; + +const useStyles = makeStyles((theme: Theme) => ({ + sideMenu: { + position: "fixed", + height: "100%", + width: drawerWidth, + flexShrink: 0, + whiteSpace: "nowrap", + background: theme.palette.background.default + }, + sideMenuOpened: { + zIndex: theme.zIndex.drawer + 2, + width: drawerWidth, + transition: theme.transitions.create(["width"], { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.enteringScreen + }) + }, + sideMenuOnClosed: { + transition: theme.transitions.create(["width", "z-index", "opacity"], { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.leavingScreen + }), + overflowX: "hidden", + width: theme.spacing(7), + zIndex: theme.zIndex.drawer, + opacity: 0, + [theme.breakpoints.up("md")]: { + width: theme.spacing(9), + opacity: 1 + } + }, + list: { + paddingTop: 0 + }, + listItem: { + paddingLeft: theme.spacing(2), + paddingRight: theme.spacing(2), + [theme.breakpoints.up("md")]: { + paddingLeft: theme.spacing(3), + paddingRight: theme.spacing(3) + } + }, + activeItem: + theme.palette.mode === "light" + ? { + background: darken(theme.palette.background.default, 0.25), + "&:hover": { + background: darken(theme.palette.background.default, 0.25) + } + } + : { + background: lighten(theme.palette.background.default, 0.25), + "&:hover": { + background: lighten(theme.palette.background.default, 0.25) + } + } +})) + +interface Props { + open: boolean; + onOpen: () => void; + onClose: () => void; +} + +export default function SideNavigator(props: Props) { + const { open, onOpen, onClose } = props; + const theme = useTheme(); + console.log(theme.transitions) + const width = useWidth(); + const classes = useStyles(); + + const getClasses = (page: string) => { + if (page === "/device") { + if (location.pathname.startsWith("/device") || + location.pathname.startsWith("/group")) { + return ({ + root: `${classes.listItem} ${classes.activeItem}` + }) + } + } + if (location.pathname.startsWith(page)) { + return ({ + root: `${classes.listItem} ${classes.activeItem}` + }) + } + return ({ + root: `${classes.listItem}` + }) + } + + const authenticatedSideMenu = () => { + + return ( + + + + + {/* {isAdaptive ? ( */} + + {/* ) : isAdCon ? ( + + ) : isOmniAir ? ( + + ) : ( + + )} */} + + {open && } + + + + ) + } + + return ( + + > + + + + + {theme.direction === "rtl" ? : } + + + + + + {/* {isAuthenticated || isOffline() ? authenticatedSideMenu() : unauthenticatedSideMenu()} */} + {authenticatedSideMenu()} + + ); +} \ No newline at end of file diff --git a/src/products/Bindapt/BindaptIcon.tsx b/src/products/Bindapt/BindaptIcon.tsx new file mode 100644 index 0000000..d43814c --- /dev/null +++ b/src/products/Bindapt/BindaptIcon.tsx @@ -0,0 +1,29 @@ +import BindaptDarkIcon from "../../assets/products/bindapt/bindaptPlusDark.png"; +import BindaptLightIcon from "../../assets/products/bindapt/bindaptPlusLight.png"; +import { ImgIcon } from "../../common/ImgIcon"; +import React from "react"; +import { useThemeType } from "../../hooks/useThemeType"; + +interface Props { + type?: "light" | "dark"; + size?: number; +} + +export default function BindaptIcon(props: Props) { + const themeType = useThemeType(); + const { type, size } = props; + + const src = () => { + if (type) { + return type === "light" ? BindaptLightIcon : BindaptDarkIcon; + } + + return themeType === "light" ? BindaptDarkIcon : BindaptLightIcon; + }; + + if (size) { + return bins; + } + + return ; +} diff --git a/src/theme/theme.ts b/src/theme/theme.ts index cec8075..2ab86a1 100644 --- a/src/theme/theme.ts +++ b/src/theme/theme.ts @@ -13,12 +13,12 @@ export function CreateTheme(themeType: "light" | "dark"): Theme { function generateBackgroundShades(baseColor: string, themeType: "light" | "dark") { if(themeType==="light") return ({ - default: lighten(baseColor, 0.90), + default: lighten(baseColor, 0.75), paper: lighten(baseColor, 0.75) }) return { - default: darken(baseColor, 0.35), // Lightens the base color for background.default + default: darken(baseColor, 0.50), // Lightens the base color for background.default paper: darken(baseColor, 0.50), // Slightly less light for background.paper }; } @@ -31,7 +31,7 @@ function options(themeType: "light" | "dark"): ThemeOptions { palette: { primary: Colours[getPrimaryColour() as keyof typeof Colours], secondary: Colours[getSecondaryColour() as keyof typeof Colours], - background: generateBackgroundShades(Colours.grey[900], themeType), + background: generateBackgroundShades(Colours.grey[800], themeType), mode: themeType, bxt: { primaryBlue: "#005bb0",