Skip to content

Commit

Permalink
refactor: fix breadcrumb overflow
Browse files Browse the repository at this point in the history 
closes #2616
  • Loading branch information
@steveoh
steveoh committed Mar 21, 2024
1 parent a4bf0b3 commit ac5f27b
Show file tree
Hide file tree
Showing 6 changed files with 213 additions and 183 deletions.
202 changes: 93 additions & 109 deletions src/components/data/BreadCrumbs.astro
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
---
import type { SgidCategory } from '@models/types';
import BreadCrumbChrome from '@components/supporting/BreadCrumbChrome.astro';
interface Props {
product?: string;
category: SgidCategory | string;
Expand All @@ -11,122 +13,104 @@ interface Props {
const { product, category, class: className, gradients = 'from-white dark:from-primary-950' } = Astro.props;
---

<nav class:list={['relative flex flex-col items-center justify-center gap-2 pl-2', className]}>
<div
class:list={[
'absolute left-0 z-10 h-full w-5 bg-gradient-to-r from-white to-transparent lg:hidden dark:from-primary-950',
gradients,
]}
>
</div>
<div
class:list={[
'absolute right-0 z-10 h-full w-5 bg-gradient-to-l from-white to-transparent lg:hidden dark:from-primary-950',
gradients,
]}
>
</div>
<ol
class="animate-shake flex w-full gap-2 overflow-x-auto anim-duration-[1000ms] anim-delay-[1000ms] repeat-[2] [-ms-overflow-style:-ms-autohiding-scrollbar] [-webkit-overflow-scrolling:touch] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
>
<li class="relative flex shrink-0 items-center">
<a
class="custom-style relative block select-none rounded-full px-3 py-2 text-sm font-medium leading-none text-zinc-600 no-underline outline-none hover:bg-zinc-200 hover:text-zinc-900 focus:shadow-[0_0_0_2px] focus:shadow-primary dark:text-zinc-50 dark:hover:bg-white/20 dark:hover:text-zinc-100 dark:focus:shadow-zinc-200"
href="/"
><svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
></path>
</svg>
<span class="sr-only">Home</span>
</a>
</li>
<li class="relative flex shrink-0 items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-3 shrink-0 text-primary dark:text-accent"
>
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"></path>
</svg>
<a
class="custom-style relative block select-none rounded-full px-3 py-2 text-sm font-normal leading-none text-zinc-600 no-underline outline-none hover:bg-zinc-200 hover:text-zinc-900 focus:shadow-[0_0_0_2px] focus:shadow-primary dark:text-zinc-50 dark:hover:bg-white/20 dark:hover:text-zinc-100 dark:focus:shadow-zinc-200"
href="/products/sgid">SGID</a
>
</li>
<li class="relative flex shrink-0 items-center">
<svg
<BreadCrumbChrome class={className} gradients={gradients}>
<li class="relative flex shrink-0 items-center">
<a
class="custom-style relative block select-none rounded-full px-3 py-2 text-sm font-medium leading-none text-zinc-600 no-underline outline-none hover:bg-zinc-200 hover:text-zinc-900 focus:shadow-[0_0_0_2px] focus:shadow-primary dark:text-zinc-50 dark:hover:bg-white/20 dark:hover:text-zinc-100 dark:focus:shadow-zinc-200"
href="/"
><svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="hidden size-3 shrink-0 text-primary lg:flex dark:text-accent"
class="size-6"
aria-hidden="true"
>
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"></path>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
></path>
</svg>
<a
class="custom-style relative block select-none rounded-full px-3 py-2 text-sm font-normal leading-none text-zinc-600 no-underline outline-none hover:bg-zinc-200 hover:text-zinc-900 focus:shadow-[0_0_0_2px] focus:shadow-primary dark:text-zinc-50 dark:hover:bg-white/20 dark:hover:text-zinc-100 dark:focus:shadow-zinc-200"
href="/products/sgid/categories">SGID Categories</a
>
</li>
<li class="relative flex shrink-0 items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-3 shrink-0 text-primary dark:text-accent"
>
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"></path>
</svg>
{
product ? (
<a
class="custom-style relative block select-none rounded-full px-3 py-2 text-sm font-normal leading-none text-zinc-600 no-underline outline-none hover:bg-zinc-200 hover:text-zinc-900 focus:shadow-[0_0_0_2px] focus:shadow-primary dark:text-zinc-50 dark:hover:bg-white/20 dark:hover:text-zinc-100 dark:focus:shadow-zinc-200"
href={`/products/sgid/${category.toLowerCase()}`}
>
{category.replaceAll('-', ' ')}
</a>
) : (
<span class="custom-style px-3 font-medium dark:text-white dark:focus:shadow-zinc-200" aria-current="page">
{category.replaceAll('-', ' ')}
</span>
)
}
</li>
<span class="sr-only">Home</span>
</a>
</li>
<li class="relative flex shrink-0 items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-3 shrink-0 text-primary dark:text-accent"
>
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"></path>
</svg>
<a
class="custom-style relative block select-none rounded-full px-3 py-2 text-sm font-normal leading-none text-zinc-600 no-underline outline-none hover:bg-zinc-200 hover:text-zinc-900 focus:shadow-[0_0_0_2px] focus:shadow-primary dark:text-zinc-50 dark:hover:bg-white/20 dark:hover:text-zinc-100 dark:focus:shadow-zinc-200"
href="/products/sgid">SGID</a
>
</li>
<li class="relative flex shrink-0 items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="hidden size-3 shrink-0 text-primary lg:flex dark:text-accent"
>
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"></path>
</svg>
<a
class="custom-style relative block select-none rounded-full px-3 py-2 text-sm font-normal leading-none text-zinc-600 no-underline outline-none hover:bg-zinc-200 hover:text-zinc-900 focus:shadow-[0_0_0_2px] focus:shadow-primary dark:text-zinc-50 dark:hover:bg-white/20 dark:hover:text-zinc-100 dark:focus:shadow-zinc-200"
href="/products/sgid/categories">SGID Categories</a
>
</li>
<li class="relative flex shrink-0 items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-3 shrink-0 text-primary dark:text-accent"
>
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"></path>
</svg>
{
product && (
<li class="relative flex shrink-0 items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-3 shrink-0 text-primary dark:text-accent"
>
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
</svg>
<span class="custom-style px-3 font-medium dark:text-white dark:focus:shadow-zinc-200" aria-current="page">
{product}
</span>
</li>
product ? (
<a
class="custom-style relative block select-none rounded-full px-3 py-2 text-sm font-normal leading-none text-zinc-600 no-underline outline-none hover:bg-zinc-200 hover:text-zinc-900 focus:shadow-[0_0_0_2px] focus:shadow-primary dark:text-zinc-50 dark:hover:bg-white/20 dark:hover:text-zinc-100 dark:focus:shadow-zinc-200"
href={`/products/sgid/${category.toLowerCase()}`}
>
{category.replaceAll('-', ' ')}
</a>
) : (
<span class="custom-style px-3 font-medium dark:text-white dark:focus:shadow-zinc-200" aria-current="page">
{category.replaceAll('-', ' ')}
</span>
)
}
</ol>
</nav>
</li>
{
product && (
<li class="relative flex shrink-0 items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-3 shrink-0 text-primary dark:text-accent"
>
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
</svg>
<span class="custom-style px-3 font-medium dark:text-white dark:focus:shadow-zinc-200" aria-current="page">
{product}
</span>
</li>
)
}
</BreadCrumbChrome>
143 changes: 72 additions & 71 deletions src/components/page/BreadCrumbs.astro
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,15 @@
---
import BreadCrumbChrome from '@components/supporting/BreadCrumbChrome.astro';
import capitalize from 'lodash.capitalize';
interface Props {
path: string;
class?: string;
gradients?: string;
}
import capitalize from 'lodash.capitalize';
const { path, class: className } = Astro.props;
const { path, class: className, gradients = 'from-white dark:from-primary-950' } = Astro.props;
const capitalizeAcronyms = (str: string) => {
const acronyms = ['TURN', 'SGID', 'UGRC', 'API', 'GIS', 'GISAC'];
Expand All @@ -30,72 +33,70 @@ const parts = path
const length = parts.length - 1;
---

<nav class:list={['pl-2', className]}>
<ol class="flex items-center">
<li class="flex">
<a
class="custom-style relative block select-none rounded-full px-3 py-2 text-sm font-medium leading-none text-zinc-600 no-underline outline-none hover:bg-zinc-200 hover:text-zinc-900 focus:shadow-[0_0_0_2px] focus:shadow-primary dark:text-zinc-50 dark:hover:bg-white/20 dark:hover:text-zinc-100 dark:focus:shadow-zinc-200"
href="/"
><svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
></path>
</svg>
<span class="sr-only">Home</span>
</a>
</li>
{
parts.map((segment, index) =>
index !== length ? (
<li class="flex items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-3 shrink-0 text-primary dark:text-accent"
>
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
</svg>
<a
class="custom-style relative block select-none rounded-full p-2 text-sm font-normal leading-none text-zinc-600 no-underline outline-none hover:bg-zinc-200 hover:text-zinc-900 focus:shadow-[0_0_0_2px] focus:shadow-primary dark:text-zinc-50 dark:hover:bg-white/20 dark:hover:text-zinc-100 dark:focus:shadow-zinc-200"
href={`/${parts
.slice(0, index + 1)
.join('/')
.toLowerCase()}`}
>
{segment.replaceAll('-', ' ')}
</a>
</li>
) : (
<li class="flex items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-3 shrink-0 text-primary dark:text-accent"
>
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
</svg>
<span class="custom-style px-3 font-medium dark:text-white" aria-current="page">
{segment.replaceAll('-', ' ')}
</span>
</li>
)
<BreadCrumbChrome class={className} gradients={gradients}>
<li class="relative flex shrink-0 items-center">
<a
class="custom-style relative block select-none rounded-full px-3 py-2 text-sm font-medium leading-none text-zinc-600 no-underline outline-none hover:bg-zinc-200 hover:text-zinc-900 focus:shadow-[0_0_0_2px] focus:shadow-primary dark:text-zinc-50 dark:hover:bg-white/20 dark:hover:text-zinc-100 dark:focus:shadow-zinc-200"
href="/"
><svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
></path>
</svg>
<span class="sr-only">Home</span>
</a>
</li>
{
parts.map((segment, index) =>
index !== length ? (
<li class="relative flex shrink-0 items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-3 shrink-0 text-primary dark:text-accent"
>
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
</svg>
<a
class="custom-style relative block select-none rounded-full p-2 text-sm font-normal leading-none text-zinc-600 no-underline outline-none hover:bg-zinc-200 hover:text-zinc-900 focus:shadow-[0_0_0_2px] focus:shadow-primary dark:text-zinc-50 dark:hover:bg-white/20 dark:hover:text-zinc-100 dark:focus:shadow-zinc-200"
href={`/${parts
.slice(0, index + 1)
.join('/')
.toLowerCase()}`}
>
{segment.replaceAll('-', ' ')}
</a>
</li>
) : (
<li class="relative flex shrink-0 items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-3 shrink-0 text-primary dark:text-accent"
>
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
</svg>
<span class="custom-style px-3 font-medium dark:text-white" aria-current="page">
{segment.replaceAll('-', ' ')}
</span>
</li>
)
}
</ol>
</nav>
)
}
</BreadCrumbChrome>
Loading

0 comments on commit ac5f27b

Please sign in to comment.