Add tooltips on sidebar icons when collapsed

src/Sidebar/ui/SidebarRoot.tsx

@@ -357,7 +357,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
       <List>
         <ListItem classes={{ root: classes.listitem }} button onClick={() => setHackingOpen((old) => !old)}>
           <ListItemIcon>
-            <ComputerIcon color="primary" />
+            <Tooltip title={!open ? "Hacking" : ""}>
+              <ComputerIcon color="primary" />
+            </Tooltip>
           </ListItemIcon>
           <ListItemText primary={<Typography>Hacking</Typography>} />
           {hackingOpen ? <ExpandLessIcon color="primary" /> : <ExpandMoreIcon color="primary" />}
@@ -374,9 +376,11 @@ export function SidebarRoot(props: IProps): React.ReactElement {
               onClick={clickTerminal}
             >
               <ListItemIcon>
-                <LastPageIcon
-                  color={flashTerminal ? "error" : props.page !== Page.Terminal ? "secondary" : "primary"}
-                />
+                <Tooltip title={!open ? "Terminal" : ""}>
+                  <LastPageIcon
+                    color={flashTerminal ? "error" : props.page !== Page.Terminal ? "secondary" : "primary"}
+                  />
+                </Tooltip>
               </ListItemIcon>
               <ListItemText>
                 <Typography color={flashTerminal ? "error" : props.page !== Page.Terminal ? "secondary" : "primary"}>
@@ -394,7 +398,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
               onClick={clickScriptEditor}
             >
               <ListItemIcon>
-                <CreateIcon color={props.page !== Page.ScriptEditor ? "secondary" : "primary"} />
+                <Tooltip title={!open ? "Script Editor" : ""}>
+                  <CreateIcon color={props.page !== Page.ScriptEditor ? "secondary" : "primary"} />
+                </Tooltip>
               </ListItemIcon>
               <ListItemText>
                 <Typography color={props.page !== Page.ScriptEditor ? "secondary" : "primary"}>
@@ -412,9 +418,11 @@ export function SidebarRoot(props: IProps): React.ReactElement {
               onClick={clickActiveScripts}
             >
               <ListItemIcon>
-                <StorageIcon
-                  color={flashActiveScripts ? "error" : props.page !== Page.ActiveScripts ? "secondary" : "primary"}
-                />
+                <Tooltip title={!open ? "Active Scripts" : ""}>
+                  <StorageIcon
+                    color={flashActiveScripts ? "error" : props.page !== Page.ActiveScripts ? "secondary" : "primary"}
+                  />
+                </Tooltip>
               </ListItemIcon>
               <ListItemText>
                 <Typography
@@ -435,7 +443,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
               >
                 <ListItemIcon>
                   <Badge badgeContent={programCount > 0 ? programCount : undefined} color="error">
-                    <BugReportIcon color={props.page !== Page.CreateProgram ? "secondary" : "primary"} />
+                    <Tooltip title={!open ? "Create Program" : ""}>
+                      <BugReportIcon color={props.page !== Page.CreateProgram ? "secondary" : "primary"} />
+                    </Tooltip>
                   </Badge>
                 </ListItemIcon>
                 <ListItemText>
@@ -455,7 +465,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
                 onClick={clickStaneksGift}
               >
                 <ListItemIcon>
-                  <DeveloperBoardIcon color={props.page !== Page.StaneksGift ? "secondary" : "primary"} />
+                  <Tooltip title={!open ? "Stanek's Gift" : ""}>
+                    <DeveloperBoardIcon color={props.page !== Page.StaneksGift ? "secondary" : "primary"} />
+                  </Tooltip>
                 </ListItemIcon>
                 <ListItemText>
                   <Typography color={props.page !== Page.StaneksGift ? "secondary" : "primary"}>
@@ -470,7 +482,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
         <Divider />
         <ListItem classes={{ root: classes.listitem }} button onClick={() => setCharacterOpen((old) => !old)}>
           <ListItemIcon>
-            <AccountBoxIcon color="primary" />
+            <Tooltip title={!open ? "Character" : ""}>
+              <AccountBoxIcon color="primary" />
+            </Tooltip>
           </ListItemIcon>
           <ListItemText primary={<Typography>Character</Typography>} />
           {characterOpen ? <ExpandLessIcon color="primary" /> : <ExpandMoreIcon color="primary" />}
@@ -485,7 +499,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
             onClick={clickStats}
           >
             <ListItemIcon>
-              <EqualizerIcon color={flashStats ? "error" : props.page !== Page.Stats ? "secondary" : "primary"} />
+              <Tooltip title={!open ? "Stats" : ""}>
+                <EqualizerIcon color={flashStats ? "error" : props.page !== Page.Stats ? "secondary" : "primary"} />
+              </Tooltip>
             </ListItemIcon>
             <ListItemText>
               <Typography color={flashStats ? "error" : props.page !== Page.Stats ? "secondary" : "primary"}>
@@ -505,7 +521,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
             >
               <ListItemIcon>
                 <Badge badgeContent={invitationsCount !== 0 ? invitationsCount : undefined} color="error">
-                  <ContactsIcon color={![Page.Factions, Page.Faction].includes(props.page) ? "secondary" : "primary"} />
+                  <Tooltip title={!open ? "Factions" : ""}>
+                    <ContactsIcon color={![Page.Factions, Page.Faction].includes(props.page) ? "secondary" : "primary"} />
+                  </Tooltip>
                 </Badge>
               </ListItemIcon>
               <ListItemText>
@@ -527,10 +545,12 @@ export function SidebarRoot(props: IProps): React.ReactElement {
             >
               <ListItemIcon>
                 <Badge badgeContent={augmentationCount !== 0 ? augmentationCount : undefined} color="error">
-                  <DoubleArrowIcon
-                    style={{ transform: "rotate(-90deg)" }}
-                    color={props.page !== Page.Augmentations ? "secondary" : "primary"}
-                  />
+                  <Tooltip title={!open ? "Augmentations" : ""}>
+                    <DoubleArrowIcon
+                      style={{ transform: "rotate(-90deg)" }}
+                      color={props.page !== Page.Augmentations ? "secondary" : "primary"}
+                    />
+                  </Tooltip>
                 </Badge>
               </ListItemIcon>
               <ListItemText>
@@ -549,7 +569,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
             onClick={clickHacknet}
           >
             <ListItemIcon>
-              <AccountTreeIcon color={flashHacknet ? "error" : props.page !== Page.Hacknet ? "secondary" : "primary"} />
+              <Tooltip title={!open ? "Hacknet" : ""}>
+                <AccountTreeIcon color={flashHacknet ? "error" : props.page !== Page.Hacknet ? "secondary" : "primary"} />
+              </Tooltip>
             </ListItemIcon>
             <ListItemText>
               <Typography color={flashHacknet ? "error" : props.page !== Page.Hacknet ? "secondary" : "primary"}>
@@ -568,7 +590,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
               onClick={clickSleeves}
             >
               <ListItemIcon>
-                <PeopleAltIcon color={props.page !== Page.Sleeves ? "secondary" : "primary"} />
+                <Tooltip title={!open ? "Sleeves" : ""}>
+                  <PeopleAltIcon color={props.page !== Page.Sleeves ? "secondary" : "primary"} />
+                </Tooltip>
               </ListItemIcon>
               <ListItemText>
                 <Typography color={props.page !== Page.Sleeves ? "secondary" : "primary"}>Sleeves</Typography>
@@ -580,7 +604,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
         <Divider />
         <ListItem classes={{ root: classes.listitem }} button onClick={() => setWorldOpen((old) => !old)}>
           <ListItemIcon>
-            <PublicIcon color="primary" />
+            <Tooltip title={!open ? "World" : ""}>
+              <PublicIcon color="primary" />
+            </Tooltip>
           </ListItemIcon>
           <ListItemText primary={<Typography>World</Typography>} />
           {worldOpen ? <ExpandLessIcon color="primary" /> : <ExpandMoreIcon color="primary" />}
@@ -596,7 +622,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
             onClick={clickCity}
           >
             <ListItemIcon>
-              <LocationCityIcon color={flashCity ? "error" : props.page !== Page.City ? "secondary" : "primary"} />
+              <Tooltip title={!open ? "City" : ""}>
+                <LocationCityIcon color={flashCity ? "error" : props.page !== Page.City ? "secondary" : "primary"} />
+              </Tooltip>
             </ListItemIcon>
             <ListItemText>
               <Typography color={flashCity ? "error" : props.page !== Page.City ? "secondary" : "primary"}>
@@ -613,7 +641,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
             onClick={clickTravel}
           >
             <ListItemIcon>
-              <AirplanemodeActiveIcon color={props.page !== Page.Travel ? "secondary" : "primary"} />
+              <Tooltip title={!open ? "Travel" : ""}>
+                <AirplanemodeActiveIcon color={props.page !== Page.Travel ? "secondary" : "primary"} />
+              </Tooltip>
             </ListItemIcon>
             <ListItemText>
               <Typography color={props.page !== Page.Travel ? "secondary" : "primary"}>Travel</Typography>
@@ -630,7 +660,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
               onClick={clickJob}
             >
               <ListItemIcon>
-                <WorkIcon color={props.page !== Page.Job ? "secondary" : "primary"} />
+                <Tooltip title={!open ? "Job" : ""}>
+                  <WorkIcon color={props.page !== Page.Job ? "secondary" : "primary"} />
+                </Tooltip>
               </ListItemIcon>
               <ListItemText>
                 <Typography color={props.page !== Page.Job ? "secondary" : "primary"}>Job</Typography>
@@ -648,7 +680,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
               onClick={clickStockMarket}
             >
               <ListItemIcon>
-                <TrendingUpIcon color={props.page !== Page.StockMarket ? "secondary" : "primary"} />
+                <Tooltip title={!open ? "Stock Market" : ""}>
+                  <TrendingUpIcon color={props.page !== Page.StockMarket ? "secondary" : "primary"} />
+                </Tooltip>
               </ListItemIcon>
               <ListItemText>
                 <Typography color={props.page !== Page.StockMarket ? "secondary" : "primary"}>Stock Market</Typography>
@@ -666,7 +700,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
               onClick={clickBladeburner}
             >
               <ListItemIcon>
-                <FormatBoldIcon color={props.page !== Page.Bladeburner ? "secondary" : "primary"} />
+                <Tooltip title={!open ? "Bladeburner" : ""}>
+                  <FormatBoldIcon color={props.page !== Page.Bladeburner ? "secondary" : "primary"} />
+                </Tooltip>
               </ListItemIcon>
               <ListItemText>
                 <Typography color={props.page !== Page.Bladeburner ? "secondary" : "primary"}>Bladeburner</Typography>
@@ -684,7 +720,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
               onClick={clickCorp}
             >
               <ListItemIcon>
-                <BusinessIcon color={props.page !== Page.Corporation ? "secondary" : "primary"} />
+                <Tooltip title={!open ? "Corp" : ""}>
+                  <BusinessIcon color={props.page !== Page.Corporation ? "secondary" : "primary"} />
+                </Tooltip>
               </ListItemIcon>
               <ListItemText>
                 <Typography color={props.page !== Page.Corporation ? "secondary" : "primary"}>Corp</Typography>
@@ -702,7 +740,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
               onClick={clickGang}
             >
               <ListItemIcon>
-                <SportsMmaIcon color={props.page !== Page.Gang ? "secondary" : "primary"} />
+                <Tooltip title={!open ? "Gang" : ""}>
+                  <SportsMmaIcon color={props.page !== Page.Gang ? "secondary" : "primary"} />
+                </Tooltip>
               </ListItemIcon>
               <ListItemText>
                 <Typography color={props.page !== Page.Gang ? "secondary" : "primary"}>Gang</Typography>
@@ -714,7 +754,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
         <Divider />
         <ListItem classes={{ root: classes.listitem }} button onClick={() => setHelpOpen((old) => !old)}>
           <ListItemIcon>
-            <LiveHelpIcon color="primary" />
+            <Tooltip title={!open ? "Help" : ""}>
+              <LiveHelpIcon color="primary" />
+            </Tooltip>
           </ListItemIcon>
           <ListItemText primary={<Typography>Help</Typography>} />
           {helpOpen ? <ExpandLessIcon color="primary" /> : <ExpandMoreIcon color="primary" />}
@@ -729,7 +771,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
             onClick={clickMilestones}
           >
             <ListItemIcon>
-              <CheckIcon color={props.page !== Page.Milestones ? "secondary" : "primary"} />
+              <Tooltip title={!open ? "Milestones" : ""}>
+                <CheckIcon color={props.page !== Page.Milestones ? "secondary" : "primary"} />
+              </Tooltip>
             </ListItemIcon>
             <ListItemText>
               <Typography color={props.page !== Page.Milestones ? "secondary" : "primary"}>Milestones</Typography>
@@ -744,7 +788,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
             onClick={clickTutorial}
           >
             <ListItemIcon>
-              <HelpIcon color={flashTutorial ? "error" : props.page !== Page.Tutorial ? "secondary" : "primary"} />
+              <Tooltip title={!open ? "Tutorial" : ""}>
+                <HelpIcon color={flashTutorial ? "error" : props.page !== Page.Tutorial ? "secondary" : "primary"} />
+              </Tooltip>
             </ListItemIcon>
             <ListItemText>
               <Typography color={flashTutorial ? "error" : props.page !== Page.Tutorial ? "secondary" : "primary"}>
@@ -761,7 +807,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
             onClick={clickAchievements}
           >
             <ListItemIcon>
-              <EmojiEventsIcon color={props.page !== Page.Achievements ? "secondary" : "primary"} />
+              <Tooltip title={!open ? "Achievements" : ""}>
+                <EmojiEventsIcon color={props.page !== Page.Achievements ? "secondary" : "primary"} />
+              </Tooltip>
             </ListItemIcon>
             <ListItemText>
               <Typography color={props.page !== Page.Achievements ? "secondary" : "primary"}>Achievements</Typography>
@@ -776,7 +824,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
             onClick={clickOptions}
           >
             <ListItemIcon>
-              <SettingsIcon color={props.page !== Page.Options ? "secondary" : "primary"} />
+              <Tooltip title={!open ? "Options" : ""}>
+                <SettingsIcon color={props.page !== Page.Options ? "secondary" : "primary"} />
+              </Tooltip>
             </ListItemIcon>
             <ListItemText>
               <Typography color={props.page !== Page.Options ? "secondary" : "primary"}>Options</Typography>
@@ -793,7 +843,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
               onClick={clickDev}
             >
               <ListItemIcon>
-                <DeveloperBoardIcon color={props.page !== Page.DevMenu ? "secondary" : "primary"} />
+                <Tooltip title={!open ? "Dev" : ""}>
+                  <DeveloperBoardIcon color={props.page !== Page.DevMenu ? "secondary" : "primary"} />
+                </Tooltip>
               </ListItemIcon>
               <ListItemText>
                 <Typography color={props.page !== Page.DevMenu ? "secondary" : "primary"}>Dev</Typography>