Merge pull request #200 from Tizzz-555/navbar-tooltip

Navbar Tooltip

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}

app/globals.css

@@ -19,6 +19,8 @@
   --foreground-inactive-hsl: 0, 0%, 6%;
   --foreground-active-hsl: 0, 0%, 6%;
 
+  --background-navbar-tooltip-hsl: 0, 0%, 100%;
+
   --foreground-nodata-hsl: 210, 2%, 82%;
 
   --color-grey: 0, 0%, 6%;
@@ -231,6 +233,8 @@
 
   --foreground-nodata-hsl: 240, 3%, 22%;
 
+  --background-navbar-tooltip-hsl: 240, 3%, 12%;
+
   --mods-NM-bg: 226, 99%, 65%;
   --mods-NM-bg-row: 226, 99%, 65%, 0.15;
   --mods-HD-bg: 43, 98%, 60%;

components/NavBar/NavBar.module.css

@@ -54,6 +54,9 @@
   cursor: pointer;
 }
 
+.iconContainer {
+  margin-top: 12px;
+}
 .logoLink,
 .actions .userPropic {
   height: 1.9rem;

components/NavBar/NavBar.tsx

@@ -10,7 +10,6 @@ import ModeSwitcher from './ModeSwitcher/ModeSwitcher';
 import styles from './NavBar.module.css';
 import Routes from './Routes/Routes';
 import SearchButton from './SearchButton/SearchButton';
-import ThemeSwitcher from './ThemeSwitcher/ThemeSwitcher';
 import UserLogged from './UserLogged/UserLogged';
 
 export default function NavBar() {
@@ -34,7 +33,6 @@ export default function NavBar() {
         <div className={styles.actions}>
           <SearchButton />
           {cookieMode?.value && <ModeSwitcher mode={cookieMode?.value} />}
-          <ThemeSwitcher />
           <UserLogged />
         </div>
       </div>

components/NavBar/ThemeSwitcher/ThemeSwitcher.tsx

@@ -19,11 +19,6 @@ export default function ThemeSwitcher() {
         {theme === 'light' && <Image src={sunSVG} alt="Theme Switcher" fill />}
         {theme === 'dark' && <Image src={moonSVG} alt="Theme Switcher" fill />}
         {!theme && <></>}
-        {/* <Image
-              src={theme === 'light' ? sunSVG : moonSVG}
-              alt="Theme Switcher"
-              fill
-            /> */}
       </div>
     </button>
   );

components/NavBar/Tooltip/Tooltip.module.css

@@ -0,0 +1,55 @@
+.tooltipContainer {
+  position: relative;
+  display: inline-block;
+  height: 100%;
+}
+
+.parent {
+  position: absolute;
+  z-index: 1000;
+  top: calc(100% - 0.6rem);
+  left: calc(
+    -1 * (1.9rem + (1.4rem / 2))
+  ); /* calc(-1 * (profile image width + (horizontal padding of content below / 2))) */
+  white-space: nowrap;
+  opacity: 0;
+  padding-top: 0.7rem;
+  visibility: hidden;
+}
+
+.tooltipContent {
+  padding: 1.2rem 1.4rem;
+  background-color: hsla(var(--background-navbar-tooltip-hsl));
+  color: hsla(var(--foreground-inactive-hsl));
+  border-radius: 0.85rem;
+  box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.1);
+  font-size: 1.1rem;
+  display: flex;
+  font-weight: 400;
+  flex-direction: column;
+  gap: 0.8rem;
+}
+
+.tooltipContainer:hover > .parent {
+  opacity: 1;
+  top: calc(100% - 0.15rem);
+  visibility: visible;
+  transition: all 0.2s ease-out;
+}
+
+.tooltipContent > div {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tooltipContent > div {
+  cursor: pointer;
+  transition: color 0.2s ease;
+  border-radius: 4px;
+  color: hsla(var(--foreground-inactive-hsl));
+}
+
+.tooltipContent > div:hover {
+  color: hsla(var(--foreground-active-hsl));
+}

components/NavBar/Tooltip/Tooltip.tsx

@@ -0,0 +1,37 @@
+import { AnimatePresence, motion } from 'framer-motion';
+import React, { useEffect, useRef, useState } from 'react';
+import styles from './Tooltip.module.css';
+
+export default function Tooltip({ children, content }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const tooltipRef = useRef(null);
+  const timeoutRef = useRef(null);
+
+  const handleMouseEnter = () => {
+    clearTimeout(timeoutRef.current);
+    setIsOpen(true);
+  };
+
+  const handleMouseLeave = () => {
+    timeoutRef.current = setTimeout(() => {
+      setIsOpen(false);
+    }, 500);
+  };
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  return (
+    <div className={styles.tooltipContainer}>
+      {children}
+      <div className={styles.parent}>
+        <div className={styles.tooltipContent}>{content}</div>
+      </div>
+    </div>
+  );
+}

components/NavBar/UserLogged/UserLogged.tsx

@@ -3,18 +3,32 @@
 import { useUser } from '@/util/hooks';
 import Image from 'next/image';
 import styles from '../NavBar.module.css';
+import ThemeSwitcher from '../ThemeSwitcher/ThemeSwitcher';
+import Tooltip from './../Tooltip/Tooltip';
+const tooltipContent = (
+  <>
+    {/* <div>Friends</div> */}
+    <div>Sign out</div>
+    <div className={styles.iconContainer}>
+      <ThemeSwitcher />
+    </div>
+  </>
+);
 
 export default function UserLogged() {
   const user = useUser();
 
   if (user?.osuId)
     return (
-      <div className={styles.userPropic}>
-        <Image
-          src={`http://s.ppy.sh/a/${user?.osuId}`}
-          alt="User Propic"
-          fill
-        />
-      </div>
+      <Tooltip content={tooltipContent}>
+        <div className={styles.userPropic}>
+          <Image
+            src={`http://s.ppy.sh/a/${user?.osuId}`}
+            alt="User Propic"
+            fill
+            sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+          />
+        </div>
+      </Tooltip>
     );
 }

package.json

@@ -16,7 +16,7 @@
     "chart.js": "^4.4.0",
     "chartjs-adapter-date-fns": "^3.0.0",
     "clsx": "^2.0.0",
-    "framer-motion": "^10.16.4",
+    "framer-motion": "^11.3.21",
     "iron-session": "^8.0.1",
     "next": "^14.1.2",
     "next-themes": "^0.3.0",