Skip to content

feat: mobile navbar #202

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
antoncoding merged 3 commits into from
Nov 30, 2025
Merged

feat: mobile navbar #202

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8d6973b
fix: mobile navbar and homepage
antoncoding Nov 30, 2025
743829a
chore: markets layout
antoncoding Nov 30, 2025
c7bfcb5
chore: fix navbar links
antoncoding Nov 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 24 additions & 24 deletions app/HomePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -191,12 +191,12 @@ function HomePage() {
<main className="mx-auto w-full">
{/* Hero Section - Full Screen */}
<section className="relative flex min-h-screen flex-col justify-between">
<div className="container mx-auto flex flex-1 flex-col items-center justify-center">
<div className="container mx-auto flex flex-1 flex-col items-center justify-center px-6 sm:px-8 md:px-12">
<div className="flex w-full flex-col items-center md:-mt-[5vh]">
<div className="flex w-full flex-col items-center px-4">
<div className="flex w-full flex-col items-center">
{/* Logo and Product Title - Horizontal Layout */}
<div className="mb-4 inline-flex items-center gap-2 sm:mb-6 sm:gap-3 md:mb-8 md:gap-4">
<h1 className="m-0 font-zen text-2xl leading-none text-primary sm:text-3xl md:text-4xl" style={{ padding: 0 }}>
<h1 className="m-0 font-zen text-3xl leading-none text-primary sm:text-3xl md:text-4xl" style={{ padding: 0 }}>
Welcome to Monarch
</h1>
<Image
Expand All @@ -217,18 +217,18 @@ function HomePage() {
</div>

{/* CTA Buttons */}
<div className="flex w-full flex-col items-center gap-3 px-4 sm:w-auto sm:flex-row sm:gap-4">
<div className="mx-auto flex flex-col items-center gap-3 sm:flex-row sm:gap-4">
<Button
variant="default"
className="flex w-full items-center justify-center gap-2 px-6 py-3 font-zen sm:w-auto sm:px-10 sm:py-4"
className="flex w-auto min-w-[200px] items-center justify-center gap-2 px-8 py-3 font-zen sm:px-10 sm:py-4"
size="lg"
onPress={() => scrollToSection('section-1')}
>
Learn More
<RiArrowDownLine className="h-5 w-5" />
</Button>
<Link href="/markets" className="block w-full no-underline sm:w-auto">
<Button variant="cta" className="w-full px-6 py-3 font-zen sm:px-10 sm:py-4" size="lg">
<Link href="/markets" className="block no-underline">
<Button variant="cta" className="w-auto min-w-[200px] px-8 py-3 font-zen sm:px-10 sm:py-4" size="lg">
Explore Markets
</Button>
</Link>
Expand Down Expand Up @@ -257,7 +257,7 @@ function HomePage() {
id="section-1"
className="flex w-full items-center bg-surface py-12 md:min-h-screen md:py-24"
>
<div className="container mx-auto px-4 sm:px-6">
<div className="container mx-auto px-6 sm:px-8 md:px-12">
<div className="mx-auto grid max-w-7xl items-center gap-8 md:gap-12 md:grid-cols-[2fr_1fr]">
{/* Text Content */}
<div>
Expand All @@ -275,22 +275,22 @@ function HomePage() {
Monarch is an advanced interface for Morpho Blue, providing powerful tools to interact directly with the protocol—from simple lending to creating your own automated vaults.
</p>
</div>
<div className="mt-6 flex flex-col gap-3 sm:mt-8 sm:flex-row sm:gap-4">
<div className="mt-6 flex flex-col items-center gap-3 sm:mt-8 sm:flex-row sm:gap-4">
<a
href="https://docs.morpho.org/learn/concepts/market/"
target="_blank"
rel="noopener noreferrer"
className="no-underline"
className="inline-block no-underline"
>
<Button variant="secondary" size="lg" className="w-full font-zen flex items-center justify-center gap-2 sm:w-auto">
<Button variant="secondary" size="lg" className="font-zen flex w-auto min-w-[280px] items-center justify-center gap-2">
More about Morpho Blue
<RiExternalLinkLine className="h-5 w-5" />
</Button>
</a>
<Button
variant="cta"
size="lg"
className="font-zen flex items-center justify-center gap-2"
className="font-zen flex w-auto min-w-[280px] items-center justify-center gap-2"
onPress={() => scrollToSection('section-2')}
>
Continue
Expand All @@ -315,7 +315,7 @@ function HomePage() {

{/* Section 2: Morpho Vaults - Full Screen, Right Layout with Image */}
<section id="section-2" className="flex w-full items-center bg-main py-12 md:min-h-screen md:py-24">
<div className="container mx-auto px-4 sm:px-6">
<div className="container mx-auto px-6 sm:px-8 md:px-12">
<div className="mx-auto grid max-w-7xl items-center gap-8 md:gap-12 md:grid-cols-[2fr_1fr] md:grid-flow-dense">
{/* Text Content */}
<div className="md:col-start-1">
Expand All @@ -333,22 +333,22 @@ function HomePage() {
However, they come with trade-offs: less control over parameters, limited customization, and potential performance fees charged by curators.
</p>
</div>
<div className="mt-6 flex flex-col gap-3 sm:mt-8 sm:flex-row sm:gap-4">
<div className="mt-6 flex flex-col items-center gap-3 sm:mt-8 sm:flex-row sm:gap-4">
<a
href="https://docs.morpho.org/curate/"
target="_blank"
rel="noopener noreferrer"
className="no-underline"
className="inline-block no-underline"
>
<Button variant="secondary" size="lg" className="w-full font-zen flex items-center justify-center gap-2 sm:w-auto">
Learn about Risk Curation
<Button variant="secondary" size="lg" className="font-zen flex w-auto min-w-[280px] items-center justify-center gap-2">
More about Risk Curation
<RiExternalLinkLine className="h-5 w-5" />
</Button>
</a>
<Button
variant="cta"
size="lg"
className="font-zen flex items-center justify-center gap-2"
className="font-zen flex w-auto min-w-[280px] items-center justify-center gap-2"
onPress={() => scrollToSection('section-3')}
>
Why Monarch
Expand All @@ -373,7 +373,7 @@ function HomePage() {

{/* Section 3: Direct Market Access - Full Screen, Left Layout with Animation */}
<section id="section-3" className="flex w-full items-center bg-surface py-12 md:min-h-screen md:py-24">
<div className="container mx-auto px-4 sm:px-6">
<div className="container mx-auto px-6 sm:px-8 md:px-12">
<div className="mx-auto max-w-7xl">
{/* Text Content - Centered */}
<div className="mb-8 text-center sm:mb-12">
Expand Down Expand Up @@ -410,17 +410,17 @@ function HomePage() {
</div>

{/* CTA Buttons - Centered */}
<div className="flex flex-col items-center justify-center gap-3 sm:flex-row sm:gap-4">
<div className="mx-auto flex flex-col items-center justify-center gap-3 sm:flex-row sm:gap-4">
<Button
variant="secondary"
size="lg"
className="w-full cursor-not-allowed font-zen opacity-50 sm:w-auto"
className="w-auto min-w-[200px] cursor-not-allowed font-zen opacity-50"
isDisabled
>
Auto Vault <Badge variant='success'> Coming Soon </Badge>
</Button>
<Link href="/markets" className="block w-full no-underline sm:w-auto">
<Button variant="cta" size="lg" className="w-full font-zen">
<Link href="/markets" className="block no-underline">
<Button variant="cta" size="lg" className="w-auto min-w-[200px] font-zen">
Explore Markets
</Button>
</Link>
Expand Down Expand Up @@ -496,7 +496,7 @@ function HomePage() {

{/* Footer CTA - Full Screen */}
<section className="flex min-h-screen w-full flex-col items-center justify-center bg-main py-16 text-center md:py-24">
<div className="container mx-auto px-4 sm:px-6">
<div className="container mx-auto px-6 sm:px-8 md:px-12">
<h2 className="mb-4 font-zen text-2xl text-primary sm:mb-6 sm:text-3xl md:text-4xl">
Join the Monarch Community
</h2>
Expand Down
4 changes: 2 additions & 2 deletions app/market/[chainId]/[marketid]/RateChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,8 +125,8 @@ function RateChart({
/>
</CardHeader>
<CardBody>
<div className="mb-4 grid grid-cols-1 gap-8 md:grid-cols-3">
<div className="md:col-span-2">
<div className="mb-4 grid grid-cols-1 gap-6 lg:grid-cols-3 lg:gap-8">
<div className="lg:col-span-2">
{isLoading ? (
<div className="flex h-64 items-center justify-center">
<Spinner size={30} />
Expand Down
4 changes: 2 additions & 2 deletions app/market/[chainId]/[marketid]/VolumeChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -187,8 +187,8 @@ function VolumeChart({
</div>
</CardHeader>
<CardBody>
<div className="grid grid-cols-1 gap-8 md:grid-cols-3">
<div className="md:col-span-2">
<div className="grid grid-cols-1 gap-6 lg:grid-cols-3 lg:gap-8">
<div className="lg:col-span-2">
{isLoading ? (
<div className="flex h-64 items-center justify-center text-primary">
<Spinner size={30} />
Expand Down
24 changes: 13 additions & 11 deletions app/market/[chainId]/[marketid]/content.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,28 +183,30 @@ function MarketContent() {
return (
<>
<Header />
<div className="container mx-auto px-4 py-8 pb-4 font-zen">
{/* navigation bottons */}
<div className="flex justify-between">
<Button onPress={handleBackToMarkets} size="md" className="mb-4">
<div className="mx-auto max-w-7xl px-6 py-8 pb-4 font-zen sm:px-8 md:px-12 lg:px-16">
{/* navigation buttons */}
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<Button onPress={handleBackToMarkets} size="md" className="w-auto">
<ChevronLeftIcon className="mr-2" />
Back to Markets
<span className="hidden sm:inline">Back to Markets</span>
<span className="sm:hidden">Back</span>
</Button>

<div className="flex gap-2">
<Button onPress={() => setShowSupplyModal(true)}>Supply</Button>
<Button onPress={() => setShowBorrowModal(true)}>Borrow</Button>
<div className="flex flex-wrap gap-2">
<Button onPress={() => setShowSupplyModal(true)} className="flex-1 sm:flex-none">Supply</Button>
<Button onPress={() => setShowBorrowModal(true)} className="flex-1 sm:flex-none">Borrow</Button>
<Button
size="md"
className="mb-4"
className="w-full sm:w-auto"
onPress={() => {
void window.open(
getMarketURL(market.uniqueKey, market.morphoBlue.chain.id),
'_blank',
);
}}
>
View on Morpho
<span className="hidden sm:inline">View on Morpho</span>
<span className="sm:hidden">Morpho</span>
<Image src={MORPHO_LOGO} alt="Morpho Logo" width={20} height={20} className="ml-2" />
</Button>
</div>
Expand Down Expand Up @@ -243,7 +245,7 @@ function MarketContent() {
/>
</div>

<div className="mb-8 grid grid-cols-1 gap-8 md:grid-cols-3">
<div className="mb-8 grid grid-cols-1 gap-6 lg:grid-cols-3 lg:gap-8">
<Card className={cardStyle}>
<CardHeader className="flex items-center justify-between text-xl">
<span>Basic Info</span>
Expand Down
99 changes: 59 additions & 40 deletions app/markets/components/markets.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,6 +165,22 @@ export default function Markets({
'compact',
);

// Force compact mode on mobile - track window size
const [isMobile, setIsMobile] = useState(false);

useEffect(() => {
const checkMobile = () => {
setIsMobile(window.innerWidth < 768); // md breakpoint
};

checkMobile();
window.addEventListener('resize', checkMobile);
return () => window.removeEventListener('resize', checkMobile);
}, []);

// Effective table view mode - always compact on mobile
const effectiveTableViewMode = isMobile ? 'compact' : tableViewMode;

const [userTrustedVaults, setUserTrustedVaults] = useLocalStorage<TrustedVault[]>(
'userTrustedVaults',
defaultTrustedVaults,
Expand Down Expand Up @@ -579,40 +595,43 @@ export default function Markets({
</Button>
</Tooltip>

<Tooltip
classNames={{
base: 'p-0 m-0 bg-transparent shadow-sm border-none',
content: 'p-0 m-0 bg-transparent shadow-sm border-none',
}}
content={
<TooltipContent
icon={
tableViewMode === 'compact' ? (
<RiExpandHorizontalLine size={14} />
) : (
<CgCompress size={14} />
)
}
title={tableViewMode === 'compact' ? 'Expand Table' : 'Compact Table'}
detail={tableViewMode === 'compact' ? 'Expand table to full width, useful when more columns are enabled.' : 'Restore compact table view'}
/>
}
>
<Button
isIconOnly
aria-label="Toggle table width"
variant="light"
size="sm"
className="text-secondary min-w-0 px-2"
onPress={() => setTableViewMode(tableViewMode === 'compact' ? 'expanded' : 'compact')}
{/* Hide expand/compact toggle on mobile */}
<div className="hidden md:block">
<Tooltip
classNames={{
base: 'p-0 m-0 bg-transparent shadow-sm border-none',
content: 'p-0 m-0 bg-transparent shadow-sm border-none',
}}
content={
<TooltipContent
icon={
effectiveTableViewMode === 'compact' ? (
<RiExpandHorizontalLine size={14} />
) : (
<CgCompress size={14} />
)
}
title={effectiveTableViewMode === 'compact' ? 'Expand Table' : 'Compact Table'}
detail={effectiveTableViewMode === 'compact' ? 'Expand table to full width, useful when more columns are enabled.' : 'Restore compact table view'}
/>
}
>
{tableViewMode === 'compact' ? (
<RiExpandHorizontalLine size={16} />
) : (
<CgCompress size={16} />
)}
</Button>
</Tooltip>
<Button
isIconOnly
aria-label="Toggle table width"
variant="light"
size="sm"
className="text-secondary min-w-0 px-2"
onPress={() => setTableViewMode(tableViewMode === 'compact' ? 'expanded' : 'compact')}
>
{effectiveTableViewMode === 'compact' ? (
<RiExpandHorizontalLine size={16} />
) : (
<CgCompress size={16} />
)}
</Button>
</Tooltip>
</div>

<Tooltip
classNames={{
Expand All @@ -636,11 +655,11 @@ export default function Markets({
</div>
</div>

{/* Table Section - can expand beyond container in expanded mode */}
<div className={tableViewMode === 'expanded' ? 'mt-4 px-[2%]' : 'container px-[4%] mt-4'}>
{/* Table Section - centered when expanded, full width when compact */}
<div className={effectiveTableViewMode === 'expanded' ? 'mt-4 px-[2%]' : 'container px-[4%] mt-4'}>

{loading ? (
<div className={tableViewMode === 'expanded' ? 'container px-[4%]' : 'w-full'}>
<div className={effectiveTableViewMode === 'expanded' ? 'container px-[4%]' : 'w-full'}>
<LoadingScreen
message="Loading Morpho Blue Markets..."
className="min-h-[300px] w-full"
Expand All @@ -649,7 +668,7 @@ export default function Markets({
) : rawMarkets == null ? (
<div className="flex justify-center"> No data </div>
) : (
<div className={tableViewMode === 'expanded' ? 'flex justify-center' : 'w-full'}>
<div className={effectiveTableViewMode === 'expanded' ? 'flex justify-center' : 'w-full'}>
{filteredMarkets.length > 0 ? (
<MarketsTable
markets={filteredMarkets}
Expand All @@ -667,9 +686,9 @@ export default function Markets({
setSelectedMarket={setSelectedMarket}
columnVisibility={columnVisibility}
trustedVaults={userTrustedVaults}
className={tableViewMode === 'compact' ? 'w-full' : undefined}
wrapperClassName={tableViewMode === 'compact' ? 'w-full' : undefined}
tableClassName={tableViewMode === 'compact' ? 'w-full min-w-full' : undefined}
className={effectiveTableViewMode === 'compact' ? 'w-full' : undefined}
wrapperClassName={effectiveTableViewMode === 'compact' ? 'w-full' : undefined}
tableClassName={effectiveTableViewMode === 'compact' ? 'w-full min-w-full' : undefined}
addBlacklistedMarket={addBlacklistedMarket}
isBlacklisted={isBlacklisted}
/>
Expand Down
2 changes: 1 addition & 1 deletion src/components/layout/header/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ function Header({ ghost }: HeaderProps) {
<div className="h-[80px] w-full md:h-[120px]" /> {/* Spacer div */}
<header
data-scroll-state={scrollState}
className="bg-main fixed left-0 right-0 top-0 flex h-[80px] justify-center pt-4 md:h-[120px] md:pt-8"
className="bg-main fixed left-0 right-0 top-0 flex h-[60px] justify-center md:h-[120px] md:pt-4"
Comment on lines 35 to +38
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Nov 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Spacer and header height mismatch on mobile.

The spacer div uses h-[80px] while the header uses h-[60px]. This creates 20px of extra space below the fixed header on mobile. Desktop values match (md:h-[120px]).

If intentional (for visual breathing room), consider adding a comment. Otherwise:

-      <div className="h-[80px] w-full md:h-[120px]" /> {/* Spacer div */}
+      <div className="h-[60px] w-full md:h-[120px]" /> {/* Spacer div */}
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<div className="h-[80px] w-full md:h-[120px]" /> {/* Spacer div */}
<header
data-scroll-state={scrollState}
className="bg-main fixed left-0 right-0 top-0 flex h-[80px] justify-center pt-4 md:h-[120px] md:pt-8"
className="bg-main fixed left-0 right-0 top-0 flex h-[60px] justify-center md:h-[120px] md:pt-4"
<div className="h-[60px] w-full md:h-[120px]" /> {/* Spacer div */}
<header
data-scroll-state={scrollState}
className="bg-main fixed left-0 right-0 top-0 flex h-[60px] justify-center md:h-[120px] md:pt-4"
🤖 Prompt for AI Agents 
In src/components/layout/header/Header.tsx around lines 35-38 the spacer div
uses h-[80px] while the fixed header uses h-[60px] on mobile, creating an extra
20px gap; either make the spacer match the header mobile height (change spacer
to h-[60px]) or change the header mobile height to h-[80px] so they align, and
if the mismatch was intentional add an inline comment explaining the extra
breathing room and leave both values as-is.

style={{ zIndex: 40 }} // Lower z-index to work with modal backdrop
>
<Menu />
Expand Down
2 changes: 1 addition & 1 deletion src/components/layout/header/Menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import NavbarMobile from './NavbarMobile';
function Menu() {
return (
<>
<div className="h-[72px] md:hidden">
<div className="h-[56px] w-full md:hidden">
<NavbarMobile />
</div>
<div className="container hidden h-[72px] md:block">
Expand Down
Loading