From 9fe87d2532f1e008f8e15b2f83e438b7f17901cd Mon Sep 17 00:00:00 2001
From: Tim Chamberlain <tchamberlain76@gmail.com>
Date: Mon, 26 Sep 2022 14:33:36 -0500
Subject: [PATCH] SPRINT-12: removed single letter in navbar on child links

---
 .../components/Sidenav/styles/sidenavItem.ts  | 51 +++++++++----------
 1 file changed, 25 insertions(+), 26 deletions(-)

diff --git a/src/qqq/components/Sidenav/styles/sidenavItem.ts b/src/qqq/components/Sidenav/styles/sidenavItem.ts
index 4e2a973..908ee69 100644
--- a/src/qqq/components/Sidenav/styles/sidenavItem.ts
+++ b/src/qqq/components/Sidenav/styles/sidenavItem.ts
@@ -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",
       },
    };
 }