diff --git a/apps/common/components/MobileNavbar.tsx b/apps/common/components/MobileNavbar.tsx
new file mode 100644
index 000000000..1ea2a01f1
--- /dev/null
+++ b/apps/common/components/MobileNavbar.tsx
@@ -0,0 +1,72 @@
+import Link from 'next/link';
+import {usePathname} from 'next/navigation';
+import {cl} from '@builtbymom/web3/utils';
+import {IconDiscord} from '@common/icons/IconDiscord';
+import {IconParagraph} from '@common/icons/IconParagraph';
+import {IconTwitter} from '@common/icons/IconTwitter';
+import {iconsDict, LANDING_SIDEBAR_LINKS, MENU_TABS} from '@common/utils/constants';
+
+import type {ReactElement} from 'react';
+
+export function MobileNavbar({onClose}: {onClose: VoidFunction}): ReactElement {
+ const pathName = usePathname();
+
+ const currentTab = pathName?.startsWith('/apps/') ? pathName?.split('/')[2] : 'apps';
+
+ return (
+
+
+ {MENU_TABS.map(tab => (
+
+
+ {iconsDict[tab.route as keyof typeof iconsDict]}
+
+
{tab.title}
+
+ ))}
+
+
+
+
+ {LANDING_SIDEBAR_LINKS.slice(0, 5).map(link => (
+
+ {link.title}
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/apps/common/components/MobileTopNav.tsx b/apps/common/components/MobileTopNav.tsx
new file mode 100644
index 000000000..bc46c9745
--- /dev/null
+++ b/apps/common/components/MobileTopNav.tsx
@@ -0,0 +1,79 @@
+import {type ReactElement, useCallback} from 'react';
+import {useRouter} from 'next/router';
+import {useSearch} from '@common/contexts/useSearch';
+import {IconBurgerPlain} from '@common/icons/IconBurgerPlain';
+import {IconCross} from '@common/icons/IconCross';
+import {IconSearch} from '@common/icons/IconSearch';
+import {LogoYearn} from '@common/icons/LogoYearn';
+
+import {SearchBar} from './SearchBar';
+
+export function MobileTopNav({
+ isSearchOpen,
+ isNavbarOpen,
+ set_isSearchOpen,
+ set_isNavbarOpen
+}: {
+ isSearchOpen: boolean;
+ isNavbarOpen: boolean;
+ set_isSearchOpen: React.Dispatch
>;
+ set_isNavbarOpen: React.Dispatch>;
+}): ReactElement {
+ const {configuration, dispatch} = useSearch();
+ const router = useRouter();
+
+ const onSearchClick = useCallback(() => {
+ if (!configuration.searchValue) {
+ router.push('/apps');
+ return;
+ }
+ router.push(`/apps/search/${encodeURIComponent(configuration.searchValue)}`);
+ }, [configuration.searchValue, router]);
+
+ return (
+
+
+
+
+
+
+
+
+
+ {isSearchOpen && (
+
+ dispatch({searchValue: value})}
+ searchPlaceholder={'Search App'}
+ onSearchClick={onSearchClick}
+ shouldSearchByClick
+ />
+
+ )}
+
+
+ {menu.map(link => (
+
+ {link.label}
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {'earn with'}
+
{'yearn'}
+
+
+
+
+
+
+
+
+ {
+ 'Yearn is a decentralized suite of products helping individuals, DAOs, and other protocols earn yield on their digital assets.'
+ }
+
+
-
+
props.onSearchClick?.()}
+ className={cl(props.iconClassName, 'absolute right-0 text-neutral-400')}>
+ {props.shouldSearchByClick && props.searchValue ? (
+
+
+
+ ) : (
+
+ )}