diff --git a/app/HomePage.tsx b/app/HomePage.tsx index 2f1c9e52..b4102a4e 100644 --- a/app/HomePage.tsx +++ b/app/HomePage.tsx @@ -191,12 +191,12 @@ function HomePage() {
{/* Hero Section - Full Screen */}
-
+
-
+
{/* Logo and Product Title - Horizontal Layout */}
-

+

Welcome to Monarch

{/* CTA Buttons */} -
+
- - @@ -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" > -
+
{/* Text Content */}
@@ -275,14 +275,14 @@ 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.

-
+
- @@ -290,7 +290,7 @@ function HomePage() { - - @@ -496,7 +496,7 @@ function HomePage() { {/* Footer CTA - Full Screen */}
-
+

Join the Monarch Community

diff --git a/app/market/[chainId]/[marketid]/RateChart.tsx b/app/market/[chainId]/[marketid]/RateChart.tsx index 88137715..27aaddca 100644 --- a/app/market/[chainId]/[marketid]/RateChart.tsx +++ b/app/market/[chainId]/[marketid]/RateChart.tsx @@ -125,8 +125,8 @@ function RateChart({ /> -
-
+
+
{isLoading ? (
diff --git a/app/market/[chainId]/[marketid]/VolumeChart.tsx b/app/market/[chainId]/[marketid]/VolumeChart.tsx index 802226c7..4e1b0d69 100644 --- a/app/market/[chainId]/[marketid]/VolumeChart.tsx +++ b/app/market/[chainId]/[marketid]/VolumeChart.tsx @@ -187,8 +187,8 @@ function VolumeChart({
-
-
+
+
{isLoading ? (
diff --git a/app/market/[chainId]/[marketid]/content.tsx b/app/market/[chainId]/[marketid]/content.tsx index bbfbbc5e..502f0a85 100644 --- a/app/market/[chainId]/[marketid]/content.tsx +++ b/app/market/[chainId]/[marketid]/content.tsx @@ -183,20 +183,21 @@ function MarketContent() { return ( <>
-
- {/* navigation bottons */} -
- -
- - +
+ +
@@ -243,7 +245,7 @@ function MarketContent() { />
-
+
Basic Info diff --git a/app/markets/components/markets.tsx b/app/markets/components/markets.tsx index 0bfe2b33..6f99e045 100644 --- a/app/markets/components/markets.tsx +++ b/app/markets/components/markets.tsx @@ -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( 'userTrustedVaults', defaultTrustedVaults, @@ -579,40 +595,43 @@ export default function Markets({ - - ) : ( - - ) - } - 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'} - /> - } - > - - + + +
- {/* Table Section - can expand beyond container in expanded mode */} -
+ {/* Table Section - centered when expanded, full width when compact */} +
{loading ? ( -
+
No data
) : ( -
+
{filteredMarkets.length > 0 ? ( diff --git a/src/components/layout/header/Header.tsx b/src/components/layout/header/Header.tsx index 5503b3cd..deb09df0 100644 --- a/src/components/layout/header/Header.tsx +++ b/src/components/layout/header/Header.tsx @@ -35,7 +35,7 @@ function Header({ ghost }: HeaderProps) {
{/* Spacer div */}
diff --git a/src/components/layout/header/Menu.tsx b/src/components/layout/header/Menu.tsx index 7a1f0f16..a8528397 100644 --- a/src/components/layout/header/Menu.tsx +++ b/src/components/layout/header/Menu.tsx @@ -4,7 +4,7 @@ import NavbarMobile from './NavbarMobile'; function Menu() { return ( <> -
+
diff --git a/src/components/layout/header/NavbarMobile.tsx b/src/components/layout/header/NavbarMobile.tsx index 43866387..cc6dd3ae 100644 --- a/src/components/layout/header/NavbarMobile.tsx +++ b/src/components/layout/header/NavbarMobile.tsx @@ -1,77 +1,155 @@ -import { useCallback, useState } from 'react'; -import { Cross1Icon, HamburgerMenuIcon } from '@radix-ui/react-icons'; -import * as NavigationMenu from '@radix-ui/react-navigation-menu'; +'use client'; + +import { useEffect, useState } from 'react'; +import { Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, DropdownSection } from '@heroui/react'; +import { HamburgerMenuIcon } from '@radix-ui/react-icons'; import { clsx } from 'clsx'; +import Image from 'next/image'; +import Link from 'next/link'; +import { useRouter } from 'next/navigation'; +import { useTheme } from 'next-themes'; +import { FaRegMoon } from 'react-icons/fa'; +import { FiSettings } from 'react-icons/fi'; +import { LuSunMedium } from 'react-icons/lu'; +import { RiBookLine, RiDiscordFill, RiGithubFill, RiLineChartLine, RiBriefcaseLine, RiGiftLine } from 'react-icons/ri'; import { useAccount } from 'wagmi'; +import { EXTERNAL_LINKS } from '@/utils/external'; +import logo from '../../imgs/logo.png'; import AccountConnect from './AccountConnect'; -import { NavbarLink, NavbarTitle } from './Navbar'; export default function NavbarMobile() { - const [isMobileMenuOpen, setMobileMenuOpen] = useState(false); - const toggleMobileMenuOpen = useCallback(() => setMobileMenuOpen((open) => !open), []); - + const { theme, setTheme } = useTheme(); const { address } = useAccount(); + const router = useRouter(); + const [mounted, setMounted] = useState(false); + const [isMenuOpen, setIsMenuOpen] = useState(false); + + useEffect(() => { + setMounted(true); + }, []); + + const toggleTheme = () => { + setTheme(theme === 'dark' ? 'light' : 'dark'); + setIsMenuOpen(false); + }; + + const handleExternalLink = (url: string) => { + window.open(url, '_blank'); + setIsMenuOpen(false); + }; - const navbarClass = [ - 'flex flex-1 flex-grow items-center justify-between', - 'rounded bg-surface p-4 backdrop-blur-2xl', - 'mx-4', - ].join(' '); + const handleNavigation = (path: string) => { + router.push(path); + setIsMenuOpen(false); + }; - if (isMobileMenuOpen) { - return ( - - ); - } + + + + } + onClick={() => handleNavigation('/markets')} + className="py-3" + > + Markets + + } + onClick={() => handleNavigation(address ? `/positions/${address}` : '/positions')} + className="py-3" + > + Portfolio + + } + onClick={() => handleNavigation(address ? `/rewards/${address}` : '/rewards')} + className="py-3" + > + Rewards + + + + } + onClick={() => handleExternalLink(EXTERNAL_LINKS.docs)} + > + Docs + + } + onClick={() => handleExternalLink(EXTERNAL_LINKS.discord)} + > + Discord + + } + onClick={() => handleExternalLink(EXTERNAL_LINKS.github)} + > + GitHub + + : ) + } + onClick={toggleTheme} + > + {mounted && (theme === 'dark' ? 'Light Theme' : 'Dark Theme')} + + } + onClick={() => handleNavigation('/settings')} + > + Settings + + + + +
- return ( - );