Used custom popover to handle user profile items

ahmedalatawi · Nov 24, 2024 · feee37e · feee37e
1 parent 1dc15c0
commit feee37e
Show file tree

Hide file tree

Showing 5 changed files with 118 additions and 29 deletions.
diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
   },
   "dependencies": {
     "@apollo/server": "^4.9.5",
+    "@atawi/react-popover": "^1.0.4",
     "@fullcalendar/core": "^6.1.5",
     "@fullcalendar/daygrid": "^6.1.4",
     "@fullcalendar/interaction": "^6.1.4",

diff --git a/src/pages/user/MyAccount/MyAccount.tsx b/src/pages/user/MyAccount/MyAccount.tsx
@@ -1,18 +1,23 @@
-import { Fragment, useContext } from 'react'
+import { Fragment, useContext, useState } from 'react'
 import { NavDropdown } from 'react-bootstrap'
 import { FaUser, FaUserEdit } from 'react-icons/fa'
 import { FiLogOut, FiSettings } from 'react-icons/fi'
 import { MdEventNote } from 'react-icons/md'
 import { Link } from 'react-router-dom'
 import AuthContext from '@/store/auth-context'
-import { StyledNavDropdown } from './styles'
+import { BiSolidChevronDown } from 'react-icons/bi'
+import './styles.css'
+
+import { Popover } from '@atawi/react-popover'
+import '@atawi/react-popover/dist/style.css'
 
 type Props = {
   onLogout: () => void
   onSelect: () => void
 }
 
 const MyAccount = ({ onLogout, onSelect }: Props) => {
+  const [openPopover, setOpenPopover] = useState(false)
   const { auth } = useContext(AuthContext)
 
   if (!auth) {
@@ -21,12 +26,69 @@ const MyAccount = ({ onLogout, onSelect }: Props) => {
 
   const { username, userId } = auth
 
+  const handleOnSelect = () => {
+    setOpenPopover(false)
+    onSelect()
+  }
+
   return (
     <Fragment>
       <span className='nav-link text-secondary'>
         Welcome, <b>{username}</b>
       </span>
-      <StyledNavDropdown title={<FaUser className='text-secondary' />}>
+      <Popover
+        trigger={
+          <div
+            className='profile-popover-trigger'
+            onClick={() => setOpenPopover(!openPopover)}
+          >
+            <FaUser className='text-secondary' />
+            <BiSolidChevronDown />
+          </div>
+        }
+        content={
+          <div className='profile-links-container'>
+            <NavDropdown.Item
+              onClick={handleOnSelect}
+              as={Link}
+              to={`/user/${userId}/profile`}
+            >
+              <FaUserEdit /> My profile
+            </NavDropdown.Item>
+            <NavDropdown.Item
+              onClick={handleOnSelect}
+              as={Link}
+              to={`/user/${userId}/events`}
+            >
+              <MdEventNote /> My events
+            </NavDropdown.Item>
+            <NavDropdown.Item
+              onClick={handleOnSelect}
+              as={Link}
+              to={`/user/${userId}/settings`}
+            >
+              <FiSettings /> Settings
+            </NavDropdown.Item>
+            <NavDropdown.Divider />
+            <NavDropdown.Item
+              onClick={() => {
+                onLogout()
+                setOpenPopover(false)
+              }}
+            >
+              Logout <FiLogOut />
+            </NavDropdown.Item>
+          </div>
+        }
+        className='profile-popover'
+        placement='bottom-end'
+        autoPlacement
+        animated
+        closeOnResize
+        open={openPopover}
+        onOpenChange={(open) => setOpenPopover(open)}
+      />
+      {/* <StyledNavDropdown title={<FaUser className='text-secondary' />}>
         <NavDropdown.Item
           onClick={onSelect}
           as={Link}
@@ -52,7 +114,7 @@ const MyAccount = ({ onLogout, onSelect }: Props) => {
         <NavDropdown.Item onClick={onLogout}>
           Logout <FiLogOut />
         </NavDropdown.Item>
-      </StyledNavDropdown>
+      </StyledNavDropdown> */}
     </Fragment>
   )
 }

diff --git a/src/pages/user/MyAccount/styles.css b/src/pages/user/MyAccount/styles.css
@@ -0,0 +1,21 @@
+.profile-popover {
+  z-index: 2000 !important;
+}
+
+.profile-links-container {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  .dropdown-item:hover {
+    text-decoration: underline;
+  }
+}
+
+.profile-popover-trigger {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding-left: 12px;
+}
diff --git a/src/pages/user/MyAccount/styles.ts b/src/pages/user/MyAccount/styles.ts
diff --git a/yarn.lock b/yarn.lock
@@ -210,6 +210,15 @@
   dependencies:
     node-fetch "^2.6.1"
 
+"@atawi/react-popover@^1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@atawi/react-popover/-/react-popover-1.0.4.tgz#3146f620bd9b38a1226cb0b16af85dce7c236e31"
+  integrity sha512-dyhOujcs3W33U7dBiPqA21UJ52kemv1zdDArqy67RFOFylDOzXpBf7KLQkWTrCJ/3kFy9ArWcgRSWKjo3efExg==
+  dependencies:
+    react "^18.3.1"
+    react-dom "^18.3.1"
+    react-router-dom "^6.22.1"
+
 "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.25.9", "@babel/code-frame@^7.26.0":
   version "7.26.2"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.26.2.tgz#4b5fab97d33338eff916235055f0ebc21e573a85"
@@ -1947,6 +1956,11 @@
   resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.20.0.tgz#03554155b45d8b529adf635b2f6ad1165d70d8b4"
   integrity sha512-mUnk8rPJBI9loFDZ+YzPGdeniYK+FTmRD1TMCz7ev2SNIozyKKpnGgsxO34u6Z4z/t0ITuu7voi/AshfsGsgFg==
 
+"@remix-run/router@1.21.0":
+  version "1.21.0"
+  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.21.0.tgz#c65ae4262bdcfe415dbd4f64ec87676e4a56e2b5"
+  integrity sha512-xfSkCAchbdG5PnbrKqFWwia4Bi61nH+wm8wLEqfHDyp7Y3dZzgqS2itV8i4gAq9pC2HsTpwyBC6Ds8VHZ96JlA==
+
 "@repeaterjs/repeater@^3.0.4", "@repeaterjs/repeater@^3.0.6":
   version "3.0.6"
   resolved "https://registry.yarnpkg.com/@repeaterjs/repeater/-/repeater-3.0.6.tgz#be23df0143ceec3c69f8b6c2517971a5578fdaa2"
@@ -7178,7 +7192,7 @@ react-darkreader@^1.5.6:
     darkreader "^4.9.26"
     react-switch "^6.0.0"
 
-react-dom@^18.2.0:
+react-dom@^18.2.0, react-dom@^18.3.1:
   version "18.3.1"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.3.1.tgz#c2265d79511b57d479b3dd3fdfa51536494c5cb4"
   integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==
@@ -7241,13 +7255,28 @@ react-router-dom@^6.10.0:
     "@remix-run/router" "1.20.0"
     react-router "6.27.0"
 
+react-router-dom@^6.22.1:
+  version "6.28.0"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.28.0.tgz#f73ebb3490e59ac9f299377062ad1d10a9f579e6"
+  integrity sha512-kQ7Unsl5YdyOltsPGl31zOjLrDv+m2VcIEcIHqYYD3Lp0UppLjrzcfJqDJwXxFw3TH/yvapbnUvPlAj7Kx5nbg==
+  dependencies:
+    "@remix-run/router" "1.21.0"
+    react-router "6.28.0"
+
 react-router@6.27.0, react-router@^6.26.2:
   version "6.27.0"
   resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.27.0.tgz#db292474926c814c996c0ff3ef0162d1f9f60ed4"
   integrity sha512-YA+HGZXz4jaAkVoYBE98VQl+nVzI+cVI2Oj/06F5ZM+0u3TgedN9Y9kmMRo2mnkSK2nCpNQn0DVob4HCsY/WLw==
   dependencies:
     "@remix-run/router" "1.20.0"
 
+react-router@6.28.0:
+  version "6.28.0"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.28.0.tgz#29247c86d7ba901d7e5a13aa79a96723c3e59d0d"
+  integrity sha512-HrYdIFqdrnhDw0PqG/AKjAqEqM7AvxCz0DQ4h2W8k6nqmc5uRBYDag0SBxx9iYz5G8gnuNVLzUe13wl9eAsXXg==
+  dependencies:
+    "@remix-run/router" "1.21.0"
+
 react-share@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/react-share/-/react-share-5.1.0.tgz#27eff763e5c233c8765cacf595b039093cb9b408"