Skip to content

Commit

Permalink
add mobile nav
Browse files Browse the repository at this point in the history
  • Loading branch information
@thecryptodiver
thecryptodiver committed Feb 2, 2022
1 parent a86a843 commit 025bae7
Show file tree
Hide file tree
Showing 4 changed files with 81 additions and 431 deletions.
202 changes: 12 additions & 190 deletions components/layout.js
View file
Original file line number Diff line number Diff line change
@@ -1,141 +1,26 @@
import { Fragment } from 'react';
import { Popover, Transition } from '@headlessui/react';
import {
ChartBarIcon,
// CheckCircleIcon,
CursorClickIcon,
MenuIcon,
// PhoneIcon,
// PlayIcon,
ShieldCheckIcon,
ViewGridIcon,
XIcon,
} from '@heroicons/react/outline';
// import { ChevronDownIcon } from '@heroicons/react/solid';
import Sidebar from "/components/sidebar/sidebar";

const solutions = [
{
name: 'Analytics',
description: 'Get a better understanding of where your traffic is coming from.',
href: '#',
icon: ChartBarIcon,
},
{
name: 'Engagement',
description: 'Speak directly to your customers in a more meaningful way.',
href: '#',
icon: CursorClickIcon,
},
{ name: 'Security', description: "Your customers' data will be safe and secure.", href: '#', icon: ShieldCheckIcon },
{
name: 'Integrations',
description: "Connect with third-party tools that you're already using.",
href: '#',
icon: ViewGridIcon,
},
];

// const callsToAction = [
// { name: 'Watch Demo', href: '#', icon: PlayIcon },
// { name: 'View All Products', href: '#', icon: CheckCircleIcon },
// { name: 'Contact Sales', href: '#', icon: PhoneIcon },
// ];

// function classNames(...classes) {
// return classes.filter(Boolean).join(' ')
// }

export default function Layout({contentList, children}) {
return (
<>
<div className="min-h-screen bg-gray-100">
<Popover className="relative bg-black border-b border-gray-700">
<div className="absolute inset-0 shadow z-30 pointer-events-none" aria-hidden="true" />
<div className="relative z-20">
<div className="max-w-7xl mx-auto flex justify-between items-center py-5 sm:py-4 md:justify-start md:space-x-10">
<div className="max-w-7xl mx-auto flex justify-between items-center py-5 sm:py-4 px-5 md:px-0 md:justify-start md:space-x-10">
<div>
<a href="/" className="flex items-center justify-start">
<img src="/images/logo.png" alt="Ground Zero" width="30" height="30" className="img-responsive mr-3" />
<h1 className="logo-text text-white font-heading font-extrabold text-3xl bg-clip-text">Ground Zero</h1>
</a>
</div>
<div className="hidden md:flex-1 md:flex md:items-center md:justify-end">
{/* <Popover>
{({ open }) => (
<>
<Popover.Button
className={classNames(
open ? 'text-accent' : 'text-secondary',
'group rounded-md inline-flex items-center text-base font-medium hover:text-accent focus:outline-none'
)}
>
<span className="font-heading">Learning Paths</span>
<ChevronDownIcon
className={classNames(
open ? 'text-accent' : 'text-secondary',
'ml-2 h-5 w-5 group-hover:text-accent'
)}
aria-hidden="true"
/>
</Popover.Button>
<Transition
as={Fragment}
enter="transition ease-out duration-200"
enterFrom="opacity-0 -translate-y-1"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 -translate-y-1"
>
<Popover.Panel className="hidden md:block absolute z-10 top-full inset-x-0 transform shadow-lg bg-white">
<div className="max-w-7xl mx-auto grid gap-y-6 px-4 py-6 sm:grid-cols-2 sm:gap-8 sm:px-6 sm:py-8 lg:grid-cols-4 lg:px-8 lg:py-12 xl:py-16">
{solutions.map((item) => (
<a
key={item.name}
href={item.href}
className="-m-3 p-3 flex flex-col justify-between rounded-lg hover:bg-gray-50"
>
<div className="flex md:h-full lg:flex-col">
<div className="flex-shrink-0">
<span className="inline-flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
<item.icon className="h-6 w-6" aria-hidden="true" />
</span>
</div>
<div className="ml-4 md:flex-1 md:flex md:flex-col md:justify-between lg:ml-0 lg:mt-4">
<div>
<p className="text-base font-medium text-gray-900">{item.name}</p>
<p className="mt-1 text-sm text-gray-500">{item.description}</p>
</div>
<p className="mt-2 text-sm font-medium text-indigo-600 lg:mt-4">
Learn more <span aria-hidden="true">&rarr;</span>
</p>
</div>
</div>
</a>
))}
</div>
<div className="bg-gray-50">
<div className="max-w-7xl mx-auto space-y-6 px-4 py-5 sm:flex sm:space-y-0 sm:space-x-10 sm:px-6 lg:px-8">
{callsToAction.map((item) => (
<div key={item.name} className="flow-root">
<a
href={item.href}
className="-m-3 p-3 flex items-center rounded-md text-base font-medium text-gray-900 hover:bg-gray-100"
>
<item.icon className="flex-shrink-0 h-6 w-6 text-gray-400" aria-hidden="true" />
<span className="ml-3">{item.name}</span>
</a>
</div>
))}
</div>
</div>
</Popover.Panel>
</Transition>
</>
)}
</Popover> */}
<div className="flex items-center ml-8">
<a href="https://github.com/superteamdao/ground-zero" target="_blank" className="text-base font-medium text-secondary hover:text-accent font-heading" rel="noreferrer">
Contribute to Docs
Expand All @@ -145,8 +30,8 @@ export default function Layout({contentList, children}) {
</a>
</div>
</div>
<div className="hidden -mr-2 -my-2 md:hidden">
<Popover.Button className="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
<div className="-mr-2 -my-2 md:hidden">
<Popover.Button className="bg-black border border-gray-400 rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary">
<span className="sr-only">Open menu</span>
<MenuIcon className="h-6 w-6" aria-hidden="true" />
</Popover.Button>
Expand All @@ -166,87 +51,24 @@ export default function Layout({contentList, children}) {
focus
className="absolute z-30 top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden"
>
<div className="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 bg-white divide-y-2 divide-gray-50">
<div className="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 bg-black border-b border-gray-700 divide-y-2 divide-gray-50">
<div className="pt-5 pb-6 px-5 sm:pb-8">
<div className="flex items-center justify-between">
<div>
<img
className="h-8 w-auto"
src="https://tailwindui.com/img/logos/workflow-mark-indigo-600.svg"
alt="Workflow"
/>
<a href="/" className="flex items-center justify-start">
<img src="/images/logo.png" alt="Ground Zero" width="30" height="30" className="img-responsive mr-3" />
<h1 className="logo-text text-white font-heading font-extrabold text-3xl bg-clip-text">Ground Zero</h1>
</a>
</div>
<div className="-mr-2">
<Popover.Button className="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
<Popover.Button className="bg-black border border-gray-400 rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
<span className="sr-only">Close menu</span>
<XIcon className="h-6 w-6" aria-hidden="true" />
</Popover.Button>
</div>
</div>
<div className="mt-6 sm:mt-8">
<nav>
<div className="grid gap-7 sm:grid-cols-2 sm:gap-y-8 sm:gap-x-4">
{solutions.map((item) => (
<a
key={item.name}
href={item.href}
className="-m-3 flex items-center p-3 rounded-lg hover:bg-gray-50"
>
<div className="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
<item.icon className="h-6 w-6" aria-hidden="true" />
</div>
<div className="ml-4 text-base font-medium text-gray-900">{item.name}</div>
</a>
))}
</div>
<div className="mt-8 text-base">
<a href="#" className="font-medium text-indigo-600 hover:text-indigo-500">
{' '}
View all products <span aria-hidden="true">&rarr;</span>
</a>
</div>
</nav>
</div>
</div>
<div className="py-6 px-5">
<div className="grid grid-cols-2 gap-4">
<a href="#" className="rounded-md text-base font-medium text-gray-900 hover:text-gray-700">
Pricing
</a>

<a href="#" className="rounded-md text-base font-medium text-gray-900 hover:text-gray-700">
Docs
</a>

<a href="#" className="rounded-md text-base font-medium text-gray-900 hover:text-gray-700">
Company
</a>

<a href="#" className="rounded-md text-base font-medium text-gray-900 hover:text-gray-700">
Resources
</a>

<a href="#" className="rounded-md text-base font-medium text-gray-900 hover:text-gray-700">
Blog
</a>

<a href="#" className="rounded-md text-base font-medium text-gray-900 hover:text-gray-700">
Contact Sales
</a>
</div>
<div className="mt-6">
<a
href="#"
className="w-full flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-indigo-600 hover:bg-indigo-700"
>
Sign up
</a>
<p className="mt-6 text-center text-base font-medium text-gray-500">
Existing customer?{' '}
<a href="#" className="text-indigo-600 hover:text-indigo-500">
Sign in
</a>
</p>
<div className="top-6 divide-y divide-gray-300">
<Sidebar contentList={contentList} viewType="nav" />
</div>
</div>
</div>
Expand All @@ -257,7 +79,7 @@ export default function Layout({contentList, children}) {
<div className="md:grid md:grid-cols-12">
<div className="hidden md:block md:col-span-3 bg-black border-r border-gray-700">
<nav aria-label="Sidebar" className="sticky top-6 divide-y divide-gray-300">
<Sidebar contentList={contentList} />
<Sidebar contentList={contentList} viewType="main" />
</nav>
</div>
<main className="sm:px-6 md:px-8 col-span-12 md:col-span-9 bg-black min-h-screen">{children}</main>
Expand Down
4 changes: 2 additions & 2 deletions components/sidebar/sidebar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,12 @@ function classNames(...classes) {
return classes.filter(Boolean).join(' ')
}

export default function Sidebar({ contentList }) {
export default function Sidebar({ contentList, viewType }) {
const router = useRouter();
const {asPath: url, query: { path }} = router;
const sortedContent = contentList?.filter(page => !page.hide).sort((a,b) => a.order - b.order);
return (
<div className="pl-20 pr-6 py-6">
<div className={`${viewType === "nav" ? 'pl-0' : 'pl-20'} pr-6 py-6`}>
{
sortedContent?.map(page =>
(
Expand Down
1 change: 1 addition & 0 deletions lib/api.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ export async function getModifiedPage(page) {
let html = result?.oEmbed?.html;
if (html) {
html = html.replace('width="200" height="113"', 'width="100%" height="576"')
html = html.replace('width="600"', 'width="100%"')
finalPage = finalPage.replace(embeds[i].string, `<div class="mb-10">${html}</div>`);
} else {
const section = `
Expand Down
Loading

1 comment on commit 025bae7

@vercel
Copy link

@vercel vercel bot commented on 025bae7 Feb 2, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.