4
0
forked from crowetic/commerce

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

View File

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

View File

@ -16,8 +16,11 @@ const UserNav: FunctionComponent<Props> = ({ className }) => {
return ( return (
<nav className={rootClassName}> <nav className={rootClassName}>
<ul className={s.list}> <ul className={s.list}>
<li className={s.item}> <li className={s.item} onClick={openSidebar}>
<Bag 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>
<li className={s.item}> <li className={s.item}>
<Heart /> <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 { interface Props {
className?: string; className?: string;
children?: any; children?: any;
closeSidebar: () => void;
} }
const Sidebar: FunctionComponent<Props> = ({ className, children }) => { const Sidebar: FunctionComponent<Props> = ({
className,
children,
closeSidebar,
}) => {
const rootClassName = cn(s.root, className); const rootClassName = cn(s.root, className);
return ( return (
<div className={rootClassName}> <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"> <div className="absolute inset-0 overflow-hidden">
<section className="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16 "> <section className="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16 ">
<div className="w-screen max-w-2xl"> <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 Container } from "./Container";
export { default as Sidebar } from "./Sidebar"; export { default as Sidebar } from "./Sidebar";
export { default as Logo } from "./Logo"; export { default as Logo } from "./Logo";
export { default as ClickOutside } from "./ClickOutside";