forked from crowetic/commerce
Usernav to be reused
This commit is contained in:
parent
b447bbc322
commit
ba4b3b765c
@ -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>
|
||||||
)}
|
)}
|
||||||
|
@ -6,5 +6,5 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.item {
|
.item {
|
||||||
@apply mr-6 cursor-pointer;
|
@apply mr-6 cursor-pointer relative;
|
||||||
}
|
}
|
||||||
|
@ -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 />
|
||||||
|
38
components/ui/ClickOutside/ClickOutside.tsx
Normal file
38
components/ui/ClickOutside/ClickOutside.tsx
Normal 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;
|
1
components/ui/ClickOutside/index.ts
Normal file
1
components/ui/ClickOutside/index.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
export { default } from "./ClickOutside";
|
@ -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">
|
||||||
|
@ -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";
|
||||||
|
Loading…
x
Reference in New Issue
Block a user