diff --git a/src/App.js b/src/App.js
index 16c40fe..49ac630 100644
--- a/src/App.js
+++ b/src/App.js
@@ -5,6 +5,9 @@ import Toggle from './components/Toggle';
import Inc from './components/Inc';
import Mount from './components/Mount';
import Hover from './components/Hover';
+import Cookie from "./components/Cookie";
+import { PageWrapper } from "./state";
+import Nav from "./components/Nav";
import Menu from "./Menu";
import blue from "./blue.png";
import purp from "./purp.png";
@@ -13,38 +16,42 @@ import green from "./green.png";
function App() {
return (
-
-
-
- Super Cool
-
+
+
+
+
+ Super Cool
+
-
- Some card
-
-
- Some card
-
-
- Some card
-
-
- Some card
-
-
-
-
+
+ Some card
+
+
+ Some card
+
+
+ Some card
+
+
+ Some card
+
+
+
+
-
-);
+const Menu = () => {
+ const { toggleMenu } = useAppState();
+
+ return (
+
+
+
+
+)};
export default Menu;
diff --git a/src/components/Cookie.js b/src/components/Cookie.js
new file mode 100644
index 0000000..00b838e
--- /dev/null
+++ b/src/components/Cookie.js
@@ -0,0 +1,22 @@
+import { useCookies } from "../hooks";
+
+const Cookie = () => {
+ const [ cookie, setCookie ] = useCookies({ key: "tester" });
+
+ return (
+
+
{cookie || ''}
+
-
+
Some card
diff --git a/src/components/Nav.js b/src/components/Nav.js
new file mode 100644
index 0000000..a56ff7c
--- /dev/null
+++ b/src/components/Nav.js
@@ -0,0 +1,30 @@
+import { useAppState } from "../state";
+import { useScrollFreeze } from "../hooks";
+
+const NavWrapper = () => {
+ const { isMenuOpen } = useAppState();
+ if (!isMenuOpen) return null;
+ return
+ Hello
+ Close
+
+ )
+}
+
+export default NavWrapper;
\ No newline at end of file
diff --git a/src/components/PageWrapper.js b/src/components/PageWrapper.js
deleted file mode 100644
index 20de228..0000000
--- a/src/components/PageWrapper.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { createConext, useState } from 'react';
-import { useToggle } from '../hooks';
-
-const AppContext = createConext({
- isMenuOpen: false,
-});
-
-const PageWrapper = ({children}) => {
- const {isToggled, toggle} = useToggle();
- return
- {children}
-
-};
\ No newline at end of file
diff --git a/src/hooks/index.js b/src/hooks/index.js
index 08006d7..0966ee1 100644
--- a/src/hooks/index.js
+++ b/src/hooks/index.js
@@ -1,4 +1,8 @@
+export * from './useCookie';
export * from './useHover';
export * from './useInc';
+export * from './useMeasure';
export * from './useMount';
-export * from './useToggle';
\ No newline at end of file
+export * from './useScrollFreeze';
+export * from './useToggle';
+export * from './useWindowWidth';
diff --git a/src/hooks/useCookie.js b/src/hooks/useCookie.js
new file mode 100644
index 0000000..a13fb1a
--- /dev/null
+++ b/src/hooks/useCookie.js
@@ -0,0 +1,13 @@
+import { useState, useEffect } from 'react';
+import Cookies from 'js-cookie';
+
+export const useCookies = ({ key }) => {
+ const initial = Cookies.get(key);
+ const [ cookie, setStateCookie ] = useState(initial);
+
+ useEffect(() => {
+ Cookies.set(key, cookie)
+ }, [cookie, key]);
+
+ return [ cookie, setStateCookie ];
+};
\ No newline at end of file
diff --git a/src/hooks/useMeasure.js b/src/hooks/useMeasure.js
new file mode 100644
index 0000000..7df3a78
--- /dev/null
+++ b/src/hooks/useMeasure.js
@@ -0,0 +1,23 @@
+import { useState, useRef, useEffect } from 'react';
+
+export const useMeasure = () => {
+ const ref = useRef();
+
+ const [bounds, setBounds] = useState({ left: 0, top: 0, width: 0, height: 0 });
+
+ const [ resizeO ] = useState(() => {
+ return new ResizeObserver(([entry]) => setBounds(entry.contentRect))
+ });
+
+ useEffect(() => {
+ if (ref.current) {
+ resizeO.observe(ref.current);
+ }
+
+ return () => {
+ return resizeO.disconnect();
+ };
+ }, [resizeO]);
+
+ return [{ ref }, bounds];
+}
\ No newline at end of file
diff --git a/src/hooks/useScrollFreeze.js b/src/hooks/useScrollFreeze.js
new file mode 100644
index 0000000..230c02d
--- /dev/null
+++ b/src/hooks/useScrollFreeze.js
@@ -0,0 +1,12 @@
+import { useLayoutEffect } from 'react';
+
+export const useScrollFreeze = () => {
+ useLayoutEffect(() => {
+ const original = window.getComputedStyle(document.body).overflow;
+ document.body.style.overflow = 'hidden';
+
+ return () => {
+ document.body.style.overflow = original;
+ };
+ }, [])
+};
\ No newline at end of file
diff --git a/src/hooks/useWindowWidth.js b/src/hooks/useWindowWidth.js
new file mode 100644
index 0000000..ae82cd4
--- /dev/null
+++ b/src/hooks/useWindowWidth.js
@@ -0,0 +1,17 @@
+import { useState, useEffect } from "react";
+
+export const useWindowWidth = () => {
+ const [width, setWidth] = useState(window.innerWidth);
+
+ useEffect(() => {
+ const handleResize = () => {
+ setWidth(window.innerWidth);
+ }
+ window.addEventListener('resize', handleResize);
+ return () => {
+ window.removeEventListener('resize', handleResize);
+ };
+ });
+
+ return width;
+}
\ No newline at end of file
diff --git a/src/state/PageWrapper.js b/src/state/PageWrapper.js
new file mode 100644
index 0000000..c9d3958
--- /dev/null
+++ b/src/state/PageWrapper.js
@@ -0,0 +1,17 @@
+import { createContext, useContext } from 'react';
+import { useToggle } from '../hooks';
+
+export const AppContext = createContext({
+ isMenuOpen: false,
+});
+
+export const PageWrapper = ({children}) => {
+ const { isToggled, toggle } = useToggle(false);
+ return (
+
+ {children}
+
+ );
+};
+
+export const useAppState = () => useContext(AppContext);
\ No newline at end of file
diff --git a/src/state/index.js b/src/state/index.js
new file mode 100644
index 0000000..4919d41
--- /dev/null
+++ b/src/state/index.js
@@ -0,0 +1 @@
+export * from './PageWrapper';
- 
- 
- 
-