diff options
| author | Sebastian <sebasjm@gmail.com> | 2023-11-27 14:55:40 -0300 |
|---|---|---|
| committer | Sebastian <sebasjm@gmail.com> | 2023-11-27 14:55:40 -0300 |
| commit | 94d741f3c86f6304771366a7ebe36bd4bb856093 (patch) | |
| tree | 41b26cc8c80be0f867f4a33262c8bb3e4f3ffaa9 /packages/web-util/src | |
| parent | 7c5b3e0b53754e030c44a8cdd211fce7847410be (diff) | |
| download | wallet-core-94d741f3c86f6304771366a7ebe36bd4bb856093.tar.xz | |
fix: hide and show based on size
Diffstat (limited to 'packages/web-util/src')
| -rw-r--r-- | packages/web-util/src/components/Header.tsx | 51 |
1 files changed, 23 insertions, 28 deletions
diff --git a/packages/web-util/src/components/Header.tsx b/packages/web-util/src/components/Header.tsx index b1a55fa47..a0587b2ae 100644 --- a/packages/web-util/src/components/Header.tsx +++ b/packages/web-util/src/components/Header.tsx @@ -25,17 +25,14 @@ export function Header({ title, iconLinkURL, sites, supportedLangs, onLogout, ch {title} </span> </div> - <div class="block flex-1 ml-6 sm:hidden"> - {sites.length !== 0 && - <div class="flex flex-1 space-x-4"> - {/* <!-- Current: "bg-indigo-700 text-white", Default: "text-white hover:bg-indigo-500 hover:bg-opacity-75" --> */} - {sites.map((site) => { - if (site.length !== 2) return; - const [name, url] = site - return <a href={url} class="text-white hover:bg-indigo-500 hover:bg-opacity-75 rounded-md py-2 px-3 text-sm font-medium">{name}</a> - })} - </div> - } + <div class="flex-1 ml-6 "> + <div class="flex flex-1 space-x-4"> + {sites.map((site) => { + if (site.length !== 2) return; + const [name, url] = site + return <a href={url} class="hidden sm:block text-white hover:bg-indigo-500 hover:bg-opacity-75 rounded-md py-2 px-3 text-sm font-medium">{name}</a> + })} + </div> </div> <div class="flex justify-end"> <button type="button" class="relative inline-flex items-center justify-center rounded-md bg-indigo-600 p-1 text-indigo-200 hover:bg-indigo-500 hover:bg-opacity-75 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-indigo-600" aria-controls="mobile-menu" aria-expanded="false" @@ -115,23 +112,21 @@ export function Header({ title, iconLinkURL, sites, supportedLangs, onLogout, ch {/* CHILDREN */} {children} {/* /CHILDREN */} - {sites.length !== 0 && - <li class="hidden sm:block"> - <div class="text-xs font-semibold leading-6 text-gray-400"> - <i18n.Translate>Sites</i18n.Translate> - </div> - <ul role="list" class="space-y-1"> - {sites.map(([name, url]) => { - return <li> - <a href={url} target="_blank" rel="noopener noreferrer" class="text-gray-700 hover:text-indigo-600 hover:bg-gray-100 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold"> - <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border text-[0.625rem] font-medium bg-white text-gray-400 border-gray-200 group-hover:border-indigo-600 group-hover:text-indigo-600">></span> - <span class="truncate">{name}</span> - </a> - </li> - })} - </ul> - </li> - } + <li class="block sm:hidden"> + <div class="text-xs font-semibold leading-6 text-gray-400"> + <i18n.Translate>Sites</i18n.Translate> + </div> + <ul role="list" class="space-y-1"> + {sites.map(([name, url]) => { + return <li> + <a href={url} target="_blank" rel="noopener noreferrer" class="text-gray-700 hover:text-indigo-600 hover:bg-gray-100 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold"> + <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border text-[0.625rem] font-medium bg-white text-gray-400 border-gray-200 group-hover:border-indigo-600 group-hover:text-indigo-600">></span> + <span class="truncate">{name}</span> + </a> + </li> + })} + </ul> + </li> </ul> </nav> </div> |