How can I use flex-grow to make the body section fill the screen and keep the nav fixed at the bottom? I'm having trouble figuring out which elements to apply these properties to. Can anyone provide guidance on which element should have these styles?
I attempted to make the div above the nav in _app.js a flex container with flex-col, then applied flex-grow to the body section of categories/[slug].js, but it didn't work as expected.
import Head from "next/head";
import Link from "next/link";
import Skeleton from "react-loading-skeleton";
import { CURSORY_ARTICLES_BY_CATEGORY_QUERY } from "../../queries/articles";
import { useRouter } from 'next/router';
import { useQuery } from "@apollo/react-hooks";
const Main = () => {
const router = useRouter()
const { slug } = router.query;
const { data, loading, error } = useQuery(CURSORY_ARTICLES_BY_CATEGORY_QUERY, {
variables: { category: slug }
});
return (
<div>
<Head>
<link
rel="preload"
href='../public/fonts/Apple.ttf'
as="font"
crossOrigin=""
/>
</Head>
<div className="max-w-full flex container bg-gray-terminal bg-image justify-around">
<ul className="flex flex-col font-apple">
{
loading ? <Skeleton count={6} width={512} height={256}></Skeleton> :
error ? <p>Error: {JSON.stringify(error)}</p> :
data.articles.map(
(article) => {
return (
<Link href={`/articles/${article.slug}`}>
<li key={article.slug} className="rounded gird grid-cols-4 justify-between cursor-pointer my-8 mx-2 md:mx-4 lg:mx-8 text-green-terminal hover:text-white border-4 border-green-terminal hover:border-white shadow-2xl bg-gray-terminal">
<h1 className="mx-4 py-4 sm:py-2 w-1/3 col-span-1 font-apple">{article.title}</h1>
<p className="mx-4 text-sm py-4 sm:py-2 w-2/3 col-span-3 font-apple">{article.description}</p>
</li>
</Link>
);
}
)
}
</ul>
</div>
</div>
);
}
export default function SelectedCategory() {
return (
<Main />
)
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>import React from "react";
import { ApolloProvider } from "@apollo/react-hooks";
import client from "../lib/apollo";
import Nav from "../components/nav";
import Footer from "../components/footer";
import '../styles/globals.css'
function MyApp({ Component, pageProps }) {
return (
<ApolloProvider client={client}>
<div className="flex flex-col">
<Nav />
<Component {...pageProps} />
<Footer />
</div>
</ApolloProvider>
);
}
export default MyApp<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>import Link from 'next/link';
export default function Footer() {
return (
<footer className="max-w-full container flex flex-col items-center bg-black font-apple">
<Link href="https://twitter.com/Unenunciate">
<svg className="my-4 cursor-pointer text-green-terminal fill-current hover:text-white" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/></svg>
</Link>
<Link href="/contact">
<div className="tracking-wider text-md mb-4 text-green-terminal hover:text-white border-green-terminal hover:border-white hover:shadow-lg">
Contact
</div>
</Link>
<div className="text-green-terminal text-sm mb-2">
Copyright Ⓒ 2021
</div>
</footer>
);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>import CATEGORIES_QUERY from "../queries/categories";
import Link from 'next/link';
import Skeleton from "react-loading-skeleton";
import { useQuery } from "@apollo/react-hooks";
export default function Nav() {
const { data, loading, error } = useQuery(CATEGORIES_QUERY, {
variables: { slug: "categories" }
});
return (
<div className="bg-black max-w sticky">
<div>
<nav className="flex justify-between container mx-auto py-4">
<ul>
<li className="group flex flex-row mx-2 text-green-terminal group-hover:text-white border-b-4 border-radius border-green-terminal hover:border-white hover:shadow-lg">
<Link href="/">
<div className="flex flex-row cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" className="group-hover:text-white text-green-terminal fill-current h-5 w-5 -translate-y-2 icon " viewBox="0 0 20 20" fill="#fff">
<path fill-rule="evenodd" d="M2 5a2 2 0 012-2h12a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm3.293 1.293a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 01-1.414-1.414L7.586 10 5.293 7.707a1 1 0 010-1.414zM11 12a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd" />
</svg>
<span className="group-hover:text-white font-apple tracking-widest">
Uenunciate
</span>
</div>
</Link>
</li>
</ul>
<ul>
</ul>
<div className="flex justify-between">
<ul className="flex flex-wrap mx-2 md:mx-4 lg:mx-8">
{
loading ? <Skeleton count={2} width={12} height={12}></Skeleton>:
error ? <p>Error: {JSON.stringify(error)}</p> :
data.categories.map(
(category) => {
return (
<li key={category.slug} className="mx-2 md:mx-4 lg:mx-8 font-apple tracking-widest text-green-terminal hover:text-white border-b-4 border-green-terminal hover:border-white hover:shadow-lg ">
<Link href={`/categories/${category.slug}`}>
{category.name}
</Link>
</li>
);
}
)
}
</ul>
</div>
</nav>
</div>
</div>
)
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>