feat(nav): redesign navigation with collapsible sidebar system

public/pages.json

@@ -716,56 +716,53 @@
       "icon": "pencil-ruler"
     }
   ],
-  "More": [
+  "Resources": [
     {
       "name": "Support",
-      "route": "/support"
+      "route": "/support",
+      "icon": "help-circle"
+    },
+    {
+      "name": "Documentation",
+      "route": "https://api-docs.defillama.com",
+      "icon": "code"
+    },
+    {
+      "name": "Contact us",
+      "route": "/about",
+      "icon": "chat"
     },
     {
       "name": "Careers",
-      "route": "https://github.com/DefiLlama/careers/blob/master/README.md"
+      "route": "https://github.com/DefiLlama/careers/blob/master/README.md",
+      "icon": "users"
     },
     {
       "name": "Report Incorrect Data",
-      "route": "/report-error"
+      "route": "/report-error",
+      "icon": "flag"
     },
     {
       "name": "Press / Media",
       "route": "/press"
     },
-    {
-      "name": "API Reference",
-      "route": "https://api-docs.defillama.com"
-    },
     {
       "name": "List your project",
       "route": "https://docs.llama.fi/list-your-project/submit-a-project"
-    }
-  ],
-  "About Us": [
-    {
-      "name": "About / Contact",
-      "route": "/about"
     },
     {
       "name": "Twitter",
-      "route": "https://x.com/DefiLlama"
+      "route": "https://x.com/DefiLlama",
+      "icon": "twitter"
     },
     {
       "name": "Discord",
-      "route": "https://discord.defillama.com"
+      "route": "https://discord.defillama.com",
+      "icon": "discord"
     },
     {
       "name": "Donate",
       "route": "/donations"
-    },
-    {
-      "name": "Terms of Service",
-      "route": "/terms"
-    },
-    {
-      "name": "Privacy Policy",
-      "route": "/privacy-policy"
     }
   ],
   "Hidden": [

src/components/Icon.tsx

@@ -66,6 +66,7 @@ type Name =
 	| 'chat'
 	| 'earth'
 	| 'twitter'
+	| 'discord'
 	| 'file-text'
 	| 'flame'
 	| 'house'

src/components/Metrics.tsx

@@ -5,6 +5,7 @@ import { useQuery } from '@tanstack/react-query'
 import { matchSorter } from 'match-sorter'
 import { Icon } from '~/components/Icon'
 import { BasicLink } from '~/components/Link'
+import { PINNED_METRICS_KEY } from '~/components/Nav/utils'
 import { TOTAL_TRACKED_BY_METRIC_API } from '~/constants'
 import { subscribeToPinnedMetrics } from '~/contexts/LocalStorage'
 import defillamaPages from '~/public/pages.json'
@@ -188,7 +189,7 @@ export const LinkToMetricOrToolPage = React.memo(function LinkToMetricOrToolPage
 }) {
 	const pinnedMetrics = useSyncExternalStore(
 		subscribeToPinnedMetrics,
-		() => localStorage.getItem('pinned-metrics') ?? '[]',
+		() => localStorage.getItem(PINNED_METRICS_KEY) ?? '[]',
 		() => '[]'
 	)
 
@@ -240,9 +241,9 @@ export const LinkToMetricOrToolPage = React.memo(function LinkToMetricOrToolPage
 				render={
 					<button
 						onClick={(e) => {
-							const currentPinnedMetrics = JSON.parse(window.localStorage.getItem('pinned-metrics') || '[]')
+							const currentPinnedMetrics = JSON.parse(window.localStorage.getItem(PINNED_METRICS_KEY) || '[]')
 							window.localStorage.setItem(
-								'pinned-metrics',
+								PINNED_METRICS_KEY,
 								JSON.stringify(
 									currentPinnedMetrics.includes(page.route)
 										? currentPinnedMetrics.filter((metric: string) => metric !== page.route)
@@ -271,10 +272,15 @@ const getTotalTracked = (totalTrackedByMetric: any, totalTrackedKey: string) =>
 
 export const MetricsAndTools = memo(function MetricsAndTools({ currentMetric }: { currentMetric: Array<string> }) {
 	const dialogStore = Ariakit.useDialogStore()
+
+	// Format breadcrumb text from currentMetric array
+	const breadcrumbText = currentMetric.join(' ')
+
 	return (
 		<>
 			<Ariakit.DialogProvider store={dialogStore}>
-				<div className="relative isolate w-full rounded-md bg-(--cards-bg) p-1">
+				<div className="relative isolate flex w-full items-center justify-between gap-4 rounded-md bg-(--cards-bg) p-1">
+					{/* Left decorative SVG */}
 					<img
 						src="/icons/metrics-l.svg"
 						width={92}
@@ -283,27 +289,31 @@ export const MetricsAndTools = memo(function MetricsAndTools({ currentMetric }:
 						className="absolute top-0 left-0 hidden h-full w-auto rounded-l-md object-cover md:block"
 						fetchPriority="high"
 					/>
-					<div className="flex h-full flex-wrap items-center justify-center gap-1">
-						<span className="hidden items-center gap-2 rounded-md bg-(--old-blue) px-2 py-[7px] text-xs text-white lg:flex">
-							<Icon name="sparkles" height={12} width={12} />
-							<span>New</span>
-						</span>
-						{currentMetric.map((metric, i) => (
-							<Fragment key={`metric-name-${metric}`}>
-								{i === 1 ? (
-									<span>{metric}</span>
-								) : (
-									<Ariakit.DialogDisclosure className="z-10 rounded-md border border-dashed border-(--old-blue) bg-(--link-button) px-2.5 py-1 font-semibold hover:bg-(--link-button-hover)">
-										{metric}
-									</Ariakit.DialogDisclosure>
-								)}
-							</Fragment>
-						))}
-						<Ariakit.DialogDisclosure className="z-10 flex items-center gap-1 px-1.5 py-1 text-xs text-(--text-form)">
-							<Icon name="search" height={12} width={12} />
-							<span className="hidden sm:block">Click to browse & search</span>
+
+					{/* Content Container */}
+					<div className="relative z-10 flex w-full items-center justify-between gap-4 px-3 py-2">
+						{/* Left: Context/Breadcrumb with background for readability */}
+						<div className="flex items-center gap-2 text-base">
+							<span className="rounded-md bg-(--cards-bg) px-2 py-1 font-medium text-(--text-primary)">
+								{breadcrumbText}
+							</span>
+						</div>
+
+						{/* Center: New metrics indicator */}
+						<div className="hidden items-center gap-1.5 rounded-md bg-(--cards-bg) px-2 py-1 text-xs text-(--text-form) md:flex">
+							<Icon name="sparkles" height={14} width={14} className="text-(--old-blue)" />
+							<span>New metrics available</span>
+						</div>
+
+						{/* Right: Action button */}
+						<Ariakit.DialogDisclosure className="ml-auto flex shrink-0 items-center gap-1.5 rounded-md bg-(--old-blue) px-3 py-2 text-sm font-medium text-white transition-opacity hover:opacity-90 focus-visible:opacity-90">
+							<Icon name="pin" height={14} width={14} />
+							<span className="hidden sm:inline">Browse & Pin</span>
+							<span className="sm:hidden">Browse</span>
 						</Ariakit.DialogDisclosure>
 					</div>
+
+					{/* Right decorative SVG */}
 					<img
 						src="/icons/metrics-r.svg"
 						width={92}
@@ -312,6 +322,8 @@ export const MetricsAndTools = memo(function MetricsAndTools({ currentMetric }:
 						className="absolute top-0 right-0 hidden h-full w-auto rounded-r-md object-cover md:block"
 						fetchPriority="high"
 					/>
+
+					{/* Gradient border */}
 					<svg
 						width="100%"
 						height="100%"

src/components/Nav/Account.tsx

@@ -6,6 +6,7 @@ import { useSubscribe } from '~/hooks/useSubscribe'
 import { formatEthAddress } from '~/utils'
 import { Icon } from '../Icon'
 import { BasicLink } from '../Link'
+import { useSidebarState } from '~/contexts/SidebarContext'
 
 export const resolveUserEmail = (user: any): string | null => {
 	if (!user) return null
@@ -23,6 +24,7 @@ export const Account = memo(function Account() {
 	const { asPath } = useRouter()
 	const { isAuthenticated, user, logout, loaders } = useAuthContext()
 	const { subscription, isSubscriptionLoading } = useSubscribe()
+	const { isCollapsed } = useSidebarState()
 	const isAccountLoading = loaders?.userLoading || (isAuthenticated && isSubscriptionLoading)
 
 	const userHandle = resolveUserHandle(user)
@@ -43,48 +45,64 @@ export const Account = memo(function Account() {
 							{user && (
 								<BasicLink
 									href="/subscription"
-									className="flex items-center gap-1.5 truncate text-sm font-medium text-(--text-label) hover:text-(--link-text) hover:underline"
+									className={`flex items-center gap-1.5 text-sm font-medium text-(--text-label) hover:text-(--link-text) hover:underline ${
+										isCollapsed ? 'justify-center' : 'truncate'
+									}`}
 								>
 									<Icon name="users" className="h-4 w-4 shrink-0" />
-									{userHandle}
+									{!isCollapsed && userHandle}
 								</BasicLink>
 							)}
 							{subscription?.status === 'active' ? (
-								<span className="flex items-center gap-1 text-xs font-medium text-green-600 dark:text-green-500">
+								<span
+									className={`flex items-center gap-1 text-xs font-medium text-green-600 dark:text-green-500 ${
+										isCollapsed ? 'justify-center' : ''
+									}`}
+								>
 									<Icon name="check-circle" className="h-3.5 w-3.5" />
-									Subscribed
+									{!isCollapsed && 'Subscribed'}
 								</span>
 							) : (
 								user && (
 									<>
-										<span className="flex items-center gap-1 text-xs font-medium text-(--error)">
-											Subscription inactive
+										<span
+											className={`flex items-center gap-1 text-xs font-medium text-(--error) ${
+												isCollapsed ? 'justify-center' : ''
+											}`}
+										>
+											{!isCollapsed && 'Subscription inactive'}
 										</span>
 										<BasicLink
 											href="/subscription"
-											className="flex items-center gap-1 text-xs font-medium text-(--link) hover:underline"
+											className={`flex items-center gap-1 text-xs font-medium text-(--link) hover:underline ${
+												isCollapsed ? 'justify-center' : ''
+											}`}
 										>
 											<Icon name="plus" className="h-3.5 w-3.5" />
-											Upgrade
+											{!isCollapsed && 'Upgrade'}
 										</BasicLink>
 									</>
 								)
 							)}
 							<button
 								onClick={logout}
-								className="flex items-center justify-center gap-2 rounded-md bg-red-500/10 p-1 text-sm font-medium text-(--error)"
+								className={`flex items-center justify-center gap-2 rounded-md bg-red-500/10 p-1 text-sm font-medium text-(--error) ${
+									isCollapsed ? 'w-full' : ''
+								}`}
 							>
 								<Icon name="x" className="h-4 w-4" />
-								Logout
+								{!isCollapsed && 'Logout'}
 							</button>
 						</div>
 					) : (
 						<BasicLink
 							href={`/subscription?returnUrl=${encodeURIComponent(asPath)}`}
-							className="pro-btn-purple flex items-center justify-center gap-2 rounded-md p-1 text-sm font-medium"
+							className={`pro-btn-purple flex items-center justify-center gap-2 rounded-md p-1 text-sm font-medium ${
+								isCollapsed ? 'w-full' : ''
+							}`}
 						>
 							<Icon name="users" className="h-4 w-4" />
-							Sign In / Subscribe
+							{!isCollapsed && 'Sign In / Subscribe'}
 						</BasicLink>
 					)}
 				</>