Usernav to be reused

components/core/Layout/Layout.tsx

@@ -13,7 +13,7 @@ interface Props {
 
 const Layout: FunctionComponent<Props> = ({ className, children }) => {
   const rootClassName = cn(s.root, className);
-  const { displaySidebar } = useUI();
+  const { displaySidebar, closeSidebar } = useUI();
   return (
     <div className={rootClassName}>
       <Featurebar
@@ -25,7 +25,7 @@ const Layout: FunctionComponent<Props> = ({ className, children }) => {
         <main className="h-screen">{children}</main>
       </Container>
       {displaySidebar && (
-        <Sidebar>
+        <Sidebar closeSidebar={closeSidebar}>
           <CartSidebarView />
         </Sidebar>
       )}

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 />