Usernav to be reused

This commit is contained in:
Belen Curcio 2020-10-01 12:23:01 -03:00
parent b447bbc322
commit ba4b3b765c
7 changed files with 58 additions and 7 deletions

View File

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

View File

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

View File

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

View File

@ -0,0 +1,38 @@
import React, {
FunctionComponent,
MutableRefObject,
useEffect,
useRef,
} from "react";
import { findDOMNode } from "react-dom";
export interface ClickOutsideProps {
onClickOutside: (e?: MouseEvent) => void;
children: React.ReactNode | any;
}
const ClickOutside: FunctionComponent<ClickOutsideProps> = ({
children,
onClickOutside,
}) => {
let node = useRef(null);
const handleClick = (e: MouseEvent) => {
console.log("eeee");
if (!e || !node.current.contains(e.target as HTMLInputElement)) {
console.log("eeee");
// onClickOutside && onClickOutside(e);
}
};
useEffect(() => {
document.addEventListener("click", handleClick, true);
return () => {
document.removeEventListener("click", handleClick);
};
});
return children;
};
export default ClickOutside;

View File

@ -0,0 +1 @@
export { default } from "./ClickOutside";

View File

@ -5,13 +5,21 @@ import s from "./Sidebar.module.css";
interface Props {
className?: string;
children?: any;
closeSidebar: () => void;
}
const Sidebar: FunctionComponent<Props> = ({ className, children }) => {
const Sidebar: FunctionComponent<Props> = ({
className,
children,
closeSidebar,
}) => {
const rootClassName = cn(s.root, className);
return (
<div className={rootClassName}>
<div className="fixed inset-0 overflow-hidden shadow-sm bg-black bg-opacity-25">
<div
className="fixed inset-0 overflow-hidden shadow-sm bg-black bg-opacity-25"
onClick={closeSidebar}
>
<div className="absolute inset-0 overflow-hidden">
<section className="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16 ">
<div className="w-screen max-w-2xl">

View File

@ -2,3 +2,4 @@ export { default as Button } from "./Button";
export { default as Container } from "./Container";
export { default as Sidebar } from "./Sidebar";
export { default as Logo } from "./Logo";
export { default as ClickOutside } from "./ClickOutside";