Skip to content
Snippets Groups Projects
Commit 135d8f59 authored by Matt Kirby's avatar Matt Kirby
Browse files

Added basic navbar component

parent 5d89388e
No related branches found
No related tags found
1 merge request!8create "Basic components"
Hide whitespace changes
Inline Side-by-side
daily-thought-frontend/src/components/navigation/NavBar.tsx 0 → 100644
+ 196
− 0
View file @ 135d8f59
import { FC, Fragment, PropsWithChildren } from 'react'
import { Disclosure, Menu, Transition } from '@headlessui/react'
import { Bars3Icon, BellIcon, XMarkIcon } from '@heroicons/react/24/outline'
import { User } from '@/types/user'
const user = {
Name: 'Tom Cook',
email: 'tom@example.com',
username: 'TomCook',
imageUrl:
'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
}
const navigation = [
{ name: 'My Feed', href: '#', current: true }
]
const userNavigation = [
{ name: 'Your Profile', href: '#' },
{ name: 'Settings', href: '#' },
{ name: 'Sign out', href: '#' },
]
function classNames(...classes: any) {
return classes.filter(Boolean).join(' ')
}
type NavBarProps = {
user: User | null;
}
const NavBar: FC<PropsWithChildren<NavBarProps>> = ({
children,
user
}) => {
return (
<>
<div className="min-h-full">
<Disclosure as="nav" className="bg-white border-b border-gray-200">
{({ open }) => (
<>
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="flex h-16 items-center justify-between">
{user !== null &&
<div className="flex items-center">
<div className="hidden md:block">
<div className="flex items-baseline space-x-4">
{navigation.map((item) => (
<a
key={item.name}
href={item.href}
className={classNames(
item.current
? 'bg-pink-400 text-white'
: 'text-pink-400 hover:bg-pink-400 hover:text-white',
'rounded-md px-3 py-2 text-sm font-medium'
)}
aria-current={item.current ? 'page' : undefined}
>
{item.name}
</a>
))}
</div>
</div>
</div>
}
<div>
<h1 className="text-2xl font-bold tracking-tight text-gray-900">Daily</h1>
</div>
{user !== null &&
<div className="hidden md:block">
<div className="ml-4 flex items-center md:ml-6">
<button
type="button"
className="rounded-full bg-pink-400 p-1 text-white hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-pink-400"
>
<span className="sr-only">View notifications</span>
<BellIcon className="h-6 w-6" aria-hidden="true" />
</button>
{/* Profile dropdown */}
<Menu as="div" className="relative ml-3">
<div>
<Menu.Button className="flex max-w-xs items-center rounded-full bg-green-400 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-pink-400">
<span className="sr-only">Open user menu</span>
<img className="h-8 w-8 rounded-full" src={user.imageUrl} alt="" />
</Menu.Button>
</div>
<Transition
as={Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
{userNavigation.map((item) => (
<Menu.Item key={item.name}>
{({ active }) => (
<a
href={item.href}
className={classNames(
active ? 'bg-gray-100' : '',
'block px-4 py-2 text-sm text-gray-700'
)}
>
{item.name}
</a>
)}
</Menu.Item>
))}
</Menu.Items>
</Transition>
</Menu>
</div>
</div>
}
{user !== null &&
<div className="-mr-2 flex md:hidden">
{/* Mobile menu button */}
<Disclosure.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-pink-400 hover:bg-pink-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-pink-400">
<span className="sr-only">Open main menu</span>
{open ? (
<XMarkIcon className="block h-6 w-6" aria-hidden="true" />
) : (
<Bars3Icon className="block h-6 w-6" aria-hidden="true" />
)}
</Disclosure.Button>
</div>
}
</div>
</div>
<Disclosure.Panel className="md:hidden">
<div className="space-y-1 px-2 pt-2 pb-3 sm:px-3">
{navigation.map((item) => (
<Disclosure.Button
key={item.name}
as="a"
href={item.href}
className={classNames(
item.current ? 'bg-pink-400 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white',
'block rounded-md px-3 py-2 text-base font-medium'
)}
aria-current={item.current ? 'page' : undefined}
>
{item.name}
</Disclosure.Button>
))}
</div>
<div className="border-t border-gray-200 pt-4 pb-3">
<div className="flex items-center px-5">
<div className="flex-shrink-0">
<img className="h-10 w-10 rounded-full" src={user?.Avatar} alt="" />
</div>
<div className="ml-3">
<div className="text-base font-medium leading-none text-grey-600">{user?.Name}</div>
<div className="text-sm font-medium leading-none text-gray-400">{`@${user?.Username}`}</div>
</div>
<button
type="button"
className="ml-auto flex-shrink-0 rounded-full bg-pink-400 p-1 text-white hover:text-pink-400 hover:bg-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-pink-400"
>
<span className="sr-only">View notifications</span>
<BellIcon className="h-6 w-6" aria-hidden="true" />
</button>
</div>
<div className="mt-3 space-y-1 px-2">
{userNavigation.map((item) => (
<Disclosure.Button
key={item.name}
as="a"
href={item.href}
className="block rounded-md px-3 py-2 text-base font-medium text-gray-900 hover:bg-pink-300 hover:text-green-200"
>
{item.name}
</Disclosure.Button>
))}
</div>
</div>
</Disclosure.Panel>
</>
)}
</Disclosure>
<main>
<div className="mx-auto max-w-7xl py-6 sm:px-6 lg:px-8">{children}</div>
</main>
</div>
</>
)
}
export default NavBar;
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment