feat: wip sidebar

apps/common/components/Sidebar.tsx

@@ -0,0 +1,76 @@
+import {type ReactElement, useState} from 'react';
+import Link from 'next/link';
+import {usePathname} from 'next/navigation';
+import {cl} from '@builtbymom/web3/utils';
+import {LogoYearn} from '@common/icons/LogoYearn';
+
+import {SearchBar} from './SearchBar';
+
+type TSidebarProps = {
+	tabs: {route: string; title: string; isAcitve?: boolean}[];
+};
+
+const links = [
+	{title: 'Governance', href: 'https://gov.yearn.fi/'},
+	{title: 'API', href: 'https://github.com/yearn/ydaemon'},
+	{title: 'Docs', href: 'https://docs.yearn.fi/'},
+	{title: 'Blog', href: 'https://blog.yearn.fi/'},
+	{title: 'Support', href: 'https://discord.com/invite/yearn'},
+	{title: 'Discord', href: 'https://discord.com/invite/yearn'},
+	{title: 'Paragraph', href: ''},
+	{title: 'Twitter', href: 'https://twitter.com/yearnfi'}
+];
+
+export function Sidebar(props: TSidebarProps): ReactElement {
+	const [searchValue, set_searchValue] = useState('');
+	const pathName = usePathname();
+
+	const currentTab = pathName.startsWith('/home/') ? pathName.split('/')[2] : '/';
+
+	return (
+		<div
+			className={
+				'flex h-full w-72 flex-col justify-between border border-[#29292980] bg-white/5 px-4 py-6 text-white'
+			}>
+			<div>
+				<LogoYearn
+					className={'mb-10 size-10 pl-[10px]'}
+					back={'text-blue-500'}
+					front={'text-white'}
+				/>
+				<SearchBar
+					className={'!w-full border-none !bg-gray-800'}
+					searchPlaceholder={'Search Apps'}
+					searchValue={searchValue}
+					onSearch={set_searchValue}
+				/>
+
+				<div className={'ml-2 mt-8 flex flex-col'}>
+					{props.tabs.map(tab => (
+						<Link
+							className={cl(
+								'py-2 text-base',
+								currentTab === tab.route ? 'text-white font-bold' : 'text-gray-400'
+							)}
+							href={tab.route === '/' ? tab.route : `/home/${tab.route}`}
+							key={tab.route}>
+							{tab.title}
+						</Link>
+					))}
+				</div>
+			</div>
+
+			<div className={'flex flex-wrap gap-x-3 gap-y-4 px-2'}>
+				{links.map(link => (
+					<Link
+						className={'text-xs text-gray-400'}
+						target={'_blank'}
+						href={link.href}
+						key={link.title}>
+						{link.title}
+					</Link>
+				))}
+			</div>
+		</div>
+	);
+}

pages/_app.tsx

@@ -12,6 +12,7 @@ import {IconAlertError} from '@yearn-finance/web-lib/icons/IconAlertError';
 import {IconCheckmark} from '@yearn-finance/web-lib/icons/IconCheckmark';
 import AppHeader from '@common/components/Header';
 import {Meta} from '@common/components/Meta';
+import {Sidebar} from '@common/components/Sidebar';
 import {WithFonts} from '@common/components/WithFonts';
 import {YearnContextApp} from '@common/contexts/useYearn';
 import {useCurrentApp} from '@common/hooks/useCurrentApp';
@@ -44,6 +45,46 @@ const WithLayout = memo(function WithLayout(props: {supportedNetworks: Chain[]}
 	const pathName = usePathname();
 	const {name} = useCurrentApp(router);
 
+	const isOnLanding = pathName?.startsWith('/home/') || pathName === '/';
+
+	if (isOnLanding) {
+		return (
+			<>
+				<div
+					id={'app'}
+					className={cl('mb-0 bg-landing-bg min-h-screen flex font-aeonik')}>
+					<div className={'flex w-full'}>
+						<motion.nav className={'p-4'}>
+							<Sidebar
+								tabs={[
+									{title: 'Home', route: '/'},
+									{title: 'Community Apps', route: 'community'},
+									{title: 'Yearn X Projects', route: 'yearn-x'}
+								]}
+							/>
+						</motion.nav>
+						<LazyMotion features={domAnimation}>
+							<AnimatePresence mode={'wait'}>
+								<motion.div
+									key={`${name}_${pathName}`}
+									initial={'initial'}
+									animate={'enter'}
+									exit={'exit'}
+									variants={variants}
+									className={'w-full'}>
+									<Component
+										router={props.router}
+										{...pageProps}
+									/>
+								</motion.div>
+							</AnimatePresence>
+						</LazyMotion>
+					</div>
+				</div>
+			</>
+		);
+	}
+
 	return (
 		<>
 			<div className={cl('mx-auto mb-0 flex font-aeonik max-w-6xl absolute top-0 inset-x-0')}>

pages/home/[category].tsx

@@ -0,0 +1,25 @@
+import {usePathname} from 'next/navigation';
+
+import type {ReactElement} from 'react';
+
+const TitlesDictionary: {[key: string]: string} = {
+	'/': '',
+	community: 'Community Apps',
+	'yearn-x': 'Yearn X Partners'
+};
+
+export default function Index(): ReactElement {
+	const pathName = usePathname();
+
+	const currentTab = pathName.startsWith('/home/') ? pathName.split('/')[2] : '/';
+
+	return (
+		<div className={'my-20 flex w-full justify-center'}>
+			<div className={'w-full max-w-6xl'}>
+				<div className={'flex w-full justify-start'}>
+					<p className={'text-[64px] font-bold leading-[64px] text-white'}>{TitlesDictionary[currentTab]}</p>
+				</div>
+			</div>
+		</div>
+	);
+}

pages/home/index.tsx

@@ -0,0 +1,17 @@
+import {type ReactElement} from 'react';
+
+export function Home(): ReactElement {
+	return (
+		<div className={'my-20 flex w-full justify-center'}>
+			<div className={'w-full max-w-6xl'}>
+				<div
+					className={
+						'flex w-full  justify-start text-[100px] font-bold uppercase leading-[108px] text-white'
+					}>
+					{'Stake '}
+					<br /> {'with yearn'}
+				</div>
+			</div>
+		</div>
+	);
+}

pages/home/search.tsx

@@ -0,0 +1,5 @@
+import type {ReactElement} from 'react';
+
+export function SeachResults(): ReactElement {
+	return <div className={'text-white'}>{'Search Results'}</div>;
+}