Skip to content

Commit

Permalink
Merge pull request #45 from a20hek/master
Browse files Browse the repository at this point in the history 
resolved icon spacing issue, refactored navbar, sidebar and overall ui
  • Loading branch information
@srijani07
srijani07 authored Dec 11, 2023
2 parents d7598ed + 532b097 commit 6ca016b
Show file tree
Hide file tree
Showing 2 changed files with 127 additions and 95 deletions.
204 changes: 117 additions & 87 deletions components/layout.js
View file
Original file line number Diff line number Diff line change
@@ -1,91 +1,121 @@
import { Fragment } from 'react';
import { Popover, Transition } from '@headlessui/react';
import {
MenuIcon,
XIcon,
} from '@heroicons/react/outline';
import Sidebar from "/components/sidebar/sidebar";
import { MenuIcon, XIcon } from '@heroicons/react/outline';
import Sidebar from '/components/sidebar/sidebar';

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 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">
<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
</a>
<a href="https://superteam.fun/" target="_blank" className="ml-8 inline-flex items-center px-4 py-2 border border-transparent text-sm font-button font-medium rounded-full shadow-sm text-black bg-secondary hover:bg-accent focus:outline-none transition-transform duration-200 ease-in hover:-translate-y-0.5" rel="noreferrer">
Join SuperteamDAO
</a>
</div>
</div>
<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>
</div>
</div>
</div>
<Transition
as={Fragment}
enter="duration-200 ease-out"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="duration-100 ease-in"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<Popover.Panel
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-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>
<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-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="top-6 divide-y divide-gray-300">
<Sidebar contentList={contentList} viewType="nav" />
</div>
</div>
</div>
</Popover.Panel>
</Transition>
</Popover>
<div>
<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} 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>
</div>
</div>
</div>
</>
)
export default function Layout({ contentList, children }) {
return (
<>
<div className='bg-black'>
<div className='min-h-screen bg-black max-w-[1400px] mx-auto'>
<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=' 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 md:mx-8'>
<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'>
<div className='flex items-center ml-8 mx-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
</a>
<a
href='https://superteam.fun/'
target='_blank'
className='ml-6 inline-flex items-center px-4 py-2 border border-transparent text-sm font-button font-medium rounded-full shadow-sm text-black bg-secondary hover:bg-accent focus:outline-none transition-transform duration-200 ease-in hover:-translate-y-0.5'
rel='noreferrer'>
Join SuperteamDAO
</a>
</div>
</div>
<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>
</div>
</div>
</div>
<Transition
as={Fragment}
enter='duration-200 ease-out'
enterFrom='opacity-0 scale-95'
enterTo='opacity-100 scale-100'
leave='duration-100 ease-in'
leaveFrom='opacity-100 scale-100'
leaveTo='opacity-0 scale-95'>
<Popover.Panel
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-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>
<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-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='top-6 divide-y divide-gray-300'>
<Sidebar contentList={contentList} viewType='nav' />
</div>
</div>
</div>
</Popover.Panel>
</Transition>
</Popover>
<div>
<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} 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>
</div>
</div>
</div>
</div>
</>
);
}
18 changes: 10 additions & 8 deletions components/sidebar/sidebar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export default function Sidebar({ contentList, viewType }) {
?.filter((page) => !page.hide)
.sort((a, b) => a.order - b.order);
return (
<div className={`${viewType === 'nav' ? 'pl-0' : 'pl-[min(20%,4rem)]'} pr-6 py-6`}>
<div className={`${viewType === 'nav' ? 'pl-0' : 'pl-8'} pr-6 py-6`}>
{sortedContent?.map((page) => (
<Disclosure
as='div'
Expand All @@ -27,11 +27,11 @@ export default function Sidebar({ contentList, viewType }) {
<Disclosure.Button
className={classNames(
open ? 'text-secondary' : 'text-white',
'hover:text-secondary cursor-pointer w-full flex items-center justify-between pt-8 text-2xl font-medium font-heading'
'hover:text-secondary cursor-pointer w-full flex items-center justify-between pt-8 text-xl font-medium font-heading'
)}>
<div>
<span className='mr-2'>{page.logo}</span>
{page.name}
<div className='flex'>
<span className='w-10'>{page.logo}</span>
<p>{page.name}</p>
</div>
<div>
<svg
Expand Down Expand Up @@ -70,10 +70,12 @@ export default function Sidebar({ contentList, viewType }) {
subPath === url
? 'text-secondary'
: 'text-white',
'hover:text-secondary cursor-pointer w-full flex items-center justify-start pt-6 text-sm font-light font-heading'
'hover:text-secondary cursor-pointer flex items-center pt-6 text-sm font-light font-heading'
)}>
<span className='mr-2'>{subPage?.logo}</span>
{subPage?.name}
<p className='w-8'>{subPage?.logo}</p>
<p className='min-width-0 basis-0 grow'>
{subPage?.name}
</p>
</a>
);
})}
Expand Down

1 comment on commit 6ca016b

@vercel
Copy link

@vercel vercel bot commented on 6ca016b Dec 11, 2023

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:

ground-zero – ./

ground-zero-superteam-earn.vercel.app
ground-zero-git-master-superteam-earn.vercel.app
groundzero.superteam.fun
ground-zero.vercel.app

Please sign in to comment.