diff --git a/apps/deploy-web/src/components/layout/AccountMenu.tsx b/apps/deploy-web/src/components/layout/AccountMenu.tsx index 98c77856f..ea076d29d 100644 --- a/apps/deploy-web/src/components/layout/AccountMenu.tsx +++ b/apps/deploy-web/src/components/layout/AccountMenu.tsx @@ -51,7 +51,7 @@ export function AccountMenu() { setOpen(false); }} > -
+
{!isLoading && user ? (
{username && ( @@ -82,19 +82,21 @@ export function AccountMenu() { My Alerts - router.push(UrlService.logout())} icon={}> + (window.location.href = UrlService.logout())} icon={}> Logout
) : (
router.push(UrlService.signup())} > Sign up - router.push(UrlService.login())} className="justify-center p-2">Sign in + router.push(UrlService.login())} className="justify-center p-2"> + Sign in +
)}
diff --git a/apps/deploy-web/src/components/layout/MobileSidebarUser.tsx b/apps/deploy-web/src/components/layout/MobileSidebarUser.tsx index ad3332b72..e8be181de 100644 --- a/apps/deploy-web/src/components/layout/MobileSidebarUser.tsx +++ b/apps/deploy-web/src/components/layout/MobileSidebarUser.tsx @@ -60,6 +60,7 @@ export const MobileSidebarUser: React.FunctionComponent = () => { }} /> , diff --git a/apps/deploy-web/src/components/layout/SidebarRouteButton.tsx b/apps/deploy-web/src/components/layout/SidebarRouteButton.tsx index a6f6cc371..04d761256 100644 --- a/apps/deploy-web/src/components/layout/SidebarRouteButton.tsx +++ b/apps/deploy-web/src/components/layout/SidebarRouteButton.tsx @@ -1,5 +1,5 @@ "use client"; -import { ReactNode } from "react"; +import React, { ReactNode } from "react"; import { buttonVariants } from "@akashnetwork/ui/components"; import { cn } from "@akashnetwork/ui/utils"; import Link from "next/link"; @@ -13,36 +13,39 @@ type Props = { route: ISidebarRoute; isNavOpen?: boolean; className?: string; + useNextLinkTag?: boolean; }; -export const SidebarRouteButton: React.FunctionComponent = ({ route, className = "", isNavOpen = true }) => { +export const SidebarRouteButton: React.FunctionComponent = ({ route, className = "", isNavOpen = true, useNextLinkTag = true }) => { const pathname = usePathname(); const isSelected = route.url === UrlService.home() ? pathname === "/" : route.activeRoutes.some(x => pathname?.startsWith(x)); - return ( -
  • - - {!!route.icon && ( - - {route.icon({ className: cn({ ["text-primary font-bold"]: isSelected, ["mx-auto"]: !isNavOpen }, "text-xs") })} - - )} - {isNavOpen && {route.title}} - -
  • + const linkProps: React.ComponentProps & React.ComponentProps<"a"> & { "data-testid": string | undefined } = { + target: route.target ?? "_self", + rel: route.rel ? route.rel : "", + href: route.url, + className: cn( + buttonVariants({ variant: isSelected ? "secondary" : "ghost", size: "sm" }), + "flex w-full items-center justify-start text-current hover:no-underline", + { + ["font-bold"]: isSelected, + ["min-w-[initial] px-4 py-1"]: isNavOpen, + ["w-[45px] min-w-0 p-2"]: !isNavOpen + } + ), + "data-testid": route.testId + }; + + const innerContent = ( + <> + {!!route.icon && ( + + {route.icon({ className: cn({ ["text-primary font-bold"]: isSelected, ["mx-auto"]: !isNavOpen }, "text-xs") })} + + )} + {isNavOpen && {route.title}} + ); + + return
  • {useNextLinkTag ? {innerContent} : {innerContent}}
  • ; };