From fcd04199d14d7df48678a245a284508a20cecc69 Mon Sep 17 00:00:00 2001
From: phamhieu <phamhieu1998@gmail.com>
Date: Thu, 9 Dec 2021 13:44:18 +0700
Subject: [PATCH] fix: logout button menu item

---
 .../layouts/AccountLayout/AccountLayout.tsx   |  8 +++----
 .../layouts/AccountLayout/WithSidebar.tsx     | 23 ++++++++++++++++---
 2 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/studio/components/layouts/AccountLayout/AccountLayout.tsx b/studio/components/layouts/AccountLayout/AccountLayout.tsx
index 8c2b1bff71e..48bf14c7900 100644
--- a/studio/components/layouts/AccountLayout/AccountLayout.tsx
+++ b/studio/components/layouts/AccountLayout/AccountLayout.tsx
@@ -32,15 +32,16 @@ const AccountLayout = ({ children, title, breadcrumbs }: any) => {
     key: `${API_URL}/logout`,
   }
 
-  let logoutLink = GOTRUE_ENABLED ? { ...baseLogoutLink, href: '', onClick: onClickLogout } : baseLogoutLink
+  let logoutLink = GOTRUE_ENABLED
+    ? { ...baseLogoutLink, href: undefined, onClick: onClickLogout }
+    : baseLogoutLink
 
   const organizationsLinks = app.organizations
     .list()
     .map((x: any) => ({
       isActive: router.pathname.startsWith('/org/') && ui.selectedOrganization?.slug == x.slug,
       label: x.name,
-      href: '/org/[slug]/settings',
-      as: `/org/${x.slug}/settings`,
+      href: `/org/${x.slug}/settings`,
     }))
     .sort((a, b) => a.label.localeCompare(b.label))
 
@@ -52,7 +53,6 @@ const AccountLayout = ({ children, title, breadcrumbs }: any) => {
           isActive: router.pathname == '/',
           label: 'All projects',
           href: '/',
-          as: `/`,
         },
       ],
     },
diff --git a/studio/components/layouts/AccountLayout/WithSidebar.tsx b/studio/components/layouts/AccountLayout/WithSidebar.tsx
index c9ec89d0e4b..1079d22a58d 100644
--- a/studio/components/layouts/AccountLayout/WithSidebar.tsx
+++ b/studio/components/layouts/AccountLayout/WithSidebar.tsx
@@ -1,6 +1,7 @@
 import Link from 'next/link'
 import { CSSProperties, FC, ReactNode } from 'react'
 import { Menu, Typography, IconArrowUpRight, Badge } from '@supabase/ui'
+import { isUndefined } from 'lodash'
 import LayoutHeader from '../ProjectLayout/LayoutHeader'
 
 interface Props {
@@ -116,7 +117,6 @@ const LinksWithoutHeaders: FC<any> = ({ links, subitems, subitemsParentKey }) =>
             isActive={isActive}
             label={x.label}
             href={x.href}
-            as={x.as}
             onClick={x.onClick}
             external={x.external || false}
           />
@@ -143,9 +143,26 @@ const LinksWithoutHeaders: FC<any> = ({ links, subitems, subitemsParentKey }) =>
   )
 }
 
-const SidebarItem: FC<any> = ({ id, label, as, href, isActive, isSubitem, onClick, external }) => {
+const SidebarItem: FC<any> = ({ id, label, href, isActive, isSubitem, onClick, external }) => {
+  if (isUndefined(href)) {
+    return (
+      <Menu.Item
+        rounded
+        key={id}
+        style={{
+          marginLeft: isSubitem && '.5rem',
+        }}
+        active={isActive ? true : false}
+        onClick={onClick || (() => {})}
+        icon={external && <IconArrowUpRight size={'tiny'} />}
+      >
+        {isSubitem ? <Typography.Text small>{label}</Typography.Text> : label}
+      </Menu.Item>
+    )
+  }
+
   return (
-    <Link href={href || ''} as={as || ''}>
+    <Link href={href}>
       <a className="block" target={external ? '_blank' : '_self'}>
         <Menu.Item
           rounded