Fancy animations on navbar :)
diff --git a/Components/Card.js b/Components/Card.js
index c928baf..5c421a0 100644
--- a/Components/Card.js
+++ b/Components/Card.js
@@ -32,7 +32,7 @@
<h1 className={Styles.title}>{this.props.title}</h1>
</div>
<p className={Styles.subtext + " " + (this.props.buttons ? null : Styles.longText)}>{this.props.subtext}</p>
- <div className={Styles.buttonLayout}>
+ <div className={Styles.buttonLayout} onClick={this.showMessage}>
{
this.props.buttons ? this.props.buttons.map((button, i) => {
return <a
@@ -85,14 +85,7 @@
react.Children.toArray(this.props.children).map((item, index) => {
item = <Card
shown={this.state.childrenShown[index]}
- title={item.props.title}
- subtext={item.props.subtext}
- wave={item.props.wave}
- gradient={item.props.gradient}
- icon={item.props.icon}
- buttons={item.props.buttons}
- buttonText={item.props.buttonText}
- url={item.props.url}
+ {...item.props}
/>
return <div className={Styles.item} key={index}>{item}</div>
})
diff --git a/Components/Header.js b/Components/Header.js
index f5e7bb7..da6ec92 100644
--- a/Components/Header.js
+++ b/Components/Header.js
@@ -1,5 +1,6 @@
import React, { useRef } from "react";
import Styles from '../styles/Components/header.module.css';
+import NavStyles from '../styles/Components/navbar.module.css';
import Head from 'next/head';
import { useColorMode } from "theme-ui";
import { useReward } from "react-rewards";
@@ -29,12 +30,44 @@
colors: ["#E5AB71"]
});
+ function showSubBarWithUrl(url) {
+ const screenWidth = window.innerWidth;
+ let amount = screenWidth - 50;
+ amount = Math.floor(amount / 42) - 1;
+ props.showSubBar(
+ <div className={NavStyles.container}>
+ {
+ Array.from(Array(amount)).map((i, index) => {
+ return (
+ <a className={NavStyles.icon} key={index}><img alt="Clicks" className={NavStyles.icon} src={
+ url[Math.floor(Math.random() * url.length)]
+ } /></a>
+ )
+ })
+ }
+ </div>,
+ 5
+ );
+ }
+
function confetti() {
if (!isAnimating && !isDisappointmentAnimating && props.index) {
setClickTotal(clickTotal + 1);
if (clickTotal > 0 && Math.floor(Math.random() * 3) === 0) {
+ showSubBarWithUrl([
+ "https://raw.githubusercontent.com/twitter/twemoji/master/assets/svg/1f614.svg",
+ "https://raw.githubusercontent.com/twitter/twemoji/master/assets/svg/1f61e.svg",
+ "https://raw.githubusercontent.com/twitter/twemoji/master/assets/svg/1f613.svg",
+ "https://raw.githubusercontent.com/twitter/twemoji/master/assets/svg/1f625.svg",
+ "https://raw.githubusercontent.com/twitter/twemoji/master/assets/svg/1f623.svg",
+ ]);
disappointment();
} else {
+ showSubBarWithUrl([
+ "https://raw.githubusercontent.com/twitter/twemoji/master/assets/svg/1f389.svg",
+ "https://raw.githubusercontent.com/twitter/twemoji/master/assets/svg/1f388.svg",
+ "https://raw.githubusercontent.com/twitter/twemoji/master/assets/svg/1f973.svg",
+ ]);
reward();
}
}
@@ -75,7 +108,7 @@
<div className={Styles.titleContainer}>
<div onClick={confetti}>
{
- props.customImage?
+ props.customImage ?
<img height="64px" width="64px" alt={props.name} className={Styles.headerImage} style={{borderRadius: props.roundImage ? "100vw" : "0"}} src={props.customImage} />
: <></>
}
diff --git a/Components/NavBar.js b/Components/NavBar.js
index 7ab5e79..6ea02c9 100644
--- a/Components/NavBar.js
+++ b/Components/NavBar.js
@@ -15,51 +15,12 @@
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.cutoffContainer}>
- <div className={Styles.container + " " + (this.state.subBar ? Styles.slideUp : null)}>
+ <div className={Styles.container + " " + (this.props.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 />
@@ -70,10 +31,8 @@
<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 className={Styles.container + " " + (this.props.subBar ? Styles.slideUp : null)}>{this.props.element}</div>
</div>
)
}
diff --git a/Components/ThemeChangeButton.js b/Components/ThemeChangeButton.js
index 86b112b..2e0b7b7 100644
--- a/Components/ThemeChangeButton.js
+++ b/Components/ThemeChangeButton.js
@@ -18,7 +18,7 @@
e.preventDefault();
setColorMode(colorMode === 'light' ? 'dark' : 'light');
}} href="#">
- <img className={Styles.icon + " " + Styles.themeChangeIcon} alt="Theme" src={"https://assets.clicks.codes/web/icons/light-white.svg"} />
+ <img className={Styles.icon + " " + Styles.themeChangeIcon} alt="Theme" src={"https://assets.clicks.codes/web/icons/light.svg"} />
<img className={Styles.icon + " " + Styles.themeChangeIcon} alt="Theme" src={"https://assets.clicks.codes/web/icons/dark.svg"} />
</a>
</>
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"
diff --git a/styles/Components/header.module.css b/styles/Components/header.module.css
index 6d6b338..b16974a 100644
--- a/styles/Components/header.module.css
+++ b/styles/Components/header.module.css
@@ -138,3 +138,10 @@
margin-inline: 5px;
padding: 0;
}
+
+.leftArrow {
+ transform: rotate(90deg);
+}
+.rightArrow {
+ transform: rotate(270deg);
+}
diff --git a/styles/Components/navbar.module.css b/styles/Components/navbar.module.css
index 7ca3c5f..121d382 100644
--- a/styles/Components/navbar.module.css
+++ b/styles/Components/navbar.module.css
@@ -32,7 +32,8 @@
height: 100%;
width: 3px;
border-radius: 100vh;
- background-color: #424242;
+ background-color: var(--theme-ui-colors-borderHint);
+ transition: 0.3s ease-in-out;
}
.skipNav {
@@ -69,6 +70,6 @@
.message {
font-size: 1.2rem;
padding-left: 10px;
- color: white;
+ color: var(--theme-ui-colors-text);
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 1761aeb..944f797 100644
--- a/styles/globals.module.css
+++ b/styles/globals.module.css
@@ -5,7 +5,8 @@
height: calc(100vh - 42px);
width: 100%;
border-radius: 25px;
- box-shadow: 0 0 0 100px black;
+ box-shadow: 0 0 0 100px var(--theme-ui-colors-borders);
+ transition: 0.3s ease-in-out;
pointer-events: none;
background: transparent;
}