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>
           )}

components/icon/Bag.tsx

@@ -5,26 +5,23 @@ const Bag = ({ ...props }) => {
       height="22"
       viewBox="0 0 20 22"
       fill="none"
-      xmlns="http://www.w3.org/2000/svg"
+      stroke="currentColor"
       {...props}
     >
       <path
         d="M4 1L1 5V19C1 19.5304 1.21071 20.0391 1.58579 20.4142C1.96086 20.7893 2.46957 21 3 21H17C17.5304 21 18.0391 20.7893 18.4142 20.4142C18.7893 20.0391 19 19.5304 19 19V5L16 1H4Z"
-        stroke="black"
         strokeWidth="1.5"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
         d="M1 5H19"
-        stroke="black"
         strokeWidth="1.5"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
         d="M14 9C14 10.0609 13.5786 11.0783 12.8284 11.8284C12.0783 12.5786 11.0609 13 10 13C8.93913 13 7.92172 12.5786 7.17157 11.8284C6.42143 11.0783 6 10.0609 6 9"
-        stroke="black"
         strokeWidth="1.5"
         strokeLinecap="round"
         strokeLinejoin="round"