Merge pull request #120 from BacPacNet/feat-mobile-view-UI

fix: left and side navbar WIP
BacPacNet · Dec 11, 2024 · 7f1cb93 · 7f1cb93
2 parents 8e4c19d + 031414d
commit 7f1cb93
Show file tree

Hide file tree

Showing 12 changed files with 298 additions and 73 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -21,6 +21,12 @@
   display: none;
 }
 
+@media only screen and (max-width: 769px) {
+  .hideScrollbar::-webkit-scrollbar {
+    display: block;
+  }
+}
+
 body {
   color: rgb(var(--foreground-rgb));
   background: white;

diff --git a/src/components/atoms/LogoNavbar/index.tsx b/src/components/atoms/LogoNavbar/index.tsx
@@ -23,6 +23,9 @@ import NotificationBox from '@/components/molecules/Notification'
 import MessageNotification from '@/components/molecules/MessageNotification'
 import { useGetMessageNotification, useGetNotification } from '@/services/notification'
 import useCookie from '@/hooks/useCookie'
+import { IoMenu } from 'react-icons/io5'
+import { RxCross2 } from 'react-icons/rx'
+import MobileLeftNavbar from '@/components/molecules/MobileLeftNavbar'
 
 interface Props {
   showOnlyLogo?: boolean
@@ -44,6 +47,8 @@ export default function LogoNavbar({ showOnlyLogo = false }: Props) {
   const isUserLoggedIn = useCallback(() => {
     setIsLogin(!!userProfileData.users_id)
   }, [userProfileData])
+  const [showLeftNavbar, setShowLeftNavbar] = useState(false)
+  const [showRightMenu, setShowRightMenu] = useState(false)
 
   const handleLogout = () => {
     deleteCookie()
@@ -55,6 +60,14 @@ export default function LogoNavbar({ showOnlyLogo = false }: Props) {
     isUserLoggedIn()
   }, [userProfileData, isUserLoggedIn])
 
+  const toggleRightMenu = () => {
+    setShowRightMenu(!showRightMenu)
+    closeLeftNavbar()
+  }
+  const closeRightMenu = () => {
+    setShowRightMenu(false)
+  }
+
   const renderProfile = () => {
     switch (isLogin) {
       case true:
@@ -161,47 +174,60 @@ export default function LogoNavbar({ showOnlyLogo = false }: Props) {
         return <Skeleton className="bg-slate-400 p-2 h-10 w-10 rounded-full ml-4" />
     }
   }
+  const toggleLeftNavbar = () => {
+    setShowLeftNavbar(!showLeftNavbar)
+    closeRightMenu()
+  }
+  const closeLeftNavbar = () => {
+    setShowLeftNavbar(false)
+  }
 
   return (
-    <div className="w-full h-[68px] ">
-      <div className="fixed w-full top-0 left-0 z-50">
-        <div
-          className={`${
-            shouldPadding ? 'px-4 lg:px-28' : 'px-4'
-          } w-ful w-full h-[68px]  mx-auto py-3 flex items-center justify-between bg-white fixed top-0 border-b-[1px] border-neutral-200`}
-        >
-          <div>
-            <Link className="flex gap-4 center-v" href="/">
-              <Image src={unibuzzLogo} alt="BACPAC LOGO" width={84} height={21} className="h-full cursor-pointer" />
-            </Link>
-          </div>
-          <MobileViewNavbar />
-          {!showOnlyLogo && (
-            <div className="items-center justify-between hidden lg:flex ">
-              <div className="flex gap-16 px-8">
-                {MENU_LIST.map((menu, index) => {
-                  if (menu.name === 'UPGRADE') {
+    <>
+      <div className="w-full h-[68px] ">
+        <div className="fixed w-full top-0 left-0 z-50">
+          <div
+            className={`${
+              shouldPadding ? 'px-4 lg:px-28' : 'px-4'
+            } w-ful w-full h-[68px]  mx-auto py-3 flex items-center justify-between bg-white fixed top-0 border-b-[1px] border-neutral-200`}
+          >
+            <div className="flex gap-3 items-center">
+              <div onClick={toggleLeftNavbar} className="block lg:hidden cursor-pointer">
+                {!showLeftNavbar ? <IoMenu size={32} className="text-primary" /> : <RxCross2 size={32} className="text-primary" />}
+              </div>
+              <Link className="flex gap-4 center-v" href="/">
+                <Image src={unibuzzLogo} alt="BACPAC LOGO" width={84} height={21} className="h-full cursor-pointer" />
+              </Link>
+            </div>
+            {isLogin && <MobileViewNavbar closeLeftNavbar={closeLeftNavbar} toggleRightMenu={toggleRightMenu} showRightMenu={showRightMenu} />}
+            {!showOnlyLogo && (
+              <div className="items-center justify-between hidden lg:flex">
+                <div className="flex gap-16 px-8">
+                  {MENU_LIST.map((menu, index) => {
+                    if (menu.name === 'UPGRADE') {
+                      return (
+                        <div key={index} className="flex">
+                          <Link className="text-primary-500 text-xs" href={menu.path}>
+                            {menu.name}
+                          </Link>
+                          <Image className="ml-1" src={sparkles} alt="upgrade_icon" width={20} height={20} />
+                        </div>
+                      )
+                    }
                     return (
-                      <div key={index} className="flex">
-                        <Link className="text-primary-500 text-xs" href={menu.path}>
-                          {menu.name}
-                        </Link>
-                        <Image className="ml-1" src={sparkles} alt="upgrade_icon" width={20} height={20} />
-                      </div>
+                      <Link key={index} className="text-neutral-800 text-xs" href={menu.path}>
+                        {menu.name}
+                      </Link>
                     )
-                  }
-                  return (
-                    <Link key={index} className="text-neutral-800 text-xs" href={menu.path}>
-                      {menu.name}
-                    </Link>
-                  )
-                })}
+                  })}
+                </div>
+                <div className=" flex border-l-[1px] border-neutral-200">{renderProfile()}</div>
               </div>
-              <div className=" flex border-l-[1px] border-neutral-200">{renderProfile()}</div>
-            </div>
-          )}
+            )}
+          </div>
         </div>
       </div>
-    </div>
+      <MobileLeftNavbar toggleLeftNavbar={toggleLeftNavbar} isOpen={showLeftNavbar} />
+    </>
   )
 }
diff --git a/src/components/atoms/SubText/index.tsx b/src/components/atoms/SubText/index.tsx
@@ -6,7 +6,7 @@ interface TitleProps extends HTMLAttributes<HTMLHeadingElement> {
 
 export default function SubText({ children, className = '', ...rest }: TitleProps) {
   return (
-    <p className={`lg:text-2xs text-xs font-normal text-neutral-500 font-inter ${className}`} {...rest}>
+    <p className={`text-2xs font-normal text-neutral-500 font-inter ${className}`} {...rest}>
       {children}
     </p>
   )

diff --git a/src/components/atoms/Tooltip/index.tsx b/src/components/atoms/Tooltip/index.tsx
@@ -0,0 +1,23 @@
+import React, { ReactNode, useState } from 'react'
+
+interface TooltipProps {
+  text: string // The text to display in the tooltip
+  children: ReactNode // The element that triggers the tooltip
+}
+
+const Tooltip: React.FC<TooltipProps> = ({ text, children }) => {
+  const [isVisible, setIsVisible] = useState<boolean>(false)
+
+  return (
+    <div className="relative inline-block" onMouseEnter={() => setIsVisible(true)} onMouseLeave={() => setIsVisible(false)}>
+      {children}
+      {isVisible && (
+        <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-max bg-slate-600 text-white text-[8px] px-3 py-1 rounded shadow-lg z-50">
+          {text}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default Tooltip
diff --git a/src/components/communityUniversity/GroupSelectors.tsx b/src/components/communityUniversity/GroupSelectors.tsx
@@ -13,11 +13,13 @@ const GroupSelectors = ({
   SetcurrClickedID,
   selectCommunityId,
   handleAssignUsersModal,
+  toggleLeftNavbar,
 }: any) => {
   const router = useRouter()
   const handleGroupNavigate = () => {
     setCurrSelectedGroup(data)
     router.push(`/community/${selectCommunityId}/${data?._id}`)
+    toggleLeftNavbar()
   }
   const isSelected = selectedCommuntyGroupdId === data?._id
 

diff --git a/src/components/molecules/MobileLeftNavbar/index.tsx b/src/components/molecules/MobileLeftNavbar/index.tsx
@@ -0,0 +1,18 @@
+import LeftNavbar from '@/components/organisms/LeftNavbar'
+
+interface Props {
+  isOpen: boolean
+  toggleLeftNavbar: () => void
+}
+
+export default function MobileLeftNavbar({ isOpen, toggleLeftNavbar }: Props) {
+  return (
+    <div
+      className={`fixed top-[68px] left-0 z-50 h-full w-3/4 md:w-1/2 bg-white transition-transform duration-300 transform ${
+        isOpen ? 'translate-x-0' : '-translate-x-full'
+      } lg:hidden`}
+    >
+      <LeftNavbar toggleLeftNavbar={toggleLeftNavbar} />
+    </div>
+  )
+}
diff --git a/src/components/molecules/NavbarUniversityItem/Tabs/communityGroupAll.tsx b/src/components/molecules/NavbarUniversityItem/Tabs/communityGroupAll.tsx
@@ -24,6 +24,7 @@ function CommunityGroupAll({
   isCommunityGroupsLoading,
   selectCommunityId,
   handleAssignUsersModal,
+  toggleLeftNavbar,
 }: any) {
   if (isCommunityGroupsLoading || communityGroups === 'undefined') return <UserListItemSkeleton className="px-4" />
   if (communityGroups?.length === 0) return <p className="text-center text-neutral-500"> No Groups Available</p>
@@ -43,6 +44,7 @@ function CommunityGroupAll({
             SetcurrClickedID={SetcurrClickedID}
             selectedCommuntyGroupdId={selectedCommuntyGroupdId}
             selectCommunityId={selectCommunityId}
+            toggleLeftNavbar={toggleLeftNavbar}
           />
         ))}
       {communityGroups?.length > showGroupTill && (

diff --git a/src/components/molecules/NavbarUniversityItem/index.tsx b/src/components/molecules/NavbarUniversityItem/index.tsx
@@ -17,8 +17,13 @@ import { openModal } from '../Modal/ModalManager'
 import CommunityGroupFilterComponent from '../CommunityGroupFilter'
 import Buttons from '@/components/atoms/Buttons'
 
-export default function NavbarUniversityItem({ setActiveMenu }: any) {
-  const { userData, userProfileData } = useUniStore()
+interface Props {
+  setActiveMenu: (activeMenu: string) => void
+  toggleLeftNavbar: () => void | null
+}
+
+export default function NavbarUniversityItem({ setActiveMenu, toggleLeftNavbar }: Props) {
+  const { userData } = useUniStore()
   const router = useRouter()
   const { communityId, groupId: communityGroupId }: { communityId: string; groupId: string } = useParams()
   const [currSelectedGroup, setCurrSelectedGroup] = useState<Community>()
@@ -36,6 +41,7 @@ export default function NavbarUniversityItem({ setActiveMenu }: any) {
     handleUniversityClick(index)
     setCurrSelectedGroup(community)
     setActiveMenu('')
+    toggleLeftNavbar()
   }
 
   const handleNewGroupModal = () => {
@@ -105,6 +111,7 @@ export default function NavbarUniversityItem({ setActiveMenu }: any) {
           SetcurrClickedID={SetcurrClickedID}
           selectedCommuntyGroupdId={selectedCommuntyGroupdId}
           selectCommunityId={selectCommunityId}
+          toggleLeftNavbar={toggleLeftNavbar}
         />
       ),
     },
@@ -123,6 +130,7 @@ export default function NavbarUniversityItem({ setActiveMenu }: any) {
           SetcurrClickedID={SetcurrClickedID}
           selectedCommuntyGroupdId={selectedCommuntyGroupdId}
           selectCommunityId={selectCommunityId}
+          toggleLeftNavbar={toggleLeftNavbar}
         />
       ),
     },
@@ -142,6 +150,7 @@ export default function NavbarUniversityItem({ setActiveMenu }: any) {
             SetcurrClickedID={SetcurrClickedID}
             selectedCommuntyGroupdId={selectedCommuntyGroupdId}
             selectCommunityId={selectCommunityId}
+            toggleLeftNavbar={toggleLeftNavbar}
           />
 
           <div className="flex justify-center items-center p-2">

diff --git a/src/components/organism/Login/LoginBox.tsx b/src/components/organism/Login/LoginBox.tsx
@@ -54,8 +54,8 @@ const LoginBox = () => {
   }, [isSuccess])
 
   return (
-    <div className="flex flex-col w-1/3 max-lg:w-1/2 max-md:w-2/3 max-sm:w-11/12">
-      <div className="flex flex-col gap-8 border border-neutral-300  py-9 px-6 rounded-xl bg-white drop-shadow-md">
+    <div className="flex flex-col  max-lg:w-1/2 max-md:w-2/3 max-sm:w-11/12">
+      <div className="flex flex-col gap-8 border border-neutral-300 py-4 px-6  rounded-xl bg-white drop-shadow-md">
         <img className="w-14 h-14" src={logo.src} alt="lgog" />
         <div>
           <Title>Login to your account</Title>