feat: updated navbar

packages/app/src/app/(embed)/bridge/embed/layout.tsx

@@ -4,6 +4,12 @@ import 'react-toastify/dist/ReactToastify.css';
 import 'tippy.js/dist/tippy.css';
 import 'tippy.js/themes/light.css';
 
+import { AppShell } from '@/app-components/AppShell/AppShell';
+
 export default function EmbedLayout(props: PropsWithChildren) {
-  return <div className="bg-widget-background h-screen">{props.children}</div>;
+  return (
+    <AppShell>
+      <div className="bg-widget-background h-screen">{props.children}</div>
+    </AppShell>
+  );
 }

packages/app/src/app/(with-sidebar)/(portal)/build/page.tsx

@@ -1,5 +1,7 @@
 import { Metadata } from 'next';
 
+import { PageTabs } from '@/app-components/AppShell/components/PageTabs';
+import { toolsTabs } from '@/portal/common/pageTabConfig';
 import { ArbitrumStatus } from '@/portal/common/types';
 import { BuildSection } from '@/portal/components/Build/BuildSection';
 import { Explorers } from '@/portal/components/Build/Explorers';
@@ -50,6 +52,7 @@ export default async function BuildPage() {
 
   return (
     <div className="flex flex-col gap-8 lg:gap-12">
+      <PageTabs title="Tools" tabs={toolsTabs} />
       <HeroBanner />
 
       <BuildSection />

packages/app/src/app/(with-sidebar)/(portal)/chains/ecosystem/page.tsx

@@ -1,8 +1,10 @@
 import { Metadata } from 'next';
 
+import { PageTabs } from '@/app-components/AppShell/components/PageTabs';
 import { getEntityMetaData } from '@/portal/common/getMetaData';
 import { ServerSideAppProps, getServerSideAppParams } from '@/portal/common/getServerSideAppParams';
 import { spotlightOrbitChains } from '@/portal/common/orbitChains';
+import { chainsTabs } from '@/portal/common/pageTabConfig';
 import { EntityType } from '@/portal/common/types';
 import { CommunitySpotlight } from '@/portal/components/CommunitySpotlight';
 import { FastWithdrawalAnnouncement } from '@/portal/components/FastWithdrawalAnnouncement';
@@ -48,6 +50,8 @@ export function generateMetadata(props: ServerSideAppProps): Metadata {
 export default function OrbitPage() {
   return (
     <div className="flex flex-col gap-8 lg:gap-12">
+      <PageTabs title="Chains" tabs={chainsTabs} />
+
       <HeroBanner />
 
       <GettingStarted />

packages/app/src/app/(with-sidebar)/(portal)/chains/metrics/page.tsx

@@ -1,5 +1,7 @@
 import { Metadata } from 'next';
 
+import { PageTabs } from '@/app-components/AppShell/components/PageTabs';
+import { chainsTabs } from '@/portal/common/pageTabConfig';
 import { Card } from '@/portal/components/Card';
 import { ChainStats } from '@/portal/components/ChainsMetrics/ChainStats';
 import { ChainsTable } from '@/portal/components/ChainsMetrics/ChainsTable';
@@ -31,6 +33,8 @@ export function generateMetadata(): Metadata {
 export default function ChainsMetricsPage() {
   return (
     <div className="flex flex-col gap-8 lg:gap-12">
+      <PageTabs title="Chains" tabs={chainsTabs} />
+
       {/* Header banner */}
       <Card className="relative flex h-[120px] items-center bg-[#1B4ADD] p-4 lg:p-8">
         <h1 className="z-20 text-2xl">Arbitrum Chain Stats</h1>

packages/app/src/app/(with-sidebar)/(portal)/layout.tsx

@@ -1,18 +1,16 @@
 import { PropsWithChildren } from 'react';
 
-import { MobileHeader } from '@/portal/components/MobileHeader';
 import { OrbitChainPanel } from '@/portal/components/OrbitChainPanel/OrbitChainPanel';
-import { PortalPage } from '@/portal/components/PortalPage/PortalPage';
 import { ProjectPanel } from '@/portal/components/ProjectPanel';
-import { Providers } from '@/portal/components/Providers';
 
 export default function PortalLayout({ children }: PropsWithChildren) {
   return (
-    <Providers>
-      <MobileHeader />
-      <PortalPage>{children}</PortalPage>
+    <>
+      <div className="relative mx-auto flex w-full max-w-[1200px] flex-col gap-4 px-4 lg:gap-6 mb-24">
+        {children}
+      </div>
       <OrbitChainPanel />
       <ProjectPanel />
-    </Providers>
+    </>
   );
 }

packages/app/src/app/(with-sidebar)/(portal)/learn/page.tsx

@@ -1,5 +1,7 @@
 import { Metadata } from 'next';
 
+import { PageTabs } from '@/app-components/AppShell/components/PageTabs';
+import { toolsTabs } from '@/portal/common/pageTabConfig';
 import { Blog } from '@/portal/common/types';
 import { AdvancedDocs } from '@/portal/components/Learn/AdvancedDocs';
 import { Blogs } from '@/portal/components/Learn/Blogs';
@@ -51,6 +53,7 @@ export default async function LearnPage() {
 
   return (
     <div className="flex flex-col gap-8 lg:gap-12">
+      <PageTabs title="Tools" tabs={toolsTabs} />
       <HeroBanner />
 
       <LearnStats />

packages/app/src/app/(with-sidebar)/(portal)/projects/layout.tsx

@@ -1,3 +1,5 @@
+import { PageHeading } from '@/app-components/AppShell/components/PageHeading';
+import { ProjectsCategorySelector } from '@/portal/components/ProjectsCategorySelector';
 import { ProjectsCountByFilters } from '@/portal/components/ProjectsCountByFilters';
 import { ProjectsFilterBar } from '@/portal/components/ProjectsFilterBar';
 
@@ -8,8 +10,14 @@ export default function ProjectsListPageLayout({
 }) {
   return (
     <>
+      <PageHeading>Projects</PageHeading>
+
+      <ProjectsCategorySelector />
+
       <ProjectsFilterBar />
 
+      <hr className="opacity-10 hidden lg:block" />
+
       <ProjectsCountByFilters />
 
       {children}

packages/app/src/app/(with-sidebar)/layout.tsx

@@ -1,25 +1,13 @@
-import { PropsWithChildren, Suspense } from 'react';
+import { PropsWithChildren } from 'react';
 
-import { SiteBanner } from '@/bridge/components/common/SiteBanner';
+import { AppShell } from '@/app-components/AppShell/AppShell';
 import { Toast } from '@/bridge/components/common/atoms/Toast';
-import { AppSidebar } from '@/portal/components/AppSidebar';
 
 export default function WithSidebarLayout({ children }: PropsWithChildren) {
   return (
-    <>
-      <div className="relative flex">
-        <Suspense>
-          <AppSidebar />
-        </Suspense>
-
-        <div className="relative flex w-full flex-col">
-          <SiteBanner />
-
-          {children}
-        </div>
-
-        <Toast />
-      </div>
-    </>
+    <AppShell>
+      {children}
+      <Toast />
+    </AppShell>
   );
 }

packages/app/src/app/layout.tsx

@@ -1,3 +1,4 @@
+import '@rainbow-me/rainbowkit/styles.css';
 import type { Metadata } from 'next';
 import { PropsWithChildren } from 'react';
 import { twMerge } from 'tailwind-merge';