forked from crowetic/commerce
Header style improvements
This commit is contained in:
parent
450921bd55
commit
d8ff9bc4ff
@ -1,5 +1,5 @@
|
|||||||
.separator {
|
.separator {
|
||||||
@apply mx-3 bg-white;
|
@apply mx-3 bg-gray-400;
|
||||||
width: 1px;
|
width: 1px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
}
|
}
|
||||||
|
@ -1,3 +1,3 @@
|
|||||||
.link {
|
.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;
|
||||||
}
|
}
|
||||||
|
@ -6,7 +6,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.item {
|
.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 {
|
&:last-child {
|
||||||
@apply mr-0;
|
@apply mr-0;
|
||||||
|
@ -16,17 +16,20 @@ const countItems = (count: number, items: any[]) =>
|
|||||||
items.reduce(countItem, count)
|
items.reduce(countItem, count)
|
||||||
|
|
||||||
const UserNav: FC<Props> = ({ className }) => {
|
const UserNav: FC<Props> = ({ className }) => {
|
||||||
const { openSidebar } = useUI()
|
const { openSidebar, closeSidebar, displaySidebar } = useUI()
|
||||||
const { data } = useCart()
|
const { data } = useCart()
|
||||||
const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)
|
const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<nav className={cn(s.root, className)}>
|
<nav className={cn(s.root, className)}>
|
||||||
<ul className={s.list}>
|
<ul className={s.list}>
|
||||||
<li className={s.item} onClick={() => openSidebar()}>
|
<li
|
||||||
|
className={s.item}
|
||||||
|
onClick={() => (displaySidebar ? closeSidebar() : openSidebar())}
|
||||||
|
>
|
||||||
<Bag />
|
<Bag />
|
||||||
{itemsCount > 0 && (
|
{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}
|
{itemsCount}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
|
@ -5,26 +5,23 @@ const Bag = ({ ...props }) => {
|
|||||||
height="22"
|
height="22"
|
||||||
viewBox="0 0 20 22"
|
viewBox="0 0 20 22"
|
||||||
fill="none"
|
fill="none"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
stroke="currentColor"
|
||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
<path
|
<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"
|
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"
|
strokeWidth="1.5"
|
||||||
strokeLinecap="round"
|
strokeLinecap="round"
|
||||||
strokeLinejoin="round"
|
strokeLinejoin="round"
|
||||||
/>
|
/>
|
||||||
<path
|
<path
|
||||||
d="M1 5H19"
|
d="M1 5H19"
|
||||||
stroke="black"
|
|
||||||
strokeWidth="1.5"
|
strokeWidth="1.5"
|
||||||
strokeLinecap="round"
|
strokeLinecap="round"
|
||||||
strokeLinejoin="round"
|
strokeLinejoin="round"
|
||||||
/>
|
/>
|
||||||
<path
|
<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"
|
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"
|
strokeWidth="1.5"
|
||||||
strokeLinecap="round"
|
strokeLinecap="round"
|
||||||
strokeLinejoin="round"
|
strokeLinejoin="round"
|
||||||
|
Loading…
x
Reference in New Issue
Block a user