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