Merge pull request #155 from Alforoan/username-navbar

added username to navbar
Alforoan · Jul 3, 2024 · 99cecd2 · 99cecd2
2 parents 3ffec65 + c2014de
commit 99cecd2
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 0 deletions.
diff --git a/client/src/components/Navbar.tsx b/client/src/components/Navbar.tsx
@@ -7,6 +7,7 @@ import { useAuth } from '../context/AuthContext';
 
 const Navbar: React.FC = () => {
   const [isOpen, setIsOpen] = useState(false);
+  const { user, isAuthenticated } = useAuth0();
 
   return (
     <nav className="bg-secondaryElements p-4">
@@ -16,6 +17,10 @@ const Navbar: React.FC = () => {
          <Link     to="/home" ><img src={Logo} alt="Logo" className="size-16" /></Link> <div className="text-primaryText font-primary font-bold text-xl ml-8">
             StudyFlow
           </div>
+          {isAuthenticated && user && 
+          <p className="text-flair font-primary font-bold text-xl ml-8 lg:ml-16 xs:text-md hidden xs:block">
+            Hi, {user.given_name ? user.given_name : user.nickname}
+          </p>}
         </div>
 
         {/* Links */}

diff --git a/client/tailwind.config.js b/client/tailwind.config.js
@@ -3,6 +3,9 @@ export default {
 	content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
 	theme: {
 		extend: {
+			screens: {
+        'xs': '400px',
+      },
 			colors: {
 				primaryText: "#0F172A",
 				primaryTextLighter: "#0F172A80",