Feat/asa 167 mobile (#14)

* feat: hamburger menu

* style: search responsive

components/Card/CardInfo/index.tsx

@@ -1,4 +1,4 @@
-import { CryptoIcon, Typography as TypographyUI } from '@astraprotocol/astra-ui'
+import { CryptoIcon, CryptoIconNames, Typography as TypographyUI } from '@astraprotocol/astra-ui'
 import clsx from 'clsx'
 import CopyButton from 'components/Button/CopyButton'
 import Typography from 'components/Typography'
@@ -135,7 +135,11 @@ export default function CardInfo({
 									{type === 'balance' ? (
 										<div className="block-center">
 											<TypographyUI.Balance
-												icon={<CryptoIcon name={'asa'} />}
+												icon={
+													<CryptoIcon
+														name={process.env.NEXT_PUBLIC_EVM_TOKEN as CryptoIconNames}
+													/>
+												}
 												value={content.value}
 												currency={content.suffix}
 												size="sm"

components/Card/CardInfo/style.module.scss

@@ -17,7 +17,7 @@
 	padding: 12px;
 }
 .copyColor {
-	color: #2295ff;
+	color: var(--link-color-useful);
 }
 
 .primaryColor {

components/Collapse/index.tsx

@@ -0,0 +1,64 @@
+import clsx from 'clsx'
+import Link from 'next/link'
+import { useEffect, useState } from 'react'
+import styles from './style.module.scss'
+
+export type CollapseItem = {
+	element: React.ReactNode
+	link?: string
+}
+
+export type CollapseProps = {
+	open?: boolean
+	title?: React.ReactNode
+	items: CollapseItem[]
+	classes?: {
+		wrapper?: string
+		header?: string
+		item?: string
+		wappterItem?: string
+	}
+}
+export default function Collapse({ title, items, classes, open }: CollapseProps) {
+	const [_open, _setOpen] = useState(false)
+
+	useEffect(() => {
+		_setOpen(open)
+	}, [open])
+
+	return (
+		<div className={clsx(styles.collapse, classes?.wrapper)}>
+			{!!title && (
+				<div
+					className={clsx(styles.header, classes?.header, 'padding-sm', 'pointer', 'text text-bold')}
+					onClick={() => _setOpen(!_open)}
+				>
+					<span className="padding-right-md text-lg">{title}</span>
+					<span
+						className={clsx('text-sm', {
+							'right-arrow-icon': !_open,
+							'dropdown-icon': _open
+						})}
+					></span>
+				</div>
+			)}
+			<div
+				className={clsx(styles.content, classes?.wappterItem, {
+					[styles.show]: _open
+				})}
+			>
+				{items.map((item, index) => (
+					<div className={clsx(classes?.item)} key={`${item.link}-${index}`}>
+						{!!item.link ? (
+							<Link href={item.link}>
+								<a className="link pointer text-base padding-md">{item.element}</a>
+							</Link>
+						) : (
+							item.element
+						)}
+					</div>
+				))}
+			</div>
+		</div>
+	)
+}

components/Collapse/style.module.scss

@@ -0,0 +1,19 @@
+.collapse {
+	overflow-y: hidden;
+	.content {
+		max-height: 0;
+		transition: max-height 0.15s ease-out;
+
+		a {
+			display: flex;
+		}
+	}
+	.show {
+		max-height: 500px;
+		transition: max-height 0.25s ease-in;
+	}
+	.header {
+		display: flex;
+		align-items: center;
+	}
+}

components/Modal/style.module.scss

@@ -1,11 +1,11 @@
 .modal {
-	position: absolute;
+	position: fixed;
 	top: 0;
 	left: 0;
-	width: 100vw;
-	height: 100vh;
+	width: 100%;
+	height: 100%;
+	overflow-x: hidden;
 	display: flex;
-	justify-content: center;
 	z-index: 100;
 	background-color: var(--contrast-color-theme-10);
 }

components/Navbar/MobileNavigation.tsx

@@ -0,0 +1,129 @@
+import clsx from 'clsx'
+import Collapse, { CollapseProps } from 'components/Collapse'
+import Typography from 'components/Typography'
+import Image from 'next/image'
+import { useRouter } from 'next/router'
+import { MenuItem } from './Navigation'
+import styles from './style.module.scss'
+
+type MobileNavigationProps = {
+	items: MenuItem[]
+}
+
+type LinkItem = {
+	text: string
+	link?: string
+}
+
+const Checked = () => <span className="checked-icon alert-color-success block-ver-center"></span>
+
+const LinkMenuItem = ({
+	link,
+	label,
+	pathname,
+	classes,
+	prefix
+}: {
+	link?: string
+	label?: string
+	pathname?: string
+	classes?: string
+	prefix?: React.ReactNode
+}) => (
+	<div
+		className={clsx('radius-base', 'padding-sm', styles.subItem, {
+			[styles.subActive]: pathname === link
+		})}
+	>
+		<span className="block-center">
+			{!!prefix && prefix}
+			<Typography.LinkText href={link} classes={clsx('text text-lg', styles.link, classes)}>
+				{label}
+			</Typography.LinkText>
+		</span>
+		{pathname === link && <Checked />}
+	</div>
+)
+
+export default function MoibleNavigation({ items }: MobileNavigationProps) {
+	const router = useRouter()
+	const { pathname, locale } = router
+
+	const _renderMenu = () => {
+		const menus: React.ReactNode[] = []
+		let titleElement = null
+		for (let item of items) {
+			if (item.submenus) {
+				let subCollapse = []
+				if (item.type == 'locale') {
+					const localeItem = item.submenus.find(item => item.link === `/${locale}`)
+					titleElement = (
+						<>
+							<span
+								className={clsx(
+									'text-base text-center text-bold',
+									'contrast-color-70',
+									'block-center pointer padding-top-xs'
+								)}
+							>
+								<Image alt={locale} src={`/images/flag/${locale}.svg`} width={30} height={19} />
+								<span className="padding-left-xs">{localeItem.label}</span>
+							</span>
+						</>
+					)
+					subCollapse = item.submenus.map(item => ({
+						element: (
+							<LinkMenuItem
+								link={item.link}
+								label={item.label}
+								pathname={pathname}
+								classes={'padding-left-xs'}
+								key={item.label}
+								prefix={
+									<span className="padding-left-md">
+										<Image
+											alt={locale}
+											src={`/images/flag/${item.link}.svg`}
+											width={30}
+											height={19}
+										/>
+									</span>
+								}
+							/>
+						)
+					}))
+				} else {
+					titleElement = (
+						<span>
+							{item.label} {item.prefixIcon}
+						</span>
+					)
+					subCollapse = item.submenus.map(item => ({
+						element: (
+							<LinkMenuItem
+								link={item.link}
+								label={item.label}
+								key={item.label}
+								pathname={pathname}
+								classes={'padding-left-md'}
+								prefix={item.prefix}
+							/>
+						)
+					}))
+				}
+
+				const collapse: CollapseProps = {
+					title: titleElement,
+					items: subCollapse
+				}
+				menus.push(
+					<Collapse key={item.label} {...collapse} classes={{ wrapper: 'border border-bottom-base' }} />
+				)
+			} else {
+				menus.push(<LinkMenuItem key={item.label} link={item.link} label={item.label} pathname={pathname} />)
+			}
+		}
+		return menus
+	}
+	return <>{_renderMenu()}</>
+}

components/Navbar/Navigation.tsx

@@ -7,9 +7,9 @@ import Image from 'next/image'
 import { useRouter } from 'next/router'
 import useOutsideAlerter from '../../hooks/useOutsideElement'
 import styles from './style.module.scss'
-type MenuType = 'static' | 'locale'
+export type MenuType = 'static' | 'locale'
 
-type SubMenuItem = {
+export type SubMenuItem = {
 	id: string
 	label: string
 	prefix?: JSX.Element
@@ -23,13 +23,12 @@ export type MenuItem = {
 	label?: string
 	link?: string
 	show?: boolean
-	background?: boolean
 	prefixIcon?: React.ReactNode
 	submenus?: SubMenuItem[]
 	type?: MenuType
 }
 
-type NavigationProps = {
+export type NavigationProps = {
 	items: MenuItem[]
 }
 
@@ -102,13 +101,12 @@ export default function Navigation({ items }: NavigationProps) {
 	}
 	return (
 		<ul className={styles.navigation} ref={wrapperRef}>
-			{_menuItems.map(({ link = '', prefixIcon, label, show, id, submenus: sub1, type, background }) => (
+			{_menuItems.map(({ link = '', prefixIcon, label, show, id, submenus: sub1, type }) => (
 				<li
 					key={`${link} + ${label}`}
-					className={clsx(styles.item, 'margin-left-lg', 'block-center', {
-						[styles.background]: background,
-						'padding-left-lg padding-right-lg radius-lg': background,
-						'padding-right-md': !background
+					className={clsx(styles.item, 'margin-left-lg', 'block-center', 'padding-right-lg radius-lg', {
+						[`padding-left-lg ${styles.background}`]: prefixIcon,
+						'padding-right-md padding-left-xs': !prefixIcon
 					})}
 					onClick={event => _showSubMenu(event, [id])}
 				>