client: avatar menu for mobile

client/src/components/AvatarMenu.jsx

@@ -0,0 +1,57 @@
+import { Link } from 'react-router-dom'
+import { useAnimStore } from '../store/useAnimStore'
+import { useEffect, useRef, useState } from 'react'
+import { useAuthStore } from '../store/useAuthStore'
+
+export default function AvatarMenu() {
+ const { avatarMenu, setAvatarMenu, closeAvatar } = useAnimStore()
+ const { setUser, setVerifySuccess } = useAuthStore();
+ const [animClass, setAnimClass] = useState('')
+ const [width, setWidth] = useState(null)
+ const menuRef = useRef(null)
+ const linkRef = useRef(null)
+
+ function handleLogoutButton() {
+ setUser(null);
+ setVerifySuccess(false);
+ localStorage.removeItem('login_token');
+ setAnimClass('normal')
+ closeAvatar()
+ setAvatarMenu(false)
+ }
+ useEffect(() => {
+ const updateDimensions = () => {
+ setWidth(window.innerWidth)
+ if (width > 650) {
+ handleLogoutButton()
+ }
+ }
+ window.addEventListener('resize', updateDimensions)
+ return () => {
+ window.removeEventListener('resize', updateDimensions)
+ }
+ }, [width])
+
+ useEffect(() => {
+ if (avatarMenu) setAnimClass('active')
+ else setAnimClass('normal')
+ }, [avatarMenu])
+
+ return (
+ <div ref={menuRef} className={`mobile-menu-container ${animClass}`}>
+ <div ref={linkRef} className={`mobile-menu-links ${animClass}`}>
+ <Link className='mobile-menu-link'>
+ Profile
+ </Link>
+ <button
+ onClick={() => {
+ handleLogoutButton()
+ }}
+ className='mobile-menu-close-btn'
+ >
+ Logout
+ </button>
+ </div>
+ </div>
+ )
+}

client/src/components/Container.jsx

@@ -2,12 +2,13 @@ import { Navbar } from './Navbar'
 import { useLocation } from 'react-router-dom'
 import { Toaster } from 'sonner'
 import MobileMenu from './MobileMenu'
+import AvatarMenu from './AvatarMenu'
 import { useAnimStore } from '../store/useAnimStore'
 import { navData } from '../utils/navbar'
 
 const Container = ({ children }) => {
  const location = useLocation()
- const { menuPopup } = useAnimStore()
+ const { menuPopup, avatarPopup } = useAnimStore()
 
  return (
  <>
@@ -18,6 +19,7 @@ const Container = ({ children }) => {
  <div className='w-full h-full fixed -z-10 top-0 left-0 right-0 bg-gradient-to-b from-[#FFBC39] to-[#FFF]' />
  <div>{children}</div>
  {menuPopup && <MobileMenu menuLinks={navData} />}
+ {avatarPopup && <AvatarMenu />}
  </div>
  </>
  )

client/src/components/Navbar.jsx

@@ -10,9 +10,17 @@ import 'react-loading-skeleton/dist/skeleton.css'
 export const Navbar = () => {
  const { width } = useWindowDimension();
  const { verifyLoading, verifySuccess, user } = useAuthStore()
- const { menuPopup, mobileMenu, setMobileMenu, closeMenu, openMenu, toggleDisable } = useAnimStore()
+ const {
+ menuPopup,
+ mobileMenu, setMobileMenu,
+ openMenu, closeMenu,
+ toggleDisable,
+ avatarPopup,
+ avatarMenu, setAvatarMenu,
+ openAvatar, closeAvatar
+ } = useAnimStore()
 
- function handleToggle() {
+ function handleMenuToggle() {
  if (mobileMenu) {
  closeMenu()
  } else {
@@ -21,16 +29,25 @@ export const Navbar = () => {
  setMobileMenu(!mobileMenu)
  }
 
+ function handleAvatarToggle() {
+ if (avatarMenu) {
+ closeAvatar()
+ } else {
+ openAvatar()
+ }
+ setAvatarMenu(!avatarMenu)
+ }
+
  useEffect(() => {
- if (width <= 640) {
- if (menuPopup) document.body.style.overflow = "hidden";
- else document.body.style.overflow = "";
+ if (width <= 640 && (menuPopup || avatarPopup)) {
+ document.body.style.overflow = "hidden";
  }
  else {
  document.body.style.overflow = "";
  closeMenu();
+ closeAvatar();
  }
- }, [width, menuPopup]);
+ }, [width, menuPopup, avatarPopup])
 
  return (
  <div className='Navbar-container'>
@@ -56,7 +73,10 @@ export const Navbar = () => {
  Sign in
  </Link>
  ) : (!verifyLoading && verifySuccess) && (
- <div className='w-[40px] h-[40px] rounded-full border border-[#3c82f6] bg-white overflow-hidden'>
+ <div
+ className='w-[40px] h-[40px] rounded-full border border-[#3c82f6] bg-white overflow-hidden cursor-pointer'
+ onClick={() => handleAvatarToggle()}
+ >
  <img
  src={user?.avatar?.url ? user.avatar.url : '/user.svg'}
  className='w-full h-full object-contain'
@@ -67,7 +87,7 @@ export const Navbar = () => {
  <button
  disabled={toggleDisable}
  className='Navbar-menu-toggler'
- onClick={() => handleToggle()}
+ onClick={() => handleMenuToggle()}
  >
  <div
  className={`Navbar-menu-bar-container ${mobileMenu && 'active'}`}

client/src/store/useAnimStore.js

@@ -2,10 +2,11 @@ import { create } from 'zustand'
 
 export const useAnimStore = create(set => ({
  toggleDisable: false,
- 
+
  mobileMenu: false,
  setMobileMenu: verifyState => {
  set({ mobileMenu: verifyState })
+ set({ avatarMenu: false })
  set({ toggleDisable: true })
  setTimeout(() => {
  set({ toggleDisable: false })
@@ -14,6 +15,8 @@ export const useAnimStore = create(set => ({
 
  menuPopup: false,
  openMenu: () => {
+ set({ avatarPopup: false })
+ set({ avatarMenu: false })
  set({ menuPopup: true })
  set({ mobileMenu: true })
  },
@@ -22,7 +25,31 @@ export const useAnimStore = create(set => ({
  setTimeout(() => {
  set({ menuPopup: false })
  set({ mobileMenu: false })
+ set({ avatarPopup: false })
+ set({ avatarMenu: false })
  set({ toggleDisable: false })
  }, 1000)
- }
+ },
+
+ avatarMenu: false,
+ setAvatarMenu: verifyState => {
+ set({ avatarMenu: verifyState })
+ set({ mobileMenu: false })
+ },
+
+ avatarPopup: false,
+ openAvatar: () => {
+ set({ menuPopup: false })
+ set({ mobileMenu: false })
+ set({ avatarPopup: true })
+ set({ avatarMenu: true })
+ },
+ closeAvatar: () => {
+ setTimeout(() => {
+ set({ menuPopup: false })
+ set({ mobileMenu: false })
+ set({ avatarPopup: false })
+ set({ avatarMenu: false })
+ }, 1000)
+ },
 }))