Danny Morabito
dc9abee715
✨ Features added: - 🔍 Implement functional search in header navigation - ⚙️ Add basic user settings page - 📱 Make dashboard fully responsive 🔧 Enhancements: - 🎭 Standardize CSS with consistent theming across components - 🧹 Remove unused CSS for better performance - 📊 Improve dashboard layout and visual hierarchy - 📦 Redesign last block widget for better usability 💅 This commit introduces a cohesive design system with functional design-token components for a more ✨ polished user experience.
78 lines
2 KiB
TypeScript
78 lines
2 KiB
TypeScript
import { LitElement, css, html } from 'lit';
|
|
import { customElement, property } from 'lit/decorators.js';
|
|
import { map } from 'lit/directives/map.js';
|
|
|
|
import '@components/BreadcrumbsItem';
|
|
|
|
@customElement('arx-breadcrumbs')
|
|
export class Breadcrumbs extends LitElement {
|
|
@property({ type: Array }) items: { text: string; href?: string }[] = [];
|
|
|
|
static override styles = [
|
|
css`
|
|
:host {
|
|
display: block;
|
|
}
|
|
|
|
nav {
|
|
max-width: 1200px;
|
|
margin: 1.25rem auto;
|
|
background-color: var(--color-base-200);
|
|
border-radius: var(--radius-box);
|
|
border: var(--border) solid var(--color-base-300);
|
|
padding: 0.75rem 1.25rem;
|
|
font-size: 0.95rem;
|
|
transition: all 0.3s ease;
|
|
box-shadow: calc(var(--depth) * 2px) calc(var(--depth) * 2px)
|
|
calc(var(--depth) * 4px)
|
|
oklch(from var(--color-base-content) l c h / 0.1),
|
|
calc(var(--depth) * -1px) calc(var(--depth) * -1px)
|
|
calc(var(--depth) * 3px)
|
|
oklch(from var(--color-base-100) l c h / 0.4);
|
|
}
|
|
|
|
ol {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
align-items: center;
|
|
overflow-x: auto;
|
|
scrollbar-width: none;
|
|
color: var(--color-base-content);
|
|
}
|
|
|
|
ol::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
nav {
|
|
padding: 0.5rem 1rem;
|
|
margin: 0.75rem auto;
|
|
}
|
|
}
|
|
`,
|
|
];
|
|
|
|
override render() {
|
|
return html`
|
|
<nav aria-label="Breadcrumb">
|
|
<ol>
|
|
${map(
|
|
this.items,
|
|
(item, index) => html`
|
|
<arx-breadcrumbs-item
|
|
.text=${item.text}
|
|
.href=${item.href}
|
|
.index=${index}
|
|
.isLast=${index === this.items.length - 1}
|
|
></arx-breadcrumbs-item>
|
|
`,
|
|
)}
|
|
</ol>
|
|
</nav>
|
|
`;
|
|
}
|
|
}
|