QRunIO/qqq-frontend-material-dashboard
2
0
Fork 0
mirror of https://github.com/Kingsrook/qqq-frontend-material-dashboard.git synced 2025-07-17 21:00:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

SPRINT-12: removed single letter in navbar on child links

Browse Source
This commit is contained in:
Tim Chamberlain
2022-09-26 14:33:36 -05:00
parent 275f71f03a
commit 9fe87d2532
1 changed files with 25 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/qqq/components/Sidenav/styles/sidenavItem.ts
View File

@ -21,7 +21,7 @@
import {Theme} from "@mui/material/styles";
function item(theme: Theme | any, ownerState: any)
function item(theme: Theme | any, ownerState: any)
{
const {palette, borders, functions, transitions} = theme;
const {active, color, transparentSidenav, whiteSidenav, darkMode} = ownerState;
@ -37,26 +37,26 @@ function item(theme: Theme | any, ownerState: any)
width: "100%",
borderRadius: borderRadius.md,
cursor: "pointer",
backgroundColor: () =>
backgroundColor: () =>
{
let backgroundValue = transparent.main;
if (
(active === "isParent" && !transparentSidenav && !whiteSidenav) ||
(active === "isParent" && transparentSidenav && darkMode)
)
(active === "isParent" && transparentSidenav && darkMode)
)
{
backgroundValue = rgba(white.main, 0.2);
}
else if (active === "isParent" && transparentSidenav)
else if (active === "isParent" && transparentSidenav)
{
backgroundValue = grey[300];
}
else if (active === "isParent" && whiteSidenav)
else if (active === "isParent" && whiteSidenav)
{
backgroundValue = grey[200];
}
else if (active)
else if (active)
{
backgroundValue = palette[color].main;
}
@ -70,13 +70,13 @@ function item(theme: Theme | any, ownerState: any)
"&:hover, &:focus": {
backgroundColor:
!active &&
rgba((transparentSidenav && !darkMode) || whiteSidenav ? grey[400] : white.main, 0.2),
!active &&
rgba((transparentSidenav && !darkMode) || whiteSidenav ? grey[400] : white.main, 0.2),
},
};
}
function itemContent(theme: Theme, ownerState: any)
function itemContent(theme: Theme, ownerState: any)
{
const {palette, typography, transitions, functions} = theme;
const {miniSidenav, name, active, transparentSidenav, whiteSidenav, darkMode} = ownerState;
@ -97,9 +97,9 @@ function itemContent(theme: Theme, ownerState: any)
"& span": {
color:
((transparentSidenav && !darkMode) || whiteSidenav) && (active === "isParent" || !active)
? dark.main
: white.main,
((transparentSidenav && !darkMode) || whiteSidenav) && (active === "isParent" || !active)
? dark.main
: white.main,
fontWeight: active ? fontWeightRegular : fontWeightLight,
fontSize: size.sm,
opacity: miniSidenav ? 0 : 1,
@ -110,11 +110,10 @@ function itemContent(theme: Theme, ownerState: any)
},
"&::before": {
content: `"${name[0]}"`,
color:
((transparentSidenav && !darkMode) || whiteSidenav) && (active === "isParent" || !active)
? dark.main
: white.main,
((transparentSidenav && !darkMode) || whiteSidenav) && (active === "isParent" || !active)
? dark.main
: white.main,
fontWeight: fontWeightRegular,
display: "flex",
alignItems: "center",
@ -129,11 +128,11 @@ function itemContent(theme: Theme, ownerState: any)
};
}
function itemArrow(theme: Theme, ownerState: any)
function itemArrow(theme: Theme, ownerState: any)
{
const {palette, typography, transitions, breakpoints, functions} = theme;
const {noCollapse, transparentSidenav, whiteSidenav, miniSidenav, open, active, darkMode} =
ownerState;
ownerState;
const {white, dark} = palette;
const {size} = typography;
@ -144,19 +143,19 @@ function itemArrow(theme: Theme, ownerState: any)
fontWeight: 700,
marginBottom: pxToRem(-1),
transform: open ? "rotate(0)" : "rotate(-180deg)",
color: () =>
color: () =>
{
let colorValue;
if (transparentSidenav && darkMode)
if (transparentSidenav && darkMode)
{
colorValue = open || active ? white.main : rgba(white.main, 0.25);
}
else if (transparentSidenav || whiteSidenav)
else if (transparentSidenav || whiteSidenav)
{
colorValue = open || active ? dark.main : rgba(dark.main, 0.25);
}
else
else
{
colorValue = open || active ? white.main : rgba(white.main, 0.5);
}
@ -170,9 +169,9 @@ function itemArrow(theme: Theme, ownerState: any)
[breakpoints.up("xl")]: {
display:
noCollapse || (transparentSidenav && miniSidenav) || miniSidenav
? "none !important"
: "block !important",
noCollapse || (transparentSidenav && miniSidenav) || miniSidenav
? "none !important"
: "block !important",
},
};
}