revert: layout changes not relevant to new modal UI

apps/extension/src/ui/apps/dashboard/layout/DashboardSettingsSidebar.tsx

@@ -11,17 +11,15 @@ import {
   UsersIcon,
 } from "@talismn/icons"
 import { classNames } from "@talismn/util"
-import { Suspense, useCallback } from "react"
+import { FC, ReactNode, Suspense, useCallback } from "react"
 import { useTranslation } from "react-i18next"
-import { useNavigate } from "react-router-dom"
+import { NavLink, To, useMatch, useNavigate } from "react-router-dom"
 import { IconButton, Tooltip, TooltipContent, TooltipTrigger } from "talisman-ui"
 
 import { SuspenseTracker } from "@talisman/components/SuspenseTracker"
 import { useAnalytics } from "@ui/hooks/useAnalytics"
 import { useMnemonicBackup } from "@ui/hooks/useMnemonicBackup"
 
-import { SidebarNavItem } from "./SidebarNavItem"
-
 export const DashboardSettingsSidebar = () => {
   const { t } = useTranslation()
   const { genericEvent } = useAnalytics()
@@ -95,6 +93,33 @@ export const DashboardSettingsSidebar = () => {
   )
 }
 
+const SidebarNavItem: FC<{
+  to: To
+  icon: ReactNode
+  label: ReactNode
+  matchPath?: string
+  className?: string
+}> = ({ to, icon, label, matchPath, className }) => {
+  const forceActive = useMatch(matchPath ?? "UNEXISTANT_PATH")
+
+  return (
+    <NavLink
+      to={to}
+      className={classNames(
+        "flex w-full items-center gap-6 overflow-hidden rounded",
+        "text-body-inactive [&.active]:text-body",
+        "hover:bg-grey-750 [&.active]:bg-grey-800",
+        "h-28 px-6",
+        forceActive && "active",
+        className,
+      )}
+    >
+      <span className="size-12 shrink-0 text-lg">{icon}</span>
+      <span className="truncate">{label}</span>
+    </NavLink>
+  )
+}
+
 const MnemonicNotification = () => {
   const { allBackedUp } = useMnemonicBackup()
 

apps/extension/src/ui/apps/dashboard/routes/Portfolio/Shared/PortfolioLayout.tsx

@@ -1,6 +1,6 @@
 import { FC, PropsWithChildren, ReactNode, Suspense, useCallback } from "react"
 import { useTranslation } from "react-i18next"
-import { useLocation, useNavigate } from "react-router-dom"
+import { useNavigate } from "react-router-dom"
 import { Button } from "talisman-ui"
 
 import { SuspenseTracker } from "@talisman/components/SuspenseTracker"
@@ -10,8 +10,6 @@ import { PortfolioTabs } from "@ui/domains/Portfolio/PortfolioTabs"
 import { usePortfolioNavigation } from "@ui/domains/Portfolio/usePortfolioNavigation"
 import { usePortfolio } from "@ui/state"
 
-const RAMP_ROUTE = "/portfolio/buysell"
-
 const EnableNetworkMessage: FC<{ type?: "substrate" | "evm" }> = ({ type }) => {
   const { t } = useTranslation()
   const navigate = useNavigate()
@@ -54,26 +52,21 @@ const PortfolioAccountCheck: FC<PropsWithChildren> = ({ children }) => {
 export const PortfolioLayout: FC<
   PropsWithChildren & { toolbar?: ReactNode; header?: ReactNode }
 > = ({ header, toolbar, children }) => {
-  const location = useLocation()
-  const isRampRoute = location.pathname.includes(RAMP_ROUTE)
   return (
     <div className="relative flex w-full flex-col gap-6 pb-12">
       <Suspense
         fallback={<SuspenseTracker name="DashboardPortfolioLayout.PortfolioAccountCheck" />}
       >
-        {!isRampRoute && (header ?? <DashboardPortfolioHeader />)}
+        {header ?? <DashboardPortfolioHeader />}
         <PortfolioAccountCheck>
-          {!isRampRoute && (
-            <div className="flex h-16 w-full items-center justify-between gap-8 overflow-hidden">
-              <PortfolioTabs className="text-md my-0 h-14 w-auto font-bold" />
-
-              <div className="shrink-0">
-                <Suspense fallback={<SuspenseTracker name="DashboardPortfolioLayout.Toolbar" />}>
-                  {toolbar}
-                </Suspense>
-              </div>
+          <div className="flex h-16 w-full items-center justify-between gap-8 overflow-hidden">
+            <PortfolioTabs className="text-md my-0 h-14 w-auto font-bold" />
+            <div className="shrink-0">
+              <Suspense fallback={<SuspenseTracker name="DashboardPortfolioLayout.Toolbar" />}>
+                {toolbar}
+              </Suspense>
             </div>
-          )}
+          </div>
           <Suspense fallback={<SuspenseTracker name="DashboardPortfolioLayout.TabContent" />}>
             {children}
           </Suspense>

apps/extension/src/ui/apps/dashboard/routes/Portfolio/index.tsx

@@ -31,26 +31,24 @@ const BuyTokensOpener = () => {
   return null
 }
 
-export const PortfolioRoutes = () => {
-  return (
-    <PortfolioContainer>
-      <DashboardLayout sidebar={"accounts"}>
-        <BuyTokensOpener />
+export const PortfolioRoutes = () => (
+  <PortfolioContainer>
+    <DashboardLayout sidebar="accounts">
+      <BuyTokensOpener />
 
-        {/* share layout to prevent tabs flickering */}
-        <PortfolioLayout toolbar={<PortfolioToolbar />} header={<PortfolioHeader />}>
-          <Routes>
-            <Route path="tokens/:symbol" element={<PortfolioAsset />} />
-            <Route path="nfts/:collectionId" element={<PortfolioNftCollection />} />
-            <Route path="tokens" element={<PortfolioAssets />} />
-            <Route path="nfts" element={<PortfolioNfts />} />
-            <Route path="*" element={<NavigateWithQuery url="tokens" />} />
-          </Routes>
-        </PortfolioLayout>
-      </DashboardLayout>
-    </PortfolioContainer>
-  )
-}
+      {/* share layout to prevent tabs flickering */}
+      <PortfolioLayout toolbar={<PortfolioToolbar />} header={<PortfolioHeader />}>
+        <Routes>
+          <Route path="tokens/:symbol" element={<PortfolioAsset />} />
+          <Route path="nfts/:collectionId" element={<PortfolioNftCollection />} />
+          <Route path="tokens" element={<PortfolioAssets />} />
+          <Route path="nfts" element={<PortfolioNfts />} />
+          <Route path="*" element={<NavigateWithQuery url="tokens" />} />
+        </Routes>
+      </PortfolioLayout>
+    </DashboardLayout>
+  </PortfolioContainer>
+)
 
 const PortfolioToolbar = () => (
   <Routes>