Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

✨ mobile bottom navigation #2

Merged
merged 1 commit into from
Aug 1, 2021
Merged

✨ mobile bottom navigation #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion pages/_document.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ class MyDocument extends Document {
rel="stylesheet"
/>
</Head>
<body className="antialiased font-body">
<body className="antialiased font-body relative mb-[72px] sm:mb-0 dark:bg-gray-800">
<Main />
<NextScript />
</body>
Expand Down
2 changes: 1 addition & 1 deletion pages/blog/[slug].js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,7 @@ const BlogPost = ({ subscription, preview }) => {
</svg>
<div className="relative text-base mx-auto max-w-prose lg:max-w-none">
<figure>
<div className="aspect-w-12 aspect-h-7 lg:aspect-none">
<div>
<Image
className="rounded-lg shadow-lg object-cover object-center"
data={post.coverImage.responsiveImage}
Expand Down
3 changes: 1 addition & 2 deletions src/components/cta-team/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
const { StructuredText, Image } = require('react-datocms')

const CtaTeam = ({ data }) => {
console.log(data)
return (
<div className="relative py-16 bg-white dark:bg-gray-700">
<div
Expand All @@ -12,7 +11,7 @@ const CtaTeam = ({ data }) => {
<div className="lg:grid lg:grid-cols-12">
<div className="relative z-10 lg:col-start-1 lg:row-start-1 lg:col-span-4 lg:py-16 lg:bg-transparent">
<div
className="absolute inset-x-0 h-1/2 bg-gray-50 lg:hidden"
className="absolute inset-x-0 h-1/2 bg-gray-50 dark:bg-gray-700 lg:hidden"
aria-hidden="true"
/>
<div className="max-w-md mx-auto px-4 sm:max-w-3xl sm:px-6 lg:max-w-none lg:p-0">
Expand Down
15 changes: 3 additions & 12 deletions src/components/header/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@ const Header = () => {
return (
<header className="bg-green-600">
<Container>
<div className="w-full py-6 flex items-center justify-between border-b border-green-500 lg:border-none">
<div className="flex items-center w-full">
<div className="w-full py-6 flex items-center border-b border-green-500 lg:border-none">
<div className="flex items-center justify-between w-full">
<Link href="/">
<a>
<span className="sr-only">BlackNickr</span>
Expand All @@ -24,7 +24,7 @@ const Header = () => {
</span>
</a>
</Link>
<div className="hidden lg:w-full lg:flex lg:justify-between">
<div className="flex items-center w-full justify-end lg:justify-between">
<div className="hidden ml-10 space-x-8 lg:block">
{navigation.map((link) => (
<Link key={link.name} href={link.href}>
Expand All @@ -40,15 +40,6 @@ const Header = () => {
</div>
</div>
</div>
<div className="py-4 flex flex-wrap justify-center space-x-6 lg:hidden">
{navigation.map((link) => (
<Link key={link.name} href={link.href}>
<a className="font-display text-base font-medium text-white hover:text-green-50">
{link.name}
</a>
</Link>
))}
</div>
</Container>
</header>
)
Expand Down
2 changes: 2 additions & 0 deletions src/components/layout/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import Header from "@/components/header"
import Footer from "@/components/footer"
import MobileNav from "@/components/mobile-nav"

const Layout = ({ preview, children }) => {
return (
Expand All @@ -9,6 +10,7 @@ const Layout = ({ preview, children }) => {
<main className="flex-1">{children}</main>
<Footer />
</div>
<MobileNav />
</>
)
}
Expand Down
78 changes: 78 additions & 0 deletions src/components/mobile-nav.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
import Link from 'next/link'
import { Menu, Transition } from '@headlessui/react'
import {
HomeIcon,
NewspaperIcon,
SpeakerphoneIcon,
} from '@heroicons/react/outline'
const MobileNav = () => {
return (
<div className="fixed bottom-0 left-0 w-full bg-green-500 dark:bg-green-600 z-50 sm:hidden">
<div className="grid grid-cols-3 border-t border-green-400 dark:border-green-700">
<div className="inline-flex items-center justify-center border-r border-green-600 dark:border-green-700">
<Link href="/">
<a className="px-2 py-6">
<HomeIcon className="w-6 h-6 text-green-700 dark:text-green-200" />
</a>
</Link>
</div>
<div className="inline-flex items-center justify-center border-r border-green-600 dark:border-green-700">
<Menu as="div" className="relative inline-block">
<div>
<Menu.Button className="inline-flex justify-center w-full px-4 py-2 text-sm font-medium text-white bg-green-300 rounded-md bg-opacity-20 hover:bg-opacity-30 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75">
<NewspaperIcon className="w-6 h-6 text-green-700 dark:text-green-200" />
</Menu.Button>
</div>
<Transition
enter="transition duration-100 ease-out"
enterFrom="transform scale-95 opacity-0"
enterTo="transform scale-100 opacity-100"
leave="transition duration-75 ease-out"
leaveFrom="transform scale-100 opacity-100"
leaveTo="transform scale-95 opacity-0"
>
<Menu.Items className="absolute bottom-[68px] right-[-80px] w-56 mt-2 origin-top-right bg-white divide-y divide-green-100 rounded-md shadow-lg ring-1 ring-green-500 ring-opacity-5 focus:outline-none dark:bg-green-700">
<div className="px-1 py-1">
<div className="text-xs uppercase text-green-500 px-2 py-1 border-b border-green-100 dark:text-green-400">Category</div>
<Menu.Item>
<Link href="/blog/">
<a className="flex rounded-md items-center w-full px-2 py-2 text-sm text-green-900 dark:text-green-50">
TailwindCSS
</a>
</Link>
</Menu.Item>

<Menu.Item>
<Link href="/blog/">
<a className="flex rounded-md items-center w-full px-2 py-2 text-sm text-green-900 dark:text-green-50">
NextJS
</a>
</Link>
</Menu.Item>
</div>
<div className="px-1 py-1">
<Menu.Item>
<Link href="/blog/">
<a className="flex rounded-md items-center w-full px-2 py-2 text-sm text-green-700 dark:text-green-100 uppercase">
Blog
</a>
</Link>
</Menu.Item>
</div>
</Menu.Items>
</Transition>
</Menu>
</div>
<div className="inline-flex items-center justify-center">
<Link href="/blog/">
<a className="px-2 py-6">
<SpeakerphoneIcon className="w-6 h-6 text-green-700 dark:text-green-200" />
</a>
</Link>
</div>
</div>
</div>
)
}

export default MobileNav
21 changes: 21 additions & 0 deletions tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,9 @@ module.exports = {
dark: {
css: {
color: theme('colors.gray.300', defaultTheme.colors.gray[300]),
h1: {
color: theme('colors.gray.200', defaultTheme.colors.gray[200]),
},
h2: {
color: theme('colors.gray.200', defaultTheme.colors.gray[200]),
},
Expand All @@ -53,6 +56,24 @@ module.exports = {
h4: {
color: theme('colors.gray.300', defaultTheme.colors.gray[300]),
},
a: { color: theme('colors.gray.100') },
strong: { color: theme('colors.gray.100') },
'ul > li::before': { backgroundColor: theme('colors.gray.700') },
hr: { borderColor: theme('colors.gray.800') },
blockquote: {
color: theme('colors.gray.300'),
borderLeftColor: theme('colors.green.800'),
},
'a code': { color: theme('colors.gray.100') },
pre: {
color: theme('colors.gray.200'),
backgroundColor: theme('colors.gray.800'),
},
thead: {
color: theme('colors.gray.100'),
borderBottomColor: theme('colors.gray.700'),
},
'tbody tr': { borderBottomColor: theme('colors.gray.800') },
},
},
}),
Expand Down