Usernav to be reused

components/core/UserNav/UserNav.module.css

@@ -6,5 +6,5 @@
 }
 
 .item {
-  @apply mr-6 cursor-pointer;
+  @apply mr-6 cursor-pointer relative;
 }

components/core/UserNav/UserNav.tsx

@@ -16,8 +16,11 @@ const UserNav: FunctionComponent<Props> = ({ className }) => {
   return (
     <nav className={rootClassName}>
       <ul className={s.list}>
-        <li className={s.item}>
-          <Bag onClick={openSidebar} />
+        <li className={s.item} onClick={openSidebar}>
+          <Bag />
+          <span className="bg-black h-4 w-4 absolute rounded-full inset-3 text-white flex items-center justify-center font-bold text-xs">
+            1
+          </span>
         </li>
         <li className={s.item}>
           <Heart />