[NP] start of dynamic notch
diff --git a/Components/NavBar.js b/Components/NavBar.js
index de7d12e..7ab5e79 100644
--- a/Components/NavBar.js
+++ b/Components/NavBar.js
@@ -15,12 +15,51 @@
class NavBar extends Component {
constructor(props) {
super(props);
+ this.showSubBar = this.showSubBar.bind(this);
+ this.hideSubBar = this.hideSubBar.bind(this);
+ this.showMessage = this.showMessage.bind(this);
+ this.state = {
+ subBar: false,
+ element: <></>
+ }
+ this.displayName = "NavBar";
+ }
+
+ showSubBar(element, timeout) {
+ this.setState({
+ subBar: true,
+ element: element
+ })
+ if (timeout) {
+ setTimeout(() => {
+ this.setState({
+ subBar: false,
+ element: element
+ })
+ setTimeout(() => {
+ this.setState({
+ subBar: false,
+ element: <></>
+ })
+ }, 0.31 * 1000)
+ }, timeout * 1000)
+ }
+ }
+
+ hideSubBar() {
+ this.setState({
+ subBar: false
+ })
+ }
+
+ showMessage(text) {
+ this.showSubBar(<p className={Styles.message}>{text}</p>, 5)
}
render() {
return (
- <>
- <div className={Styles.container}>
+ <div className={Styles.cutoffContainer}>
+ <div className={Styles.container + " " + (this.state.subBar ? Styles.slideUp : null)}>
<a href="#skipNav" className={Styles.skipNav}>Skip navigation</a>
<a className={Styles.icon} href="/"><img alt="Clicks" className={Styles.icon} src="https://assets.clicks.codes/web/logos/clicks.svg" /></a>
<Divider />
@@ -31,8 +70,11 @@
<a className={Styles.icon} href="/hooky"><img alt="Hooky" className={Styles.icon} src="https://assets.clicks.codes/bots/hooky/circle.svg" /></a>
<Divider />
<ThemeChangeButton/>
+ <Divider />
+ <a className={Styles.icon} onClick={() => {this.showMessage("You're mum")}}>More</a>
</div>
- </>
+ <div className={Styles.container + " " + (this.state.subBar ? Styles.slideUp : null)}>{this.state.element}</div>
+ </div>
)
}
}
diff --git a/Components/ThemeChangeButton.js b/Components/ThemeChangeButton.js
index 449dcff..86b112b 100644
--- a/Components/ThemeChangeButton.js
+++ b/Components/ThemeChangeButton.js
@@ -14,7 +14,7 @@
return (
<>
- <a className={Styles.icon + " " + Styles.ThemeChangeButton} onClick={(e) => {
+ <a className={Styles.icon + " " + Styles.themeChangeIcon} onClick={(e) => {
e.preventDefault();
setColorMode(colorMode === 'light' ? 'dark' : 'light');
}} href="#">
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>
diff --git a/styles/Components/header.module.css b/styles/Components/header.module.css
index 244a474..6d6b338 100644
--- a/styles/Components/header.module.css
+++ b/styles/Components/header.module.css
@@ -44,6 +44,7 @@
padding-right: 10px;
margin-top: 20px;
margin-bottom: 20vh;
+ box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.25);
}
.title {
diff --git a/styles/Components/navbar.module.css b/styles/Components/navbar.module.css
index 74d7eea..7ca3c5f 100644
--- a/styles/Components/navbar.module.css
+++ b/styles/Components/navbar.module.css
@@ -13,20 +13,19 @@
}
.container {
- position: fixed;
- top: 0;
+ height: 42px;
+ width: 100%;
+
display: flex;
+ flex-direction: row;
justify-content: left;
align-items: center;
- flex-direction: row;
- overflow-y: hidden;
gap: 10px;
- height: 42px;
- padding: 5px;
padding-left: 25px;
-
- z-index: 69;
+ padding-block: 5px;
+ transition: 0.3s ease-in-out;
+ overflow: hidden;
}
.divider {
@@ -50,4 +49,26 @@
.skipNav:focus {
width: 100%;
overflow: auto;
+}
+
+.slideUp {
+ transform: translateY(-100%);
+}
+
+.cutoffContainer {
+ position: fixed;
+ height: 42px;
+ width: 100%;
+
+ top: 0;
+ overflow: hidden;
+ z-index: 100;
+}
+
+
+.message {
+ font-size: 1.2rem;
+ padding-left: 10px;
+ color: white;
+ transition: color 0.3s ease-in-out;
}
\ No newline at end of file
diff --git a/styles/globals.module.css b/styles/globals.module.css
index bed3151..1761aeb 100644
--- a/styles/globals.module.css
+++ b/styles/globals.module.css
@@ -1,3 +1,4 @@
+
.container {
position: fixed;
top: 42px;