1 files changed, 44 insertions, 0 deletions
diff --git a/src/core/components/elements/Appbar/Appbar.jsx b/src/core/components/elements/Appbar/Appbar.jsx
new file mode 100644
index 00000000..098d0a33
--- /dev/null
+++ b/src/core/components/elements/Appbar/Appbar.jsx
@@ -0,0 +1,44 @@
+import { useRouter } from 'next/router'
+import Link from '../Link/Link'
+import { HomeIcon, Bars3Icon, ShoppingCartIcon, ChevronLeftIcon } from '@heroicons/react/24/outline'
+
+const AppBar = ({ title }) => {
+  const router = useRouter()
+
+  return (
+    <nav className='sticky top-0 z-50 bg-white border-b border-gray_r-6 flex justify-between'>
+      <div className='flex items-center'>
+        <button
+          type='button'
+          className='p-4'
+          onClick={() => router.back()}
+        >
+          <ChevronLeftIcon className='w-6 stroke-2' />
+        </button>
+        <div className='font-medium text-h-sm line-clamp-1'>{title}</div>
+      </div>
+      <div className='flex items-center px-2'>
+        <Link
+          href='/shop/cart'
+          className='py-4 px-2'
+        >
+          <ShoppingCartIcon className='w-6 text-gray_r-12' />
+        </Link>
+        <Link
+          href='/'
+          className='py-4 px-2'
+        >
+          <HomeIcon className='w-6 text-gray_r-12' />
+        </Link>
+        <Link
+          href='/my/menu'
+          className='py-4 px-2'
+        >
+          <Bars3Icon className='w-6 text-gray_r-12' />
+        </Link>
+      </div>
+    </nav>
+  )
+}
+
+export default AppBar