Add rudmentary mobile
This commit is contained in:
parent
c6fe9e047c
commit
f07f25009c
|
@ -108,7 +108,97 @@
|
|||
}
|
||||
|
||||
@media only screen and (max-width: calc(768rem / 16)) {
|
||||
.nav {
|
||||
.organizedContent > .nav {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.burger {
|
||||
position: absolute;
|
||||
top: 5%;
|
||||
left: 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
z-index: 10;
|
||||
background: var(--light-blue-2);
|
||||
}
|
||||
|
||||
.burger:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.burger > div {
|
||||
width: 2rem;
|
||||
height: 0.25rem;
|
||||
background: var(--blue-2);
|
||||
border-radius: 10px;
|
||||
transition: all 0.2s linear;
|
||||
position: relative;
|
||||
transform-origin: 1px;
|
||||
}
|
||||
|
||||
.burgerLineOpen1 {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.burgerLineClosed1 {
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
.burgerLineOpen2 {
|
||||
transform: translateX(20px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.burgerLineClosed2 {
|
||||
transform: translateX(0px);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.burgerLineOpen3 {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.burgerLineClosed3 {
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
.mobileNav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
background: var(--light-blue-1);
|
||||
width: 90%;
|
||||
height: 100vh;
|
||||
text-align: left;
|
||||
padding: 2rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: transform 0.3s ease-in-out;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.mobileNavClosed {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
|
||||
.mobileNav > a {
|
||||
font-size: 2rem;
|
||||
text-transform: uppercase;
|
||||
padding: 2rem 0;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.5rem;
|
||||
color: var(--blue-2);
|
||||
text-decoration: none;
|
||||
transition: color 0.3s linear;
|
||||
|
||||
}
|
||||
|
|
|
@ -1,4 +1,10 @@
|
|||
import React, { ReactNode, ComponentType } from "react";
|
||||
import React, {
|
||||
ReactNode,
|
||||
ComponentType,
|
||||
useState,
|
||||
//useRef,
|
||||
//useEffect,
|
||||
} from "react";
|
||||
import styles from "./OrganizedContent.module.css";
|
||||
|
||||
export interface LinkProps {
|
||||
|
@ -28,12 +34,27 @@ interface ChildProps {
|
|||
link: Link;
|
||||
}
|
||||
|
||||
interface MobileProps {
|
||||
open: boolean;
|
||||
setOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
}
|
||||
|
||||
interface MenuProps {
|
||||
open: boolean;
|
||||
setOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
childProps: ChildProps;
|
||||
}
|
||||
|
||||
export const OrganizedContent = ({
|
||||
headings,
|
||||
currentIndex,
|
||||
link: Link,
|
||||
children,
|
||||
}: Props) => {
|
||||
const [open, setOpen] = useState(false);
|
||||
//const node = useRef();
|
||||
//useOnClickOutside(node, () => setOpen(false));
|
||||
|
||||
const isReadAll = headings[currentIndex].title === "Read All";
|
||||
|
||||
const readAllContent = headings
|
||||
|
@ -51,6 +72,17 @@ export const OrganizedContent = ({
|
|||
link: Link,
|
||||
};
|
||||
|
||||
const mobileProps: MobileProps = {
|
||||
open: open,
|
||||
setOpen: setOpen,
|
||||
};
|
||||
|
||||
const menuProps: MenuProps = {
|
||||
open: open,
|
||||
setOpen: setOpen,
|
||||
childProps: childProps,
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.organizedContent}>
|
||||
<Nav {...childProps} />
|
||||
|
@ -65,6 +97,10 @@ export const OrganizedContent = ({
|
|||
</>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<Burger {...mobileProps} />
|
||||
<Menu {...menuProps} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
@ -162,3 +198,27 @@ const Footer = ({ headings, currentIndex, link: Link }: ChildProps) => {
|
|||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const Burger = ({ open, setOpen }: MobileProps) => {
|
||||
const line1 = open ? styles.burgerLineOpen1 : styles.burgerLineClosed1;
|
||||
const line2 = open ? styles.burgerLineOpen2 : styles.burgerLineClosed2;
|
||||
const line3 = open ? styles.burgerLineOpen3 : styles.burgerLineClosed3;
|
||||
return (
|
||||
<div className={styles.burger} onClick={() => setOpen(!open)}>
|
||||
<div className={line1} />
|
||||
<div className={line2} />
|
||||
<div className={line3} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const Menu = ({ open, childProps }: MenuProps) => {
|
||||
const mobileNav = open
|
||||
? styles.mobileNav
|
||||
: styles.mobileNav + " " + styles.mobileNavClosed;
|
||||
return (
|
||||
<div className={mobileNav}>
|
||||
<Nav {...childProps} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -12,6 +12,8 @@ body {
|
|||
--blue-1-05: #5caff90d;
|
||||
--blue-1-20: #5caff934;
|
||||
--blue-2: #1482e3;
|
||||
--light-blue-1: #E1EEFA;
|
||||
--light-blue-2: #C0E1FE;
|
||||
--purple-1: #525284;
|
||||
--purple-2: #2a2a62;
|
||||
--gradient-blue-green: linear-gradient(
|
||||
|
@ -31,6 +33,8 @@ body {
|
|||
--blue-1-05: #5caff90d;
|
||||
--blue-1-20: #5caff934;
|
||||
--blue-2: #1482e3;
|
||||
--light-blue-1: #E1EEFA;
|
||||
--light-blue-2: #C0E1FE;
|
||||
--purple-1: #525284;
|
||||
--purple-2: #2a2a62;
|
||||
--gradient-blue-green: linear-gradient(
|
||||
|
|
|
@ -10,7 +10,7 @@ export default function App({ Component, pageProps }: AppProps): JSX.Element {
|
|||
return (
|
||||
<ThemeProvider theme="light">
|
||||
<MDXProvider components={{}}>
|
||||
<Navbar />
|
||||
{/* <Navbar /> */}
|
||||
<Component {...pageProps} />
|
||||
</MDXProvider>
|
||||
</ThemeProvider>
|
||||
|
|
|
@ -71,5 +71,17 @@ display information about the execs: prez, VP, trez, AVP, and syscom overlord.
|
|||
|
||||
<TeamMemberCardDemo />
|
||||
|
||||
<<<<<<< Updated upstream
|
||||
---
|
||||
-->
|
||||
=======
|
||||
--- -->
|
||||
|
||||
## `<OrganizedContent />`
|
||||
|
||||
Codey is supposed to say something here...
|
||||
|
||||
<OrganizedContentDemo />
|
||||
|
||||
---
|
||||
>>>>>>> Stashed changes
|
||||
|
|
Loading…
Reference in New Issue