Merge pull request #482 from us3r-network/F-channelInNav-ttang

feat: channel in nav

apps/u3/src/components/layout/menu.tsx

@@ -7,7 +7,7 @@
  */
 import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import LoginButton from './LoginButton';
 import Nav, { NavWrapper, PcNavItem, PcNavItemIconBox } from './Nav';
 import { ReactComponent as LogoIconSvg } from '../common/assets/imgs/logo-icon.svg';
@@ -16,6 +16,7 @@ import { ReactComponent as ContactUsSvg } from '../common/assets/svgs/contact-us
 import MessageModal from '../message/MessageModal';
 import { NavModalName, useNav } from '../../contexts/NavCtx';
 import ContactUsModal from './ContactUsModal';
+import { useFarcasterCtx } from '@/contexts/social/FarcasterCtx';
 
 export default function Menu() {
   const [isOpen, setIsOpen] = useState(false);
@@ -48,6 +49,15 @@ export default function Menu() {
       <NavListBox>
         <Nav onlyIcon={!isOpen} />
       </NavListBox>
+
+      <hr className="border-t border-[#39424C] my-4 w-full" />
+
+      <UserChannels />
+
+      <hr className="border-t border-[#39424C] my-4 w-full" />
+
+      <div className="flex-grow" />
+
       <FooterBox>
         <NavWrapper>
           <MessageButton />
@@ -60,6 +70,50 @@ export default function Menu() {
     </MenuWrapper>
   );
 }
+
+function UserChannels() {
+  const { userChannels, currFid } = useFarcasterCtx();
+
+  if (!currFid) return null;
+  console.log('userChannels', userChannels);
+  return (
+    <div className="w-full overflow-scroll h-full flex gap-5 flex-col">
+      {userChannels.map(({ parent_url }) => (
+        <ChannelItem parent_url={parent_url} key={parent_url} />
+      ))}
+    </div>
+  );
+}
+
+function ChannelItem({ parent_url }: { parent_url: string }) {
+  const { getChannelFromUrl } = useFarcasterCtx();
+  const navigate = useNavigate();
+
+  const item = useMemo(() => {
+    return getChannelFromUrl(parent_url);
+  }, [parent_url, getChannelFromUrl]);
+
+  if (!item) return null;
+
+  return (
+    <div
+      onClick={() => {
+        navigate(`/social/channel/${item.channel_id}`);
+      }}
+      className="cursor-pointer relative"
+    >
+      <div className="flex items-center gap-3">
+        <img
+          src={item.image}
+          alt={item.name}
+          className="rounded-md w-[40px] h-[40px]"
+        />
+        <div className="text-white font-bold">{item.name}</div>
+      </div>
+    </div>
+  );
+}
+
 function ContactUsButton() {
   const { openContactUsModal, renderNavItemText, switchNavModal } = useNav();
 
@@ -117,7 +171,6 @@ const MenuWrapper = styled.div<{ isOpen: boolean }>`
   display: flex;
   flex-direction: column;
   gap: 20;
-  justify-content: space-between;
   align-items: flex-start;
 `;
 const LogoBox = styled.div<{ onlyIcon?: boolean }>`