UI State changes

components/core/UserNav/UserNav.module.css

@@ -0,0 +1,10 @@
+.root {
+}
+
+.list {
+  @apply flex flex-row items-center;
+}
+
+.item {
+  @apply mr-6 cursor-pointer;
+}

components/core/UserNav/UserNav.tsx

@@ -0,0 +1,33 @@
+import cn from "classnames";
+import React, { FunctionComponent } from "react";
+import s from "./UserNav.module.css";
+import { Avatar } from "@components/core";
+import { Heart, Bag } from "@components/icon";
+import { useUI } from "@components/ui/context";
+
+interface Props {
+  className?: string;
+}
+
+const UserNav: FunctionComponent<Props> = ({ className }) => {
+  const rootClassName = cn(s.root, className);
+  const { openSidebar } = useUI();
+
+  return (
+    <nav className={rootClassName}>
+      <ul className={s.list}>
+        <li className={s.item}>
+          <Bag onClick={openSidebar} />
+        </li>
+        <li className={s.item}>
+          <Heart />
+        </li>
+        <li className={s.item}>
+          <Avatar />
+        </li>
+      </ul>
+    </nav>
+  );
+};
+
+export default UserNav;

components/core/UserNav/index.ts

@@ -0,0 +1 @@
+export { default } from "./UserNav";