replace breadcrumb with navigation

components/user.tsx

@@ -0,0 +1,17 @@
+import { useContext } from 'react'
+
+import UserContext from './user/context'
+
+export default function User() {
+  const { username, role } = useContext(UserContext)
+
+  if (!username || !role) {
+    return null
+  }
+
+  return (
+    <div className="font-extrabold bg-red-400 px-2 py-1 mr-3 rounded-sm">
+      {username}
+    </div>
+  )
+}