Skip to content

Commit e51fb12

Browse files
handotdevhandotdev
committed
Add responsive menu
1 parent 423eb9a commit e51fb12

File tree

2 files changed

+155
-18
lines changed

2 files changed

+155
-18
lines changed

‎assets/mintlify.svg

+1-5
Loading

‎pages/index.tsx

+154-13
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { languages, Grammar } from 'prismjs';
1414
import CodeEditor from '../components/CodeEditor';
1515
import Output from '../components/Output';
1616
import vscode from '../assets/vsc.svg';
17+
import logo from '../assets/mintlify.svg';
1718

1819
const ENDPOINT = process.env.NODE_ENV === 'development'
1920
? 'http://localhost:5000'
@@ -166,14 +167,8 @@ export default function Example() {
166167
<div className="max-w-7xl mx-auto px-2 sm:px-4 lg:px-8">
167168
<div className="relative h-16 flex items-center justify-between">
168169
<div className="px-2 flex items-center lg:px-0">
169-
<div className="flex-shrink-0">
170-
<div className="h-7 w-7">
171-
<svg viewBox="0 0 141 141" fill="none" xmlns="http://www.w3.org/2000/svg">
172-
<path d="M18.4672 54.6072L34.4379 38.5328C33.5494 42.6428 32.858 46.9378 32.858 51.3214C32.858 57.7465 33.8393 64.3183 36.3867 70.4808C37.7727 74.4164 39.6401 78.3944 42.1274 82.1519L10.8786 113.401C9.19813 110.656 7.8153 107.841 6.82735 104.877L6.81229 104.832L6.79617 104.787C4.87361 99.4465 4.00367 93.8575 4.00001 88.2151C4.21919 76.4045 8.54284 64.6897 17.2843 55.788H17.2941L18.4672 54.6072Z" stroke="white" strokeWidth="8" />
173-
<path d="M26.9728 129.593L58.1003 98.2659C61.7071 100.625 65.5846 102.667 69.8386 104.09C76.1369 106.351 82.6506 107.343 89.1113 107.343C93.4212 107.343 97.7931 106.884 102.2 105.721L86.0496 121.976L86.0404 121.985L85.583 122.443C76.3521 131.674 64.3186 136.21 52.2175 136.434C46.5752 136.43 40.9862 135.56 35.6458 133.638L35.6291 133.632L35.6123 133.626C32.6572 132.592 29.7356 131.267 26.9728 129.593Z" stroke="white" strokeWidth="8" />
174-
<path d="M84.9806 44.1555L84.9517 44.1339L84.9225 44.1128C80.5289 40.9396 75.7466 38.1463 70.3607 36.3443C64.0624 34.0833 57.5487 33.0913 51.088 33.0913C48.8828 33.0913 46.6614 33.2115 44.4274 33.4846C46.6642 28.0962 50.0095 22.9946 54.4083 18.4328L54.8495 17.9915C64.1038 8.73728 76.3716 4 88.6458 4L110.107 4L136.434 4V30.3262V51.7878C136.434 64.0305 131.717 76.0876 122.42 85.6063C122.366 85.6611 122.315 85.7153 122.267 85.7685L122.026 86.0014C117.432 90.4366 112.29 93.8028 106.858 96.0437C107.158 93.8433 107.342 91.6063 107.342 89.3456C107.342 82.8754 106.347 76.3522 104.079 70.0453C102.335 65.0655 99.8209 60.0145 96.2571 55.4251C94.7351 53.3988 92.9816 51.3998 91.0077 49.4259C89.0247 47.4429 87.0164 45.6824 84.9806 44.1555Z" stroke="white" strokeWidth="8" />
175-
</svg>
176-
</div>
170+
<div className="mt-1 flex-shrink-0">
171+
<Image height={48} width={48} src={logo} />
177172
</div>
178173
</div>
179174
<Link href="https://marketplace.visualstudio.com/items?itemname=mintlify.document">
@@ -207,8 +202,8 @@ export default function Example() {
207202
)}
208203
</Disclosure>
209204
<main className="relative -mt-32 z-10">
210-
<div className="max-w-screen-xl mx-auto pb-6 px-4 sm:px-6 lg:pb-16 lg:px-8">
211-
<div className="rounded-lg overflow-hidden">
205+
<div className="max-w-screen-xl mx-auto pb-6 px-4 sm:px-6 lg:pb-8 lg:px-8">
206+
<div className="rounded-lg">
212207
<div className="grid sm:grid-cols-2 sm:gap-4">
213208
<div className="h-full">
214209
<CodeEditor
@@ -225,12 +220,158 @@ export default function Example() {
225220
languageGrammar={selectedLanguage.grammar}
226221
/>
227222
</div>
223+
<div className="hidden xl:block mt-2 w-full z-10">
224+
<div className="grid gap-8 items-start justify-center">
225+
<span className="relative px-4 py-4 rounded-lg leading-none flex items-center border border-gray-100 shadow-sm">
226+
<span className="flex space-x-5">
227+
<div>
228+
<p className="text-sm text-gray-600 mb-1 font-medium">Language</p>
229+
<Menu as="div" className="relative inline-block text-left">
230+
<div>
231+
<Menu.Button className="inline-flex items-stretch w-40 rounded-md border border-gray-200 shadow-sm px-2 py-1 bg-white text-sm text-gray-700 hover:bg-gray-50 hover:border-gray-300">
232+
<div className="flex-1 text-left text-gray-700">
233+
{selectedLanguage.name}
234+
</div>
235+
<ChevronDownIcon className="-mr-1 ml-2 h-5 w-5" aria-hidden="true" />
236+
</Menu.Button>
237+
</div>
238+
239+
<Transition
240+
as={Fragment}
241+
enter="transition ease-out duration-100"
242+
enterFrom="transform opacity-0 scale-95"
243+
enterTo="transform opacity-100 scale-100"
244+
leave="transition ease-in duration-75"
245+
leaveFrom="transform opacity-100 scale-100"
246+
leaveTo="transform opacity-0 scale-95"
247+
>
248+
<Menu.Items className="origin-top-right w-40 absolute right-0 mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5">
249+
<div className="py-1">
250+
{languagesDropdown.map((language) => (
251+
<Menu.Item key={language.id}>
252+
<button
253+
type="button"
254+
onClick={() => setSelectedLanguage(language)}
255+
className={classNames(
256+
selectedLanguage.id === language.id ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
257+
'block px-4 py-2 text-sm w-full text-left hover:bg-gray-100',
258+
)}
259+
>
260+
{language.name}
261+
</button>
262+
</Menu.Item>
263+
))}
264+
</div>
265+
</Menu.Items>
266+
</Transition>
267+
</Menu>
268+
</div>
269+
<div>
270+
<p className="text-sm text-gray-600 mb-1 font-medium">Format</p>
271+
<Menu as="div" className="relative inline-block text-left">
272+
<div>
273+
<Menu.Button className="inline-flex justify-center w-32 rounded-md border border-gray-200 shadow-sm px-2 py-1 bg-white text-sm hover:bg-gray-50 hover:border-gray-300">
274+
<div className="flex-1 text-left text-gray-700">
275+
{selectedFormat.name}
276+
</div>
277+
<ChevronDownIcon className="-mr-1 ml-2 h-5 w-5" aria-hidden="true" />
278+
</Menu.Button>
279+
</div>
280+
281+
<Transition
282+
as={Fragment}
283+
enter="transition ease-out duration-100"
284+
enterFrom="transform opacity-0 scale-95"
285+
enterTo="transform opacity-100 scale-100"
286+
leave="transition ease-in duration-75"
287+
leaveFrom="transform opacity-100 scale-100"
288+
leaveTo="transform opacity-0 scale-95"
289+
>
290+
<Menu.Items className="origin-top-right w-32 absolute right-0 mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
291+
<div className="py-1">
292+
{
293+
formats.map((format) => (
294+
<Menu.Item key={format.id}>
295+
<button
296+
type="button"
297+
onClick={() => setSelectedFormat(format)}
298+
className={classNames(
299+
format.id === selectedFormat.id ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
300+
'block px-4 py-2 text-sm w-full text-left',
301+
)}
302+
>
303+
{format.name}
304+
</button>
305+
</Menu.Item>
306+
))
307+
}
308+
</div>
309+
</Menu.Items>
310+
</Transition>
311+
</Menu>
312+
</div>
313+
<div>
314+
<p className="text-sm text-gray-600 mb-1 font-medium">Commented</p>
315+
<div className="mt-2 flex">
316+
<Switch
317+
checked={commentsEnabled}
318+
onChange={setCommentsEnabled}
319+
className="flex-shrink-0 group relative rounded-full inline-flex items-center justify-center h-5 w-10 cursor-pointer"
320+
>
321+
<span className="sr-only">Use setting</span>
322+
<span aria-hidden="true" className="pointer-events-none absolute bg-white w-full h-full rounded-md" />
323+
<span
324+
aria-hidden="true"
325+
className={classNames(
326+
commentsEnabled ? 'bg-primary' : 'bg-gray-200',
327+
'pointer-events-none absolute h-4 w-9 mx-auto rounded-full transition-colors ease-in-out duration-200',
328+
)}
329+
/>
330+
<span
331+
aria-hidden="true"
332+
className={classNames(
333+
commentsEnabled ? 'translate-x-5' : 'translate-x-0',
334+
'pointer-events-none absolute left-0 inline-block h-5 w-5 border border-gray-200 rounded-full bg-white shadow transform ring-0 transition-transform ease-in-out duration-200',
335+
)}
336+
/>
337+
</Switch>
338+
</div>
339+
</div>
340+
<button
341+
type="button"
342+
className="relative flex w-32 space-x-1 justify-center items-center px-4 py-2 text-sm rounded-md text-green-600 bg-green-500 bg-opacity-25 hover:bg-opacity-40 duration-200"
343+
onClick={onClickGenerate}
344+
>
345+
{
346+
isGenerating ? (
347+
<div className="absolute inset-0 flex items-center justify-center">
348+
<svg className="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
349+
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
350+
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
351+
</svg>
352+
</div>
353+
) : (
354+
<>
355+
<div>
356+
Write Docs
357+
</div>
358+
<div>
359+
<PencilAltIcon className="h-4 w-4" />
360+
</div>
361+
</>
362+
)
363+
}
364+
</button>
365+
</span>
366+
</span>
367+
</div>
368+
</div>
228369
</div>
229370
</div>
230-
<div className="mt-16 w-full">
371+
<div className="block xl:hidden mt-8 w-full z-10">
231372
<div className="grid gap-8 items-start justify-center">
232-
<span className="relative px-7 py-4 rounded-lg leading-none flex items-center border border-gray-100 shadow-sm">
233-
<span className="flex space-x-5">
373+
<span className="relative px-4 py-4 rounded-lg leading-none flex items-center border border-gray-100 shadow-sm">
374+
<span className="grid grid-cols-2 gap-5 sm:flex sm:space-x-5">
234375
<div>
235376
<p className="text-sm text-gray-600 mb-1 font-medium">Language</p>
236377
<Menu as="div" className="relative inline-block text-left">

0 commit comments

Comments
 (0)