Skip to content

Commit 8c56db5

Browse files
arghyaxcodesarghyaxcodes
committed
Create Menu.js
1 parent ce92e56 commit 8c56db5

File tree

1 file changed

+123
-0
lines changed

1 file changed

+123
-0
lines changed

‎src/components/home/Menu.js‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
import { Menu, Transition } from '@headlessui/react'
2+
import { ChevronDownIcon } from '@heroicons/react/solid'
3+
import { Fragment } from 'react'
4+
5+
function classNames(...classes) {
6+
return classes.filter(Boolean).join(' ')
7+
}
8+
9+
export default function MenuButton() {
10+
return (
11+
<Menu as="div" className="relative inline-block text-left">
12+
<div>
13+
<Menu.Button className="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-100">
14+
Menu
15+
<ChevronDownIcon className="-mr-1 ml-2 h-6 w-6" aria-hidden="true" />
16+
</Menu.Button>
17+
</div>
18+
19+
<Transition
20+
as={Fragment}
21+
enter="transition ease-out duration-100"
22+
enterFrom="transform opacity-0 scale-95"
23+
enterTo="transform opacity-100 scale-100"
24+
leave="transition ease-in duration-75"
25+
leaveFrom="transform opacity-100 scale-100"
26+
leaveTo="transform opacity-0 scale-95"
27+
>
28+
<Menu.Items className="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
29+
<div className="py-1">
30+
<Menu.Item>
31+
{({ active }) => (
32+
<a
33+
href="#"
34+
className={classNames(
35+
active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
36+
'block px-4 py-2 text-base sm:hidden'
37+
)}
38+
>
39+
Documentation
40+
</a>
41+
)}
42+
</Menu.Item>
43+
<Menu.Item>
44+
{({ active }) => (
45+
<a
46+
href="#"
47+
className={classNames(
48+
active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
49+
'block px-4 py-2 text-base'
50+
)}
51+
>
52+
About
53+
</a>
54+
)}
55+
</Menu.Item>
56+
<Menu.Item>
57+
{({ active }) => (
58+
<a
59+
href="/sponsors"
60+
className={classNames(
61+
active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
62+
'block px-4 py-2 text-base'
63+
)}
64+
>
65+
Sponsors
66+
</a>
67+
)}
68+
</Menu.Item>
69+
<Menu.Item>
70+
{({ active }) => (
71+
<a
72+
href="/license"
73+
className={classNames(
74+
active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
75+
'block px-4 py-2 text-base'
76+
)}
77+
>
78+
License
79+
</a>
80+
)}
81+
</Menu.Item>
82+
<Menu.Item>
83+
{({ active }) => (
84+
<a
85+
href="/changelog"
86+
className={classNames(
87+
active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
88+
'block w-full text-left px-4 py-2 text-base'
89+
)}
90+
>
91+
Change Log
92+
</a>
93+
)}
94+
</Menu.Item>
95+
<Menu.Item>
96+
{({ active }) => (
97+
<a
98+
href="https://github.com/javaistic/javaistic"
99+
className={classNames(
100+
active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
101+
'block px-4 py-2 text-base sm:hidden'
102+
)}
103+
>
104+
<div className="flex">
105+
<span className="sr-only">Javaistic on GitHub</span>
106+
<svg className="w-6 h-6 mr-2" viewBox="0 0 16 16" fill="currentColor">
107+
<path
108+
fillRule="evenodd"
109+
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
110+
/>
111+
</svg>
112+
GitHub
113+
</div>
114+
</a>
115+
)}
116+
</Menu.Item>
117+
118+
</div>
119+
</Menu.Items>
120+
</Transition>
121+
</Menu>
122+
)
123+
}

0 commit comments

Comments
 (0)