Profile icon position

components/layout/sidebar/WebSidebar.tsx

@@ -1,14 +1,17 @@
 "use client";
 
 import { usePathname } from "next/navigation";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { Tooltip as ReactTooltip } from "react-tooltip";
 import { useIdentity } from "../../../hooks/useIdentity";
+import { useAuth } from "../../auth/Auth";
 import { useSeizeConnectContext } from "../../auth/SeizeConnectContext";
 import HeaderShare from "../../header/share/HeaderShare";
 import WebSidebarHeader from "./WebSidebarHeader";
 import WebSidebarNav from "./WebSidebarNav";
+import WebSidebarNavItem from "./nav/WebSidebarNavItem";
 import WebSidebarUser from "./WebSidebarUser";
+import { UserIcon } from "@heroicons/react/24/outline";
 
 interface WebSidebarProps {
   readonly isCollapsed: boolean;
@@ -32,10 +35,16 @@ function WebSidebar({
   const navRef = useRef<{ closeSubmenu: () => void }>(null);
   const pathname = usePathname();
   const { address } = useSeizeConnectContext();
+  const { connectedProfile } = useAuth();
   const { profile } = useIdentity({
     handleOrWallet: address || "",
     initialProfile: null,
   });
+  const profilePath = useMemo(() => {
+    if (connectedProfile?.handle) return `/${connectedProfile.handle}`;
+    if (address) return `/${address}`;
+    return null;
+  }, [connectedProfile?.handle, address]);
 
   const [isTouchScreen, setIsTouchScreen] = useState(false);
   useEffect(() => {
@@ -166,6 +175,19 @@ function WebSidebar({
                 <WebSidebarNav ref={navRef} isCollapsed={shouldShowCollapsed} />
               </div>
 
+              {profilePath && (
+                <div className="tw-px-3 tw-pt-2">
+                  <WebSidebarNavItem
+                    href={profilePath}
+                    icon={UserIcon}
+                    iconSizeClass="tw-h-6 tw-w-6"
+                    active={pathname === profilePath}
+                    collapsed={shouldShowCollapsed}
+                    label="Profile"
+                  />
+                </div>
+              )}
+
               <HeaderShare isCollapsed={shouldShowCollapsed} />
 
               <WebSidebarUser

components/layout/sidebar/WebSidebarNav.tsx

@@ -2,7 +2,6 @@
 
 import { useAppWallets } from "@/components/app-wallets/AppWalletsContext";
 import { useAuth } from "@/components/auth/Auth";
-import { useSeizeConnectContext } from "@/components/auth/SeizeConnectContext";
 import BellIcon from "@/components/common/icons/BellIcon";
 import ChatBubbleIcon from "@/components/common/icons/ChatBubbleIcon";
 import DiscoverIcon from "@/components/common/icons/DiscoverIcon";
@@ -16,7 +15,7 @@ import useCapacitor from "@/hooks/useCapacitor";
 import { useSectionMap, useSidebarSections } from "@/hooks/useSidebarSections";
 import { useUnreadIndicator } from "@/hooks/useUnreadIndicator";
 import { useUnreadNotifications } from "@/hooks/useUnreadNotifications";
-import { MagnifyingGlassIcon, UserIcon } from "@heroicons/react/24/outline";
+import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 import { usePathname } from "next/navigation";
 import React, {
   useCallback,
@@ -41,7 +40,6 @@ const WebSidebarNav = React.forwardRef<
   const pathname = usePathname();
   const capacitor = useCapacitor();
   const { country } = useCookieConsent();
-  const { address } = useSeizeConnectContext();
   const { connectedProfile } = useAuth();
   const { appWalletsSupported } = useAppWallets();
   const { haveUnreadNotifications } = useUnreadNotifications(
@@ -68,12 +66,6 @@ const WebSidebarNav = React.forwardRef<
     { event: "keydown" }
   );
 
-  const profilePath = useMemo(() => {
-    if (connectedProfile?.handle) return `/${connectedProfile.handle}`;
-    if (address) return `/${address}`;
-    return null;
-  }, [connectedProfile?.handle, address]);
-
   const sections = useSidebarSections(
     appWalletsSupported,
     capacitor.isIos,
@@ -308,19 +300,6 @@ const WebSidebarNav = React.forwardRef<
             />
           </li>
 
-          {profilePath && (
-            <li>
-              <WebSidebarNavItem
-                href={profilePath}
-                icon={UserIcon}
-                iconSizeClass="tw-h-6 tw-w-6"
-                active={pathname === profilePath}
-                collapsed={isCollapsed}
-                label="Profile"
-              />
-            </li>
-          )}
-
           <li>
             <WebSidebarNavItem
               onClick={(event?: React.MouseEvent) => {
@@ -357,6 +336,7 @@ const WebSidebarNav = React.forwardRef<
                 {renderCollapsedSubmenu(section.key)}
               </li>
             ))}
+
         </ul>
       </nav>