chore: minor changes

src/components/AllBooks.tsx

@@ -63,8 +63,6 @@ export function AllBooks() {
     );
   }
 
-  // console.log(data.pages[0].info.totalBooks);
-
   return (
     <>
       <Flex

src/components/nav/DesktopNav.tsx

@@ -35,6 +35,22 @@ export function DesktopNav() {
         uid={currentUser.uid}
       />
     );
+  } else {
+    profileMenu = accountLinks.map(({ name, href }) => (
+      <Link
+        key={name}
+        as={NavLink}
+        to={href as string}
+        border='1px'
+        borderColor='green.500'
+        p='7px'
+        rounded='md'
+        ml='3'
+        _hover={{ bg: 'green.600', outline: 'none' }}
+      >
+        {name}
+      </Link>
+    ));
   }
 
   return (
@@ -92,37 +108,6 @@ export function DesktopNav() {
             <List display='flex' alignItems='center'>
               <InputSearch width='300px' top='47px' onOpen={onOpen} />
               <ModalFilter isOpen={isOpen} onClose={onClose} />
-              {/* {user ? (
-                <Link
-                  as={NavLink}
-                  to='/profile'
-                  ml='7'
-                  fontWeight='medium'
-                  _activeLink={{
-                    borderBottom: '2px',
-                    borderColor: 'green.500',
-                  }}
-                  _hover={{ color: 'green.500' }}
-                >
-                  Perfil
-                </Link>
-              ) : (
-                accountLinks.map(({ name, href }) => (
-                  <Link
-                    key={name}
-                    as={NavLink}
-                    to={href as string}
-                    border='1px'
-                    borderColor='green.500'
-                    p='2'
-                    rounded='lg'
-                    mx='2'
-                    _hover={{ bg: 'green.600', outline: 'none' }}
-                  >
-                    {name}
-                  </Link>
-                ))
-              )} */}
               {profileMenu}
               <Button
                 onClick={toggleColorMode}

src/components/nav/MobileNav.tsx

@@ -21,13 +21,17 @@ import {
   DrawerCloseButton,
   DrawerBody,
   useOutsideClick,
+  DrawerFooter,
 } from '@chakra-ui/react';
 
 import { navLink, accountLinks } from '../../data/links';
 import { InputSearch } from '../forms/filters/InputSearch';
 import { ModalFilter } from '../forms/filters/ModalFilter';
+import { MenuProfile } from '../../components/nav/menu/MenuProfile';
+import { useAuth } from '../../store/AuthContext';
 
 export function MobileNav() {
+  const { currentUser } = useAuth();
   const containerRef = useRef<HTMLDivElement>(null);
   const { colorMode, toggleColorMode } = useColorMode();
   const {
@@ -48,6 +52,7 @@ export function MobileNav() {
   const bgDrawer = useColorModeValue('#ffffffe0', '#121212e4');
   // const bgDrawerSearch = useColorModeValue('#ffffff', '#000000e3');
   const bgNavColor = useColorModeValue('#ffffff8b', '#12121244');
+  let profileMenu;
 
   useOutsideClick({
     ref: containerRef,
@@ -56,6 +61,16 @@ export function MobileNav() {
     },
   });
 
+  if (currentUser) {
+    profileMenu = (
+      <MenuProfile
+        displayName={currentUser.displayName}
+        photoURL={currentUser.photoURL}
+        uid={currentUser.uid}
+      />
+    );
+  }
+
   return (
     <>
       <Flex
@@ -78,7 +93,6 @@ export function MobileNav() {
               onClick={onOpenMenu}
               aria-label='Open Menu'
               bg='none'
-              ml='2'
               _hover={{ bg: 'none', color: 'green.500' }}
               _active={{ bg: 'none' }}
             >
@@ -113,7 +127,6 @@ export function MobileNav() {
             <Button
               onClick={toggleColorMode}
               bg='none'
-              mr='2'
               _active={{ bg: 'none' }}
               _hover={{ color: 'green.500' }}
             >
@@ -123,6 +136,7 @@ export function MobileNav() {
                 <RiMoonLine size='18' />
               )}
             </Button>
+            {profileMenu}
           </Flex>
         </Flex>
         <Drawer placement='top' isOpen={isOpenSearch} onClose={onCloseSearch}>
@@ -180,13 +194,18 @@ export function MobileNav() {
                 ))}
               </List>
             </DrawerBody>
-            {/* <DrawerFooter justifyContent='flex-start' borderTopWidth='1px'>
+            <DrawerFooter
+              justifyContent='flex-start'
+              flexDirection='column'
+              borderTopWidth='1px'
+            >
               <List w='full'>
-                {accountLinks.map(({ name, href }) => (
+                {accountLinks.map(({ icon, name, href }) => (
                   <ListItem key={name} my='2'>
                     <Link
-                      display='block'
-                      onClick={onToggle}
+                      display='flex'
+                      alignItems='center'
+                      onClick={onCloseMenu}
                       as={NavLink}
                       to={href as string}
                       p='3'
@@ -198,12 +217,16 @@ export function MobileNav() {
                         color: 'green.500',
                       }}
                     >
+                      <Icon as={icon} boxSize='5' mr='5' />
                       {name}
                     </Link>
                   </ListItem>
                 ))}
               </List>
-            </DrawerFooter> */}
+              <Box fontSize='xs' my='1'>
+                XBuniverse 2023
+              </Box>
+            </DrawerFooter>
           </DrawerContent>
         </Drawer>
       </Flex>

src/components/nav/menu/MenuProfile.tsx

@@ -12,50 +12,57 @@ import {
   MenuDivider,
   Image,
 } from '@chakra-ui/react';
-import { FaRegUserCircle } from 'react-icons/fa';
-import { FaPowerOff } from 'react-icons/fa6';
-import { logOut } from '../../../services/firebase/auth';
 
-interface MenuType {
-  displayName: string | null;
-  photoURL: string | null;
-  uid: string;
-}
+import { logOut } from '../../../services/firebase/auth';
+import { MenuType } from '../../../components/types';
 
 export function MenuProfile({ displayName, photoURL, uid }: MenuType) {
   const navigate = useNavigate();
   const colorBorder = useColorModeValue('black', 'white');
 
   return (
     <Menu isLazy>
-      <Button background='none' p='0' _hover={{ background: 'none' }} ml='4'>
+      <Button
+        background='none'
+        p='0'
+        _hover={{ background: 'none' }}
+        ml={{ base: '2px', md: 4 }}
+        mr={{ base: 2, md: 0 }}
+      >
         <MenuButton
           as={Box}
           borderRadius='full'
           _hover={{ border: `2px solid  ${colorBorder}` }}
         >
           <Image
             src={photoURL as string}
-            w='35px'
-            h='35px'
+            w={{ base: '25px', md: '35px' }}
+            h={{ base: '25px', md: '35px' }}
             borderRadius='full'
           />
         </MenuButton>
       </Button>
-      <MenuList>
+      <MenuList w='250px'>
         <MenuGroup
           title={displayName as string}
           fontSize='md'
           textAlign='center'
         >
+          <MenuDivider />
           <MenuItem
             as={NavLink}
             to={`/profile/${uid}`}
-            icon={<FaRegUserCircle size='15px' />}
             _hover={{ textDecoration: 'none' }}
           >
             Perfil
           </MenuItem>
+          <MenuItem
+            as={NavLink}
+            to='/new-post'
+            _hover={{ textDecoration: 'none' }}
+          >
+            Crear Publicación
+          </MenuItem>
         </MenuGroup>
         <MenuDivider />
         <MenuGroup>
@@ -66,7 +73,6 @@ export function MenuProfile({ displayName, photoURL, uid }: MenuType) {
             fontWeight='normal'
             borderRadius='0'
             justifyContent='left'
-            icon={<FaPowerOff size='15px' />}
             onClick={() => {
               logOut();
               navigate('/', { replace: true });

src/components/types.d.ts

@@ -150,6 +150,12 @@ interface AboutType {
   description: string;
 }
 
+interface MenuType {
+  displayName: string | null;
+  photoURL: string | null;
+  uid: string;
+}
+
 export type {
   AboutType,
   LinkType,
@@ -171,4 +177,5 @@ export type {
   MyLinkType,
   CatchErrorType,
   SkeletonType,
+  MenuType,
 };

src/data/links.ts

@@ -1,18 +1,17 @@
 import { GrHome } from 'react-icons/gr';
 import { MdOutlineExplore } from 'react-icons/md';
-import { AiOutlineCloudUpload } from 'react-icons/ai';
+import { RiAccountCircleLine } from 'react-icons/ri';
 
 import { AboutType, LinkType, SelectBooksType } from '../components/types';
 
 const navLink: Array<LinkType> = [
   { name: 'Inicio', href: '/', icon: GrHome },
   { name: 'Explorar', href: 'explore', icon: MdOutlineExplore },
-  { name: 'Publicar', href: 'new-post', icon: AiOutlineCloudUpload },
 ];
 
 const accountLinks: Array<LinkType> = [
-  { name: 'Ingresar', href: 'login' },
-  { name: 'Crear cuenta', href: 'register' },
+  // { name: 'Ingresar', href: 'login' },
+  { name: 'Crear cuenta', href: 'register', icon: RiAccountCircleLine },
 ];
 
 const languages: Array<SelectBooksType> = [