Fancy animations on navbar :)
diff --git a/pages/_app.js b/pages/_app.js
index 2932bb7..59fdadb 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -23,6 +23,9 @@
fadeGradient: "rgba(240, 240, 240, 1)",
offset: "2.5px",
+ borders: "#FFFFFF",
+ borderHint: "#E4E4E4",
+
modes: {
dark: {
text: '#ffffff',
@@ -36,7 +39,10 @@
hint: '#242424',
panelColor: "rgba(255, 255, 255, 0.05)",
fadeGradient: "rgba(48, 48, 48, 1)",
- offset: "-20px"
+ offset: "-20px",
+
+ borders: "#000000",
+ borderHint: "#424242",
}
}
},
@@ -44,23 +50,49 @@
function App({ Component, pageProps }) {
- const ref = React.forwardRef(function Ref(props, ref) {
- return <NavBar {...props} ref={ref} />
- });
+ const [subBar, setSubBar] = React.useState(false);
+ const [currentElement, setElement] = React.useState(<></>);
- const navbar = React.useRef(ref);
+ const showSubBar = (element, timeout) => {
+ setSubBar(true);
+ setElement(element);
+ if (timeout) {
+ setTimeout(() => {
+ setSubBar(false);
+ setTimeout(() => {
+ setElement(<></>);
+ }, 0.31 * 1000)
+ }, timeout * 1000)
+ }
+ }
- return <>
- <ThemeProvider theme={theme}>
- {navbar.current.render()}
- <Component
- {...pageProps}
- navbar={navbar}
- navRef={ref}
- />
- <div className={Styles.container} />
- </ThemeProvider>
- </>
+ const hideSubBar = () => {
+ setSubBar(false);
+ }
+
+ const showMessage = (text) => {
+ showSubBar(<p className={Styles.message}>{text}</p>, 5);
+ }
+
+ return <>
+ <ThemeProvider theme={theme}>
+ <NavBar
+ subBar={subBar}
+ setSubBar={setSubBar}
+ element={currentElement}
+ setElement={setElement}
+ showMessage={showMessage}
+ showSubBar={showSubBar}
+ />
+ <Component
+ {...pageProps}
+ showSubBar={showSubBar}
+ hideSubBar={hideSubBar}
+ showMessage={showMessage}
+ />
+ <div className={Styles.container} />
+ </ThemeProvider>
+ </>
}
export default App
diff --git a/pages/index.js b/pages/index.js
index 5e604f7..7495dff 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -3,7 +3,6 @@
import { AutoLayout, Panel, Title, Subtitle, Text, Divider } from '../Components/Panels';
export default function Home(props) {
- console.log(props)
return (
<>
<Header
@@ -16,8 +15,8 @@
buttons={[]}
index={true}
fullscreen={true}
+ showSubBar={props.showSubBar}
/>
- <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>
@@ -33,6 +32,7 @@
]}
buttonText={"FFFFFF"} gradient={["78ECF2", "71AFE5"]}
url="/gps"
+ showMessage={props.showMessage}
/>
<Card
wave="rsm" title="RSM" subtext="Moderation Redefined"
@@ -43,6 +43,7 @@
]}
buttonText={"FFFFFF"} gradient={["F27878", "D96B6B"]}
url="/rsm"
+ showMessage={props.showMessage}
/>
<Card
wave="clicksforms" title="ClicksForms" subtext="Create custom forms for Discord"