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)) {
|
@media only screen and (max-width: calc(768rem / 16)) {
|
||||||
.nav {
|
.organizedContent > .nav {
|
||||||
display: none;
|
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";
|
import styles from "./OrganizedContent.module.css";
|
||||||
|
|
||||||
export interface LinkProps {
|
export interface LinkProps {
|
||||||
|
@ -28,12 +34,27 @@ interface ChildProps {
|
||||||
link: Link;
|
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 = ({
|
export const OrganizedContent = ({
|
||||||
headings,
|
headings,
|
||||||
currentIndex,
|
currentIndex,
|
||||||
link: Link,
|
link: Link,
|
||||||
children,
|
children,
|
||||||
}: Props) => {
|
}: Props) => {
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
//const node = useRef();
|
||||||
|
//useOnClickOutside(node, () => setOpen(false));
|
||||||
|
|
||||||
const isReadAll = headings[currentIndex].title === "Read All";
|
const isReadAll = headings[currentIndex].title === "Read All";
|
||||||
|
|
||||||
const readAllContent = headings
|
const readAllContent = headings
|
||||||
|
@ -51,6 +72,17 @@ export const OrganizedContent = ({
|
||||||
link: Link,
|
link: Link,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const mobileProps: MobileProps = {
|
||||||
|
open: open,
|
||||||
|
setOpen: setOpen,
|
||||||
|
};
|
||||||
|
|
||||||
|
const menuProps: MenuProps = {
|
||||||
|
open: open,
|
||||||
|
setOpen: setOpen,
|
||||||
|
childProps: childProps,
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.organizedContent}>
|
<div className={styles.organizedContent}>
|
||||||
<Nav {...childProps} />
|
<Nav {...childProps} />
|
||||||
|
@ -65,6 +97,10 @@ export const OrganizedContent = ({
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
<div>
|
||||||
|
<Burger {...mobileProps} />
|
||||||
|
<Menu {...menuProps} />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -162,3 +198,27 @@ const Footer = ({ headings, currentIndex, link: Link }: ChildProps) => {
|
||||||
</div>
|
</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-05: #5caff90d;
|
||||||
--blue-1-20: #5caff934;
|
--blue-1-20: #5caff934;
|
||||||
--blue-2: #1482e3;
|
--blue-2: #1482e3;
|
||||||
|
--light-blue-1: #E1EEFA;
|
||||||
|
--light-blue-2: #C0E1FE;
|
||||||
--purple-1: #525284;
|
--purple-1: #525284;
|
||||||
--purple-2: #2a2a62;
|
--purple-2: #2a2a62;
|
||||||
--gradient-blue-green: linear-gradient(
|
--gradient-blue-green: linear-gradient(
|
||||||
|
@ -31,6 +33,8 @@ body {
|
||||||
--blue-1-05: #5caff90d;
|
--blue-1-05: #5caff90d;
|
||||||
--blue-1-20: #5caff934;
|
--blue-1-20: #5caff934;
|
||||||
--blue-2: #1482e3;
|
--blue-2: #1482e3;
|
||||||
|
--light-blue-1: #E1EEFA;
|
||||||
|
--light-blue-2: #C0E1FE;
|
||||||
--purple-1: #525284;
|
--purple-1: #525284;
|
||||||
--purple-2: #2a2a62;
|
--purple-2: #2a2a62;
|
||||||
--gradient-blue-green: linear-gradient(
|
--gradient-blue-green: linear-gradient(
|
||||||
|
|
|
@ -10,7 +10,7 @@ export default function App({ Component, pageProps }: AppProps): JSX.Element {
|
||||||
return (
|
return (
|
||||||
<ThemeProvider theme="light">
|
<ThemeProvider theme="light">
|
||||||
<MDXProvider components={{}}>
|
<MDXProvider components={{}}>
|
||||||
<Navbar />
|
{/* <Navbar /> */}
|
||||||
<Component {...pageProps} />
|
<Component {...pageProps} />
|
||||||
</MDXProvider>
|
</MDXProvider>
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
|
|
|
@ -71,5 +71,17 @@ display information about the execs: prez, VP, trez, AVP, and syscom overlord.
|
||||||
|
|
||||||
<TeamMemberCardDemo />
|
<TeamMemberCardDemo />
|
||||||
|
|
||||||
|
<<<<<<< Updated upstream
|
||||||
---
|
---
|
||||||
-->
|
-->
|
||||||
|
=======
|
||||||
|
--- -->
|
||||||
|
|
||||||
|
## `<OrganizedContent />`
|
||||||
|
|
||||||
|
Codey is supposed to say something here...
|
||||||
|
|
||||||
|
<OrganizedContentDemo />
|
||||||
|
|
||||||
|
---
|
||||||
|
>>>>>>> Stashed changes
|
||||||
|
|
Loading…
Reference in New Issue