Merge pull request #624 from us3r-network/F-updateSidebarLayout-shixu…

…ewen feat: add explore and login buttons to the sidebar
degencast · Mar 15, 2024 · 46642f8 · 46642f8
2 parents d2d57ea + 93c1e78
commit 46642f8
Show file tree

Hide file tree

Showing 9 changed files with 47 additions and 33 deletions.
diff --git a/apps/u3/src/components/layout/LoginButtonV2.tsx b/apps/u3/src/components/layout/LoginButtonV2.tsx
@@ -70,10 +70,7 @@ export default function LoginButtonV2() {
   if (!isLogin) {
     return (
       <ButtonWrapper onClick={login}>
-        <div className="flex items-center gap-4">
-          <LoginIcon />
-          <span className="max-sm:hidden">Login</span>
-        </div>
+        <LoginIcon className="w-[40px] h-[40px]" />
       </ButtonWrapper>
     );
   }
@@ -92,6 +89,7 @@ export default function LoginButtonV2() {
       <DropdownMenu open={openMenu} onOpenChange={setOpenMenu}>
         <DropdownMenuTrigger
           className="
+          w-full
           focus:outline-none focus:border-none
           active:outline-none active:border-none
         "
@@ -101,19 +99,15 @@ export default function LoginButtonV2() {
               setOpenMenu((pre) => !pre);
             }}
           >
-            <div className="flex items-center gap-4">
-              <UserAvatar style={{ width: '24px', height: '24px' }} />
-              <UserName className="max-sm:hidden" />
-            </div>
+            <UserAvatar style={{ width: '40px', height: '40px' }} />
           </ButtonWrapper>
         </DropdownMenuTrigger>
         <DropdownMenuContent
           className={cn(
             'inline-flex w-[280px] box-border p-[20px] flex-col items-start gap-[20px] rounded-[20px] border-[1px] border-solid border-[#39424C] bg-[#14171A]'
           )}
-          side="top"
-          align="center"
-          sideOffset={10}
+          side="right"
+          align="end"
         >
           <DropdownMenuItemWarper onClick={() => navigate('/u')}>
             <UserAvatar
@@ -220,9 +214,9 @@ function ButtonWrapper({ className, ...props }: ComponentPropsWithRef<'div'>) {
   return (
     <div
       className={cn(
-        `flex items-center justify-between
+        `w-full flex items-center justify-center
         text-white text-[16px] font-bold
-        sm:h-[76px] sm:w-full sm:p-[20px] box-border
+        p-[0px] box-border
         outline-none border-none`,
         className
       )}

diff --git a/apps/u3/src/components/layout/menu.tsx b/apps/u3/src/components/layout/menu.tsx
@@ -13,12 +13,15 @@ import { cn } from '@/lib/utils';
 import useAllJoinedCommunities from '@/hooks/community/useAllJoinedCommunities';
 import useBrowsingCommunity from '@/hooks/community/useBrowsingCommunity';
 import SidebarCommunityItem from '../community/SidebarCommunityItem';
+import ExploreIcon from './nav-icons/ExploreIcon';
+import useRoute from '@/route/useRoute';
+import { RouteKey } from '@/route/routes';
+import LoginButtonV2 from './LoginButtonV2';
 
 export default function Menu({
   className,
   ...props
 }: ComponentPropsWithRef<'div'>) {
-  const navigate = useNavigate();
   return (
     <div
       className={cn(
@@ -27,10 +30,7 @@ export default function Menu({
       )}
       {...props}
     >
-      <div
-        className="w-full flex flex-col items-center gap-[4px] cursor-pointer max-sm:hidden"
-        onClick={() => navigate('/')}
-      >
+      <div className="w-full flex flex-col items-center gap-[4px] cursor-pointer max-sm:hidden">
         <LogoIconBox>
           <LogoIconSvg />
         </LogoIconBox>
@@ -43,12 +43,44 @@ export default function Menu({
         </span>
       </div>
       <hr className="border-t border-[#39424C] my-4 w-full max-sm:hidden" />
-
+      <SidebarHomeLink />
       <UserCommunities />
+      <hr className="border-t border-[#39424C] my-4 w-full max-sm:hidden" />
+      <div className="w-full max-sm:hidden">
+        <LoginButtonV2 />
+      </div>
     </div>
   );
 }
 
+function SidebarHomeLink() {
+  const navigate = useNavigate();
+  const { firstRouteMeta } = useRoute();
+  const firstRouteKey = firstRouteMeta?.key;
+  const active = firstRouteKey === RouteKey.home;
+  return (
+    <a
+      href={'/'}
+      onClick={(e) => {
+        e.preventDefault();
+        navigate('/');
+      }}
+      className="w-full flex justify-center items-center cursor-pointer relative mb-[20px] max-sm:hidden"
+    >
+      <div
+        className={cn(
+          'w-[5px] h-[40px] rounded-tl-none rounded-br-[10px] rounded-tr-[10px] rounded-bl-none bg-[#FFF] absolute left-0',
+          'transition-all duration-300',
+          active ? 'block' : 'hidden'
+        )}
+      />
+      <div className="flex w-[39px] h-[39px] justify-center items-center gap-[10px] rounded-[10px] bg-[#F41F4C]">
+        <ExploreIcon active />
+      </div>
+    </a>
+  );
+}
+
 function UserCommunities() {
   const { joinedCommunities } = useAllJoinedCommunities();
   const { browsingCommunity } = useBrowsingCommunity();
@@ -63,7 +95,7 @@ function UserCommunities() {
   }
 
   return (
-    <div className="w-full overflow-scroll h-full flex gap-5 flex-col">
+    <div className="flex-1 w-full overflow-scroll flex gap-5 flex-col">
       {showCommunities.map((item) => (
         <SidebarCommunityItem
           key={item.id}

diff --git a/apps/u3/src/container/community/CommunityMenu.tsx b/apps/u3/src/container/community/CommunityMenu.tsx
@@ -3,7 +3,6 @@ import { useLocation } from 'react-router-dom';
 import { cn } from '@/lib/utils';
 import { CommunityInfo } from '@/services/community/types/community';
 import AddPost from '@/components/social/AddPost';
-import LoginButtonV2 from '@/components/layout/LoginButtonV2';
 import NavLinkItem from '@/components/layout/NavLinkItem';
 import CommunityBaseInfo from '@/components/community/CommunityBaseInfo';
 import getCommunityNavs from '@/utils/community/getCommunityNavs';
@@ -75,7 +74,6 @@ export default function CommunityMenu({
           })}
         </div>
       </div>
-      <LoginButtonV2 />
     </div>
   );
 }
diff --git a/apps/u3/src/container/community/CommunityMobileHeader.tsx b/apps/u3/src/container/community/CommunityMobileHeader.tsx
@@ -39,7 +39,7 @@ export default function CommunityMobileHeader({
         onValueChange={(href) => {
           navigate(href);
         }}
-        defaultValue={findHref}
+        value={findHref}
       >
         <SelectTrigger className="w-auto border-none rounded-[10px] bg-[#1B1E23] text-[#FFF] text-[14px] font-medium outline-none focus:outline-none focus:border-none">
           <svg

diff --git a/apps/u3/src/container/explore/ExploreMenu.tsx b/apps/u3/src/container/explore/ExploreMenu.tsx
@@ -1,7 +1,6 @@
 import { ComponentPropsWithRef } from 'react';
 import { useLocation } from 'react-router-dom';
 import { cn } from '@/lib/utils';
-import LoginButtonV2 from '@/components/layout/LoginButtonV2';
 import NavLinkItem from '@/components/layout/NavLinkItem';
 import AddPost from '@/components/social/AddPost';
 import DailyPosterBtn from '@/components/poster/DailyPosterBtn';
@@ -50,7 +49,6 @@ export default function ExploreMenu({
         {isPostsPath && <AddPost />}
         {isHomePath && <DailyPosterBtn {...dailyPosterLayoutData} />}
       </div>
-      <LoginButtonV2 />
     </div>
   );
 }
diff --git a/apps/u3/src/container/fav/FavMenu.tsx b/apps/u3/src/container/fav/FavMenu.tsx
@@ -1,7 +1,6 @@
 import { ComponentPropsWithRef } from 'react';
 import { useLocation, useParams } from 'react-router-dom';
 import { cn } from '@/lib/utils';
-import LoginButtonV2 from '@/components/layout/LoginButtonV2';
 import NavLinkItem from '@/components/layout/NavLinkItem';
 
 export default function FavMenu({
@@ -51,7 +50,6 @@ export default function FavMenu({
           </NavLinkItem> */}
         </div>
       </div>
-      <LoginButtonV2 />
     </div>
   );
 }
diff --git a/apps/u3/src/container/message/MessageMenu.tsx b/apps/u3/src/container/message/MessageMenu.tsx
@@ -1,6 +1,5 @@
 import { ComponentPropsWithRef, useEffect } from 'react';
 import { cn } from '@/lib/utils';
-import LoginButtonV2 from '@/components/layout/LoginButtonV2';
 import StartNewConversation from '@/components/message/StartNewConversation';
 import Conversations from '@/components/message/Conversations';
 import { MessageRoute, useXmtpClient } from '@/contexts/message/XmtpClientCtx';
@@ -49,7 +48,6 @@ export default function MessageMenu({
           })()}
         </div>
       </div>
-      <LoginButtonV2 />
     </div>
   );
 }
diff --git a/apps/u3/src/container/notification/NotificationMenu.tsx b/apps/u3/src/container/notification/NotificationMenu.tsx
@@ -1,7 +1,6 @@
 import { ComponentPropsWithRef } from 'react';
 import { useLocation } from 'react-router-dom';
 import { cn } from '@/lib/utils';
-import LoginButtonV2 from '@/components/layout/LoginButtonV2';
 import NavLinkItem from '@/components/layout/NavLinkItem';
 
 export default function NotificationMenu({
@@ -40,7 +39,6 @@ export default function NotificationMenu({
           </NavLinkItem> */}
         </div>
       </div>
-      <LoginButtonV2 />
     </div>
   );
 }
diff --git a/apps/u3/src/container/profile/ProfileMenu.tsx b/apps/u3/src/container/profile/ProfileMenu.tsx
@@ -1,7 +1,6 @@
 import { ComponentPropsWithRef } from 'react';
 import { useLocation, useParams } from 'react-router-dom';
 import { cn } from '@/lib/utils';
-import LoginButtonV2 from '@/components/layout/LoginButtonV2';
 import NavLinkItem from '@/components/layout/NavLinkItem';
 
 interface ProfileMenuProps extends ComponentPropsWithRef<'div'> {
@@ -70,7 +69,6 @@ export default function ProfileMenu({
           </NavLinkItem> */}
         </div>
       </div>
-      <LoginButtonV2 />
     </div>
   );
 }