responsive NavBar

frontend/src/components/Layout/App/index.tsx

@@ -1,4 +1,5 @@
 import NavBar from 'src/components/NavBar'
+import NavBarMobile from 'src/components/NavBar/Mobile'
 import Box from 'src/theme/components/Box'
 
 import * as styles from './style.css'
@@ -11,6 +12,7 @@ export default function AppLayout({ children }: AppLayoutProps) {
   return (
     <>
       <NavBar />
+      <NavBarMobile />
       <Box as="span" className={styles.radial} />
       {children}
     </>

frontend/src/components/NavBar/Mobile/index.tsx

@@ -0,0 +1,21 @@
+import { NavLink } from 'react-router-dom'
+import Box from 'src/theme/components/Box'
+import { Row } from 'src/theme/components/Flex'
+import * as Text from 'src/theme/components/Text'
+
+import { links } from '..'
+import * as styles from './style.css'
+
+export default function NavBarMobile() {
+  return (
+    <Box className={styles.navBarContainer}>
+      <Row justifyContent="space-around">
+        {links.map(({ name, path }) => (
+          <NavLink key={path} to={path} className={({ isActive }) => styles.navLink({ active: isActive })}>
+            <Text.Body>{name}</Text.Body>
+          </NavLink>
+        ))}
+      </Row>
+    </Box>
+  )
+}

frontend/src/components/NavBar/Mobile/style.css.ts

@@ -0,0 +1,47 @@
+import { style } from '@vanilla-extract/css'
+import { recipe } from '@vanilla-extract/recipes'
+import { sprinkles } from 'src/theme/css/sprinkles.css'
+
+export const navBarContainer = style([
+  {
+    borderTopLeftRadius: '16px',
+    borderTopRightRadius: '16px',
+  },
+  sprinkles({
+    background: 'bg2',
+    position: 'fixed',
+    bottom: '0',
+    left: '0',
+    right: '0',
+    paddingX: '8',
+    paddingBottom: '18',
+    paddingTop: '16',
+    borderColor: 'border1',
+    borderTopWidth: '1px',
+    borderStyle: 'solid',
+    display: {
+      md: 'none',
+    },
+  }),
+])
+
+export const navLink = recipe({
+  base: [
+    sprinkles({
+      paddingX: '12',
+      paddingY: '8',
+      borderRadius: '10',
+    }),
+  ],
+
+  variants: {
+    active: {
+      true: sprinkles({ background: 'bg3' }),
+      false: {},
+    },
+  },
+
+  defaultVariants: {
+    active: false,
+  },
+})

frontend/src/components/NavBar/index.tsx

@@ -7,6 +7,17 @@ import * as Text from 'src/theme/components/Text'
 import Web3Status from '../Web3Status'
 import * as styles from './style.css'
 
+export const links = [
+  {
+    name: 'Launch',
+    path: '/launch',
+  },
+  {
+    name: 'Manager',
+    path: '/manage',
+  },
+]
+
 export default function NavBar() {
   const navigate = useNavigate()
 
@@ -22,15 +33,13 @@ export default function NavBar() {
             />
           </Box>
 
-          <Row gap="12">
-            <Link to="/launch">
-              <Text.Body className={styles.navLink}>Launch</Text.Body>
-            </Link>
-
-            <Link to="/manage">
-              <Text.Body className={styles.navLink}>Manage</Text.Body>
-            </Link>
-          </Row>
+          <Box className={styles.navLinksContainer}>
+            {links.map(({ name, path }) => (
+              <Link key={path} to={path}>
+                <Text.Body className={styles.navLink}>{name}</Text.Body>
+              </Link>
+            ))}
+          </Box>
         </Row>
 
         <Box>

frontend/src/components/NavBar/style.css.ts

@@ -25,6 +25,14 @@ export const logoContainer = style([
   }),
 ])
 
+export const navLinksContainer = sprinkles({
+  gap: '12',
+  display: {
+    sm: 'none',
+    md: 'flex',
+  },
+})
+
 export const navLink = sprinkles({
   fontWeight: 'medium',
   fontSize: '18',