Added files and folders into /src directory.
This commit is contained in:
Lucid Kobold
32
src/theme/layout/BackToTopButton.tsx
Normal file
32
src/theme/layout/BackToTopButton.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
import React, { FC } from "react";
|
||||
import { Button, Flex, Link } from "@chakra-ui/react";
|
||||
import { Icon } from "@iconify/react";
|
||||
|
||||
interface BackToTopButtonProps {
|
||||
show: boolean;
|
||||
}
|
||||
|
||||
const BackToTopButton: FC<BackToTopButtonProps> = ({
|
||||
show
|
||||
}: BackToTopButtonProps) => {
|
||||
return (
|
||||
<Flex
|
||||
d={show ? "flex" : "none"}
|
||||
pos="fixed"
|
||||
top="85vh"
|
||||
right={{
|
||||
base: "1.25rem",
|
||||
sm: "2rem",
|
||||
md: "3rem"
|
||||
}}
|
||||
>
|
||||
<Link href="/#top">
|
||||
<Button variant="backToTop">
|
||||
<Icon icon="akar-icons:chevron-up" />
|
||||
</Button>
|
||||
</Link>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
export default BackToTopButton;
|
||||
29
src/theme/layout/DesktopNav.tsx
Normal file
29
src/theme/layout/DesktopNav.tsx
Normal file
@@ -0,0 +1,29 @@
|
||||
import React from "react";
|
||||
import { Button, HStack, Link } from "@chakra-ui/react";
|
||||
import navItems, { NavItem } from "./navItems";
|
||||
|
||||
const DesktopNav = (): JSX.Element => {
|
||||
return (
|
||||
<HStack
|
||||
as="nav"
|
||||
d={{ base: "none", lg: "flex" }}
|
||||
h="auto"
|
||||
w="auto"
|
||||
spacing={4}
|
||||
// m="auto"
|
||||
justifyContent="center"
|
||||
alignContent="center"
|
||||
alignItems="center"
|
||||
>
|
||||
{navItems.map((navItem: NavItem) => {
|
||||
return (
|
||||
<Link id={"dekstop-" + navItem[0]} key={navItem[0]} href={navItem[1]}>
|
||||
<Button variant="nav">{navItem[0]}</Button>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</HStack>
|
||||
);
|
||||
};
|
||||
|
||||
export default DesktopNav;
|
||||
114
src/theme/layout/Footer.tsx
Normal file
114
src/theme/layout/Footer.tsx
Normal file
@@ -0,0 +1,114 @@
|
||||
import React /*, { useEffect, useRef, useState }*/ from "react";
|
||||
import {
|
||||
Box,
|
||||
Text,
|
||||
VStack,
|
||||
Link,
|
||||
HStack,
|
||||
// Image,
|
||||
Button,
|
||||
BoxProps
|
||||
} from "@chakra-ui/react";
|
||||
import { Icon } from "@iconify/react";
|
||||
// import BackToTopButton from "./BackToTopButton";
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
export const MotionBox = motion<BoxProps>(Box);
|
||||
|
||||
const Footer = (): JSX.Element => {
|
||||
// const [showBackToTop, setShowBackToTop] = useState<boolean>(false);
|
||||
// const lastScroll = useRef<number>(0);
|
||||
|
||||
// const handleScroll = (): void => {
|
||||
// if (window.scrollY >= 500) {
|
||||
// setShowBackToTop(true);
|
||||
// } else {
|
||||
// setShowBackToTop(false);
|
||||
// }
|
||||
|
||||
// const currentScroll =
|
||||
// window.pageYOffset || document.documentElement.scrollTop;
|
||||
|
||||
// lastScroll.current = currentScroll <= 0 ? 0 : currentScroll;
|
||||
// };
|
||||
|
||||
// useEffect(() => {
|
||||
// if (!window) {
|
||||
// console.log("waiting for mount");
|
||||
// } else if (window) {
|
||||
// window.addEventListener("scroll", handleScroll);
|
||||
// }
|
||||
|
||||
// return () => window.removeEventListener("scroll", handleScroll);
|
||||
// }, []);
|
||||
return (
|
||||
<Box bg="brand.footer" as="footer" w="100%" h="auto">
|
||||
{/* <BackToTopButton show={showBackToTop} /> */}
|
||||
<VStack
|
||||
h="auto"
|
||||
w="auto"
|
||||
py={12}
|
||||
spacing={5}
|
||||
justifyItems="center"
|
||||
justifyContent="center"
|
||||
>
|
||||
<VStack spacing={4}>
|
||||
{/* <MotionBox whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
|
||||
<Link
|
||||
href="https://github.com/LucidCreationsMedia"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
<Button
|
||||
color="whiteAlpha"
|
||||
variant="credits"
|
||||
leftIcon={<Icon icon="akar-icons:github-fill" />}
|
||||
>
|
||||
View Codebase
|
||||
</Button>
|
||||
</Link>
|
||||
</MotionBox> */}
|
||||
<MotionBox whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
|
||||
<Link
|
||||
href="https://lucidcreations.media/introducing-code-name-potty-chart/"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
<Button color="whiteAlpha" variant="credits">
|
||||
More About This App
|
||||
</Button>
|
||||
</Link>
|
||||
</MotionBox>
|
||||
<MotionBox whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
|
||||
<Link
|
||||
href="https://www.patreon.com/bePatron?u=15380906"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
<Button
|
||||
color="whiteAlpha"
|
||||
variant="patreon"
|
||||
leftIcon={<Icon icon="ri:patreon-fill" />}
|
||||
>
|
||||
Fund This App
|
||||
</Button>
|
||||
</Link>
|
||||
</MotionBox>
|
||||
<Text color="brand.footerText" fontSize="xs">
|
||||
©
|
||||
{` 2021 - ${new Date().getFullYear()} `}
|
||||
<Link
|
||||
href="https://lucidcreations.media"
|
||||
rel="noopener"
|
||||
target="_blank"
|
||||
>
|
||||
{"Lucid Creations Media"}
|
||||
</Link>
|
||||
</Text>
|
||||
</VStack>
|
||||
</VStack>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
189
src/theme/layout/Header.tsx
Normal file
189
src/theme/layout/Header.tsx
Normal file
@@ -0,0 +1,189 @@
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import Image from "next/image";
|
||||
import {
|
||||
Heading,
|
||||
HStack,
|
||||
Box,
|
||||
IconButton,
|
||||
Menu,
|
||||
MenuButton
|
||||
} from "@chakra-ui/react";
|
||||
import { Icon } from "@iconify/react";
|
||||
import DesktopNav from "./DesktopNav";
|
||||
import MobileNav from "./MobileNav";
|
||||
import appLogo from "../../../public/images/logo.svg";
|
||||
|
||||
const Header = (): JSX.Element => {
|
||||
const appName = "LCM Potty Chart";
|
||||
const appVersion = "v0.0.9.6-alpha";
|
||||
|
||||
// Add transparency while not at the top of the page.
|
||||
const [transparentNavbar, setTransparentNavbar] = useState<boolean>(false);
|
||||
const lastScroll = useRef<number>(0);
|
||||
|
||||
const handleScroll = (): void => {
|
||||
// Sticky Nav
|
||||
if (window.scrollY >= 20) {
|
||||
setTransparentNavbar(true);
|
||||
} else {
|
||||
setTransparentNavbar(false);
|
||||
}
|
||||
|
||||
// Scroll Position.
|
||||
const currentScroll =
|
||||
window.scrollY || window.pageYOffset || document.body.scrollTop;
|
||||
|
||||
// Update Scroll Position Reference
|
||||
lastScroll.current = currentScroll <= 0 ? 0 : currentScroll;
|
||||
// setScroll(lastScroll.current = currentScroll <= 0 ? 0 : currentScroll)
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!window) {
|
||||
console.log("waiting for mount");
|
||||
} else if (window) {
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
}
|
||||
|
||||
return () => window.removeEventListener("scroll", handleScroll);
|
||||
}, []);
|
||||
|
||||
// Mobile Menu Icon && Open/Close
|
||||
const [open, setOpen] = useState<boolean>(false);
|
||||
const [hover, setHover] = useState<boolean>(false);
|
||||
|
||||
const menuIcon = (): JSX.Element => {
|
||||
const iconType = {
|
||||
default: <Icon icon="bx:bx-menu-alt-right" />,
|
||||
hover: <Icon icon="bx:bx-menu" />,
|
||||
open: <Icon icon="bx:bx-x" />
|
||||
};
|
||||
|
||||
if (open) {
|
||||
return iconType.open;
|
||||
} else if (hover) {
|
||||
return iconType.hover;
|
||||
} else {
|
||||
return iconType.default;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box
|
||||
zIndex={1}
|
||||
w="100%"
|
||||
pos="fixed"
|
||||
top={0}
|
||||
alignItems="center"
|
||||
boxShadow={
|
||||
open
|
||||
? "none"
|
||||
: "rgba(0, 134, 255, 0.75) 0px 0px 15px, rgba(0, 134, 255, 0.5) 0px 0px 3px 1px"
|
||||
}
|
||||
bg={
|
||||
open
|
||||
? "brand.main"
|
||||
: transparentNavbar
|
||||
? "rgba(49, 56, 220, 0.9)"
|
||||
: "brand.main"
|
||||
}
|
||||
transition=".5s ease"
|
||||
borderRadius="0px 0px 10px 10px"
|
||||
_hover={{
|
||||
bg: "brand.main",
|
||||
boxShadow: open
|
||||
? "none"
|
||||
: "rgba(0, 134, 255, 0.9) 0px 0px 15px, rgba(0, 134, 255, 0.7) 0px 0px 3px 1px"
|
||||
}}
|
||||
h={open ? "125px" : "auto"}
|
||||
>
|
||||
{/* Logo | Site Name */}
|
||||
<HStack
|
||||
width="100%"
|
||||
justifyContent={{
|
||||
base: "flex-start",
|
||||
sm: "center"
|
||||
}}
|
||||
alignItems="center"
|
||||
height={12}
|
||||
top={0}
|
||||
position="absolute"
|
||||
ml={4}
|
||||
d={{ base: "flex", lg: "none" }}
|
||||
spacing="5px"
|
||||
_hover={{
|
||||
cursor: "default"
|
||||
}}
|
||||
>
|
||||
<Image height="30px" width="30px" src={appLogo} alt="App Logo" />
|
||||
|
||||
<Heading as="h1" size="md">
|
||||
{appName}
|
||||
</Heading>
|
||||
<Heading color="whiteAlpha.500" as="h2" size="sm">
|
||||
{appVersion}
|
||||
</Heading>
|
||||
</HStack>
|
||||
|
||||
{/* Desktop Nav Items and Mobile Menu Button */}
|
||||
<HStack
|
||||
w="100%"
|
||||
px={4}
|
||||
h={12}
|
||||
alignItems="center"
|
||||
justifyContent="space-between"
|
||||
>
|
||||
<HStack
|
||||
w="100%"
|
||||
h="auto"
|
||||
alignItems="center"
|
||||
justifyContent="space-between"
|
||||
>
|
||||
<Box w="auto" d={{ base: "flex", lg: "none " }}></Box>
|
||||
<Box w="100%" d={{ base: "none", lg: "flex" }} m="auto">
|
||||
<HStack
|
||||
width="100%"
|
||||
alignItems="center"
|
||||
height="auto"
|
||||
spacing="5px"
|
||||
_hover={{
|
||||
cursor: "default"
|
||||
}}
|
||||
>
|
||||
<Image height="30px" width="30px" src={appLogo} alt="App Logo" />
|
||||
<Heading as="h1" size="md">
|
||||
{appName}
|
||||
</Heading>
|
||||
<Heading color="whiteAlpha.500" as="h2" size="sm">
|
||||
{appVersion}
|
||||
</Heading>
|
||||
</HStack>
|
||||
</Box>
|
||||
<DesktopNav />
|
||||
</HStack>
|
||||
<Menu isLazy lazyBehavior="unmount" isOpen={open}>
|
||||
<MenuButton
|
||||
as={IconButton}
|
||||
aria-label="Mobile Menu"
|
||||
icon={menuIcon()}
|
||||
onClick={() => setOpen(!open)}
|
||||
onMouseEnter={() => setHover(true)}
|
||||
onMouseLeave={() => setHover(false)}
|
||||
d={{
|
||||
base: "inline-flex",
|
||||
lg: "none"
|
||||
}}
|
||||
variant="mobileNav"
|
||||
bg={transparentNavbar ? "transparent" : "rgba(255, 255, 255, .15)"}
|
||||
type="button"
|
||||
border={transparentNavbar ? "1px solid #0068ff" : "none"}
|
||||
id="mobile-menu-button"
|
||||
/>
|
||||
<MobileNav updateOpen={setOpen} />
|
||||
</Menu>
|
||||
</HStack>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
25
src/theme/layout/Layout.tsx
Normal file
25
src/theme/layout/Layout.tsx
Normal file
@@ -0,0 +1,25 @@
|
||||
import React, { FC, ReactNode } from "react";
|
||||
|
||||
import type { AppProps } from "next/app";
|
||||
import Header from "../layout/Header";
|
||||
import { Box } from "@chakra-ui/layout";
|
||||
import Footer from "./Footer";
|
||||
|
||||
interface LayoutProps {
|
||||
children: ReactNode;
|
||||
elementType?: string;
|
||||
}
|
||||
|
||||
const Layout: FC<LayoutProps> = (
|
||||
{ children }: LayoutProps,
|
||||
{ pageProps }: AppProps
|
||||
) => {
|
||||
return (
|
||||
<Box w="100%">
|
||||
<Header {...pageProps} />
|
||||
<main>{children}</main>
|
||||
<Footer />
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
export default Layout;
|
||||
56
src/theme/layout/MobileNav.tsx
Normal file
56
src/theme/layout/MobileNav.tsx
Normal file
@@ -0,0 +1,56 @@
|
||||
import React, { FC, Fragment } from "react";
|
||||
import {
|
||||
Button,
|
||||
Link,
|
||||
MenuDivider,
|
||||
MenuItem,
|
||||
MenuList
|
||||
} from "@chakra-ui/react";
|
||||
import navItems, { NavItem } from "./navItems";
|
||||
|
||||
interface MobileNavProps {
|
||||
updateOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
}
|
||||
|
||||
const MobileNav: FC<MobileNavProps> = ({ updateOpen }: MobileNavProps) => {
|
||||
return (
|
||||
<MenuList
|
||||
as="nav"
|
||||
d={{ base: "block", lg: "none" }}
|
||||
bg="brand.main"
|
||||
h="auto"
|
||||
w="100%"
|
||||
p={0}
|
||||
border="none"
|
||||
boxShadow="none"
|
||||
>
|
||||
{navItems.map((navItem: NavItem, index: number) => {
|
||||
return (
|
||||
<MenuItem
|
||||
id={"mobile-" + navItem[0]}
|
||||
key={navItem[0]}
|
||||
w="auto"
|
||||
h="auto"
|
||||
p={0}
|
||||
_hover={{
|
||||
backgroundColor: "none"
|
||||
}}
|
||||
_focus={{
|
||||
backgroundColor: "none"
|
||||
}}
|
||||
>
|
||||
<Link onClick={() => updateOpen(false)} href={navItem[1]}>
|
||||
{index === 0 ? <MenuDivider /> : <Fragment></Fragment>}
|
||||
<Button w="100vw" variant={"nav"} p={0} m="auto">
|
||||
{navItem[0]}
|
||||
</Button>
|
||||
<MenuDivider />
|
||||
</Link>
|
||||
</MenuItem>
|
||||
);
|
||||
})}
|
||||
</MenuList>
|
||||
);
|
||||
};
|
||||
|
||||
export default MobileNav;
|
||||
6
src/theme/layout/navItems.ts
Normal file
6
src/theme/layout/navItems.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
export type NavItem = [string, string];
|
||||
export type NavItems = NavItem[];
|
||||
|
||||
const navItems: NavItems = [["Home", "/"]];
|
||||
|
||||
export default navItems;
|
||||
Reference in New Issue
Block a user