[NP] start of dynamic notch
diff --git a/pages/_app.js b/pages/_app.js
index 3c05c22..2932bb7 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,6 +1,7 @@
import '../styles/globals.css';
import NavBar from '../Components/NavBar';
import { ThemeProvider } from 'theme-ui';
+import React from 'react';
import Styles from '../styles/globals.module.css';
const theme = {
@@ -20,7 +21,7 @@
hint: '#E4E4E4',
panelColor: "#F0F0F0",
fadeGradient: "rgba(240, 240, 240, 1)",
- offset: "1px",
+ offset: "2.5px",
modes: {
dark: {
@@ -35,7 +36,7 @@
hint: '#242424',
panelColor: "rgba(255, 255, 255, 0.05)",
fadeGradient: "rgba(48, 48, 48, 1)",
- offset: "-45px"
+ offset: "-20px"
}
}
},
@@ -43,10 +44,20 @@
function App({ Component, pageProps }) {
+ const ref = React.forwardRef(function Ref(props, ref) {
+ return <NavBar {...props} ref={ref} />
+ });
+
+ const navbar = React.useRef(ref);
+
return <>
<ThemeProvider theme={theme}>
- <NavBar />
- <Component {...pageProps} />
+ {navbar.current.render()}
+ <Component
+ {...pageProps}
+ navbar={navbar}
+ navRef={ref}
+ />
<div className={Styles.container} />
</ThemeProvider>
</>
diff --git a/pages/index.js b/pages/index.js
index d151a7b..5e604f7 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -2,7 +2,8 @@
import Header from '../Components/Header';
import { AutoLayout, Panel, Title, Subtitle, Text, Divider } from '../Components/Panels';
-export default function Home() {
+export default function Home(props) {
+ console.log(props)
return (
<>
<Header
@@ -16,6 +17,7 @@
index={true}
fullscreen={true}
/>
+ <button onClick={() => props.navbar.showMessage("Welcome to Clicks! This is a test message. It will disappear in 5 seconds.")}>aaaAAAAa</button>
<AutoLayout>
<Panel halfSize={false}>
<Title>Projects</Title>