Added tooltips for the minimized Mainmenu options

package-lock.json

@@ -16,6 +16,7 @@
         "react-dom": "17.0.2",
         "react-redux": "^7.2.6",
         "react-swipeable": "^6.2.0",
+        "react-tooltip": "^4.2.21",
         "turndown": "^7.1.1"
       },
       "devDependencies": {
@@ -3137,6 +3138,22 @@
         "react": "^16.8.3 || ^17"
       }
     },
+    "node_modules/react-tooltip": {
+      "version": "4.2.21",
+      "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-4.2.21.tgz",
+      "integrity": "sha512-zSLprMymBDowknr0KVDiJ05IjZn9mQhhg4PRsqln0OZtURAJ1snt1xi5daZfagsh6vfsziZrc9pErPTDY1ACig==",
+      "dependencies": {
+        "prop-types": "^15.7.2",
+        "uuid": "^7.0.3"
+      },
+      "engines": {
+        "npm": ">=6.13"
+      },
+      "peerDependencies": {
+        "react": ">=16.0.0",
+        "react-dom": ">=16.0.0"
+      }
+    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -3663,6 +3680,14 @@
       "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
       "dev": true
     },
+    "node_modules/uuid": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-7.0.3.tgz",
+      "integrity": "sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg==",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/v8-compile-cache": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
@@ -5951,6 +5976,15 @@
       "integrity": "sha512-nWQ8dEM8e/uswZLSIkXUsAnQmnX4MTcryOHBQIQYRMJFDpgDBSiVbKsz/BZVCIScF4NtJh16oyxwaNOepR6xSw==",
       "requires": {}
     },
+    "react-tooltip": {
+      "version": "4.2.21",
+      "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-4.2.21.tgz",
+      "integrity": "sha512-zSLprMymBDowknr0KVDiJ05IjZn9mQhhg4PRsqln0OZtURAJ1snt1xi5daZfagsh6vfsziZrc9pErPTDY1ACig==",
+      "requires": {
+        "prop-types": "^15.7.2",
+        "uuid": "^7.0.3"
+      }
+    },
     "readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -6320,6 +6354,11 @@
       "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
       "dev": true
     },
+    "uuid": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-7.0.3.tgz",
+      "integrity": "sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg=="
+    },
     "v8-compile-cache": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",

package.json

@@ -19,6 +19,7 @@
     "react-dom": "17.0.2",
     "react-redux": "^7.2.6",
     "react-swipeable": "^6.2.0",
+    "react-tooltip": "^4.2.21",
     "turndown": "^7.1.1"
   },
   "devDependencies": {

src/components/AppLayout.tsx

@@ -15,6 +15,7 @@ import {
   setMainPanelReduced,
 } from "redux/AppLayoutSlice";
 import { RootState } from "redux/store";
+import ReactTooltip from "react-tooltip";
 
 type AppLayoutProps = {
   subPanel?: React.ReactNode;
@@ -222,6 +223,17 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
           </div>
         </div>
       </div>
+
+      <ReactTooltip
+        id="MainPanelTooltip"
+        place="right"
+        type="light"
+        effect="solid"
+        delayShow={300}
+        delayHide={100}
+        disable={!mainPanelReduced || isMobile}
+        className="drop-shadow-dark-xl !opacity-100 !bg-light !rounded-lg after:!border-r-light text-left !transition-[top,left,width]"
+      />
     </div>
   );
 }

src/components/PanelComponents/NavOption.tsx

@@ -7,6 +7,7 @@ type NavOptionProps = {
   icon?: string;
   title: string;
   subtitle?: string;
+  tooltipId?: string;
   border?: boolean;
   reduced?: boolean;
   onClick?: MouseEventHandler<HTMLDivElement>;
@@ -26,6 +27,15 @@ export default function NavOption(props: NavOptionProps): JSX.Element {
     <Link href={props.url} passHref>
       <div
         onClick={props.onClick}
+        data-html={true}
+        data-tip={`
+          <div class="px-4 py-3">
+          <h3 class="text-2xl">${props.title}</h3>
+          ${props.subtitle ? `<p class="max-w-[10rem]">${props.subtitle}</p>` : ""}
+          </div>
+        `}
+        data-for={props.tooltipId}
+        data-multiline={true}
         className={`grid grid-flow-col grid-cols-[auto] auto-cols-fr justify-center ${
           props.icon ? "text-left" : "text-center"
         } ${divCommon}`}

src/components/Panels/MainPanel.tsx

@@ -84,6 +84,7 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
         icon="library_books"
         title={langui.main_library}
         subtitle={langui.main_library_description}
+        tooltipId="MainPanelTooltip"
         reduced={mainPanelReduced && isDesktop}
         onClick={() => dispatch(setMainPanelOpen(false))}
       />
@@ -93,6 +94,7 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
         icon="travel_explore"
         title={langui.main_wiki}
         subtitle={langui.main_wiki_description}
+        tooltipId="MainPanelTooltip"
         reduced={mainPanelReduced && isDesktop}
         onClick={() => dispatch(setMainPanelOpen(false))}
       />
@@ -102,6 +104,7 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
         icon="watch_later"
         title={langui.main_chronicles}
         subtitle={langui.main_chronicles_description}
+        tooltipId="MainPanelTooltip"
         reduced={mainPanelReduced && isDesktop}
         onClick={() => dispatch(setMainPanelOpen(false))}
       />
@@ -112,6 +115,7 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
         url="/news"
         icon="feed"
         title={langui.main_news}
+        tooltipId="MainPanelTooltip"
         reduced={mainPanelReduced && isDesktop}
         onClick={() => dispatch(setMainPanelOpen(false))}
       />
@@ -120,6 +124,7 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
         url="/merch"
         icon="store"
         title={langui.main_merch}
+        tooltipId="MainPanelTooltip"
         reduced={mainPanelReduced && isDesktop}
         onClick={() => dispatch(setMainPanelOpen(false))}
       />
@@ -128,6 +133,7 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
         url="/gallery"
         icon="collections"
         title={langui.main_gallery}
+        tooltipId="MainPanelTooltip"
         reduced={mainPanelReduced && isDesktop}
         onClick={() => dispatch(setMainPanelOpen(false))}
       />
@@ -136,6 +142,7 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
         url="/archives"
         icon="inventory"
         title={langui.main_archives}
+        tooltipId="MainPanelTooltip"
         reduced={mainPanelReduced && isDesktop}
         onClick={() => dispatch(setMainPanelOpen(false))}
       />
@@ -144,6 +151,7 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
         url="/about-us"
         icon="info"
         title={langui.main_about_us}
+        tooltipId="MainPanelTooltip"
         reduced={mainPanelReduced && isDesktop}
         onClick={() => dispatch(setMainPanelOpen(false))}
       />