Header style improvements

components/core/Featurebar/Featurebar.module.css

@@ -1,5 +1,5 @@
 .separator {
-  @apply mx-3 bg-white;
+  @apply mx-3 bg-gray-400;
   width: 1px;
   height: 20px;
 }

components/core/Navbar/Navbar.module.css

@@ -1,3 +1,3 @@
 .link {
-  @apply group text-gray-500 inline-flex items-center text-base leading-6 font-medium hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 cursor-pointer;
+  @apply group text-gray-500 inline-flex items-center text-base leading-6 font-medium hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-100 cursor-pointer;
 }

components/core/UserNav/UserNav.module.css

@@ -6,7 +6,11 @@
 }
 
 .item {
-  @apply mr-6 cursor-pointer relative;
+  @apply mr-6 cursor-pointer relative transition ease-in-out duration-100;
+
+  &:hover {
+    @apply text-gray-500;
+  }
 
   &:last-child {
     @apply mr-0;

components/core/UserNav/UserNav.tsx

@@ -16,17 +16,20 @@ const countItems = (count: number, items: any[]) =>
   items.reduce(countItem, count)
 
 const UserNav: FC<Props> = ({ className }) => {
-  const { openSidebar } = useUI()
+  const { openSidebar, closeSidebar, displaySidebar } = useUI()
   const { data } = useCart()
   const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)
 
   return (
     <nav className={cn(s.root, className)}>
       <ul className={s.list}>
-        <li className={s.item} onClick={() => openSidebar()}>
+        <li
+          className={s.item}
+          onClick={() => (displaySidebar ? closeSidebar() : openSidebar())}
+        >
           <Bag />
           {itemsCount > 0 && (
-            <span className="bg-black h-4 w-4 absolute rounded-full inset-3 text-white flex items-center justify-center font-bold text-xs">
+            <span className="bg-black h-4 w-4 absolute rounded-full right-3 top-3 text-white flex items-center justify-center font-bold text-xs">
               {itemsCount}
             </span>
           )}