Skip to content

Commit

Permalink
New navbar
Browse files Browse the repository at this point in the history
  • Loading branch information
jog1t committed Feb 20, 2024
1 parent 377250e commit fd99f11
Show file tree
Hide file tree
Showing 15 changed files with 198 additions and 181 deletions.
59 changes: 50 additions & 9 deletions src/elements/common/button/rvt-button.styles.ts
Original file line number Diff line number Diff line change
@@ -1,18 +1,16 @@
import { createTV } from 'tailwind-variants';

const tv = createTV({
twMerge: false
// twMerge: false
});

export const button = tv({
base: [
'inline-flex',
'gap-2',
'm',
'items-center',
'align-middle',
'will-change-transform',
'font-bold',
'min-w-30',
'transition-all',
'duration-100',
Expand All @@ -23,12 +21,18 @@ export const button = tv({
variants: {
variant: {
primary: [
'relative text-cream-100 fill-cream-100 border-cream-100 border transition-all',
'relative font-bold gap-2 text-cream-100 fill-cream-100 border-cream-100 border transition-all',
"before:content-[''] before:absolute before:inset-0 before:-z-10 before:bg-light-grain before:bg-[size:32px] before:bg-blend-multiply before:transition-all before:opacity-0",
"after:content-[''] after:absolute after:inset-0 after:-z-10 after:bg-dark-grain after:bg-[size:32px] after:transition-all after:opacity-100"
],
secondary: 'text-white fill-white bg-charcole-900 border-cream-100 border transition-all',
danger: 'border-red-500 text-red-500 fill-red-500 border transition-all'
link: ['text-cream-100 gap-2 font-bold px-0 mx-2'],
secondary: [
'text-white gap-2 fill-white bg-charcole-900 border-cream-100 border',
'transition-all text-lg font-bold'
],
danger: 'border-red-500 gap-2 font-bold text-red-500 fill-red-500 border transition-all',
// very specific types
nav: ['text-cream-100 px-3.5 py-1.5 gap-2.5 font-normal font-display']
},
size: {
sm: 'px-2 py-1 text-xs',
Expand All @@ -52,6 +56,33 @@ export const button = tv({
'aria-busy:border-neutral-300 aria-busy:hover:bg-transparent aria-busy:translate-y-0 aria-busy:hover:text-white'
]
},
{
variant: 'link',
class: [
// hover
'hover:text-white',
// disabled
'disabled:text-cream-100/60 disabled:hover:text-cream-100/60',
// loading
'aria-busy:text-white'
]
},
{
variant: 'link',
size: 'sm',
class: ['px-0 mx-2']
},
{
variant: 'nav',
size: 'md',
class: [
'px-3.5 py-1.5 text-lg',
// hover
'hover:text-white hover:bg-white/5',
// selected
'aria-current:border-white/10 aria-current:text-white aria-current:bg-white/5'
]
},
{
variant: 'danger',
class: [
Expand Down Expand Up @@ -87,13 +118,23 @@ export const button = tv({

export const icon = tv({
variants: {
size: { sm: 'h-2.5 w-2.5', md: 'h-5 w-5"', lg: 'h-6 w-6' },
size: { sm: 'h-2.5 w-2.5', md: 'h-5 w-5', lg: 'h-6 w-6' },
variant: {
primary: '',
secondary: '',
danger: ''
link: '',
danger: '',
// custom variants
nav: 'text-cream-100 group-hover:text-white transition-all'
}
}
},
compoundVariants: [
{
variant: 'nav',
size: 'md',
class: 'h-4 w-4'
}
]
});

export type ButtonVariants = (typeof button)['variants'];
Expand Down
11 changes: 2 additions & 9 deletions src/elements/common/button/rvt-button.ts
Original file line number Diff line number Diff line change
Expand Up @@ -49,19 +49,12 @@ export default class RvtButton extends LitElement {
${when(
this.loading,
() => html`<e-svg class="animate-spin ${classes}" src="regular/spinner-third"></e-svg>`,
() =>
when(
this.icon,
() => html`<e-svg preserve class="${classes}" .src=${this.icon}></e-svg>`
)
() => when(this.icon, () => html`<e-svg class="${classes}" .src=${this.icon}></e-svg>`)
)}
</slot>
<slot></slot>
<slot name="suffix">
${when(
this.iconRight,
() => html`<e-svg preserve class="${classes}" .src=${this.iconRight}></e-svg>`
)}
${when(this.iconRight, () => html`<e-svg class="${classes}" .src=${this.iconRight}></e-svg>`)}
</slot>
`;
}
Expand Down
31 changes: 16 additions & 15 deletions src/elements/common/rvt-breadcrumbs.ts
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,7 @@ export default class RvtBreadcrumbs extends LitElement {
href: routes.devGameOverview.build({ gameId: this.game.data?.game.gameId })
}),
html`<rvt-namespace-dropdown
class="ms-3.5 min-w-32"
.game=${this.game.data?.game}
.currentNamespace=${currentNamespace}
></rvt-namespace-dropdown>`
Expand Down Expand Up @@ -170,31 +171,31 @@ export default class RvtBreadcrumbs extends LitElement {
></lazy-img>
`,
a: (opts: { content: TemplateResult; href?: string }) => html`
<a
href=${ifDefined(opts.href)}
class=${clsx(
opts.href ? 'hover:bg-slate-200/5 hover:text-white' : '',
'text-slate-200 group-last:hover:bg-transparent group-last:hover:text-slate-200 flex font-display text-md items-center rounded-md gap-3 pl-3.5 pr-3.5 py-1.5 transition'
)}
>
${opts.content}
</a>
`
<rvt-button variant="nav" href=${ifDefined(opts.href)}>${opts.content}</rvt-button>
`,
home: () =>
html`<a href=${routes.home.build({})}
><e-svg src="solid/home" class="block h-4 w-4 flex-shrink-0 text-cream-100"></e-svg
></a>`
};

renderChevron(): TemplateResult {
return html`
<e-svg src="regular/chevron-right" class="h-5 w-5 flex-shrink-0 text-gray-200"></e-svg>
`;
return html` <e-svg src="solid/chevron-right" class="h-3 w-3 flex-shrink-0 text-cream-100"></e-svg> `;
}

render() {
let crumbs = this.generateCrumbs();
return html` <ol role="list" class="flex items-center">
if (crumbs.length < 1) {
return html``;
}
return html` <ol role="list" class="flex items-center h-12">
<li class="group me-3.5">
<div class="flex items-center">${this.fragment.home()}</div>
</li>
${map(
crumbs,
(crumb, index) =>
html`<li class="group">
html`<li class="group flex-shrink-0">
<div class="flex items-center">
${when(index <= crumbs.length - 1, () => this.renderChevron())} ${crumb}
</div>
Expand Down
10 changes: 0 additions & 10 deletions src/elements/common/rvt-namespace-dropdown.scss

This file was deleted.

95 changes: 21 additions & 74 deletions src/elements/common/rvt-namespace-dropdown.ts
Original file line number Diff line number Diff line change
@@ -1,95 +1,42 @@
import { html, LitElement, TemplateResult } from 'lit';
import { html, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { cssify } from '../../utils/css';
import styles from './rvt-namespace-dropdown.scss';
import { Rivet } from '@rivet-gg/api';
import clsx from 'clsx';
import RvtRouter from '../root/rvt-router';
import { DropDownSelectEvent } from '../dev/drop-down-list';

@customElement('rvt-namespace-dropdown')
export default class RvtNamespaceDropdown extends LitElement {
static styles = cssify(styles);
static styles = cssify();

@property({ type: Object })
game: Rivet.cloud.GameFull;

@property({ type: Object })
currentNamespace: Rivet.cloud.NamespaceSummary;

@property({ type: Boolean })
expanded: boolean;

switchExpandstate(): boolean {
this.expanded = !this.expanded;
return this.expanded;
}

renderNamespaceListEntry(namespace: Rivet.cloud.NamespaceSummary, isCurrent: boolean): TemplateResult {
return html`
<a
class="pt-3 last:pb-3 transition-all first:border-t border-zinc-800 first:aria-expanded:border-zinc-600/80 group text-sm text-gray-200 hover:text-white flex flex-row place-content-around"
href=${RvtRouter.shared.currentPage.route.build({
gameId: this.game.gameId,
namespaceId: namespace.namespaceId
})}
aria-expanded=${this.expanded}
>
<div class=${clsx(isCurrent ? 'font-bold text-white' : '', 'mr-auto')}>
${namespace.displayName}
</div>
</a>
`;
private handleListSelect(event: DropDownSelectEvent<string>) {
RvtRouter.shared.navigate(
RvtRouter.shared.currentPage.route.build({
gameId: this.game.gameId,
namespaceId: event.selection.value
})
);
}

render() {
return html`
<div
class="relative min-w-[14rem] overflow-ellipsis bg-zinc-800 py-1 transition-all aria-expanded:rounded-b-none hover:cursor-pointer"
aria-expanded=${this.expanded}
@click=${() => this.switchExpandstate()}
>
<div
class="px-3 transition-all pb-1 mt-1 aria-expanded:rounded-b-none aria-expanded:delay-[300ms] min-w-full flex flex-col peer bg-zinc-800"
aria-expanded=${this.expanded}
>
<div class="flex flex-row place-content-around w-full">
<h2 class="text-md text-gray-200">${this.currentNamespace.displayName}</h2>
<button
class="ml-auto rotate-90 aria-expanded:-rotate-90 transition ease-in-out duration-150"
aria-expanded=${this.expanded}
>
<svg
class="h-5 w-5 flex-shrink-0 text-gray-200"
viewBox="0 0 18 18"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
clip-rule="evenodd"
/>
</svg>
</button>
</div>
</div>
<div
class="bg-zinc-800 w-full rounded-b-md absolute dropdownExpansion"
aria-expanded=${this.expanded}
>
<ul
class="overflow-hidden flex flex-col w-full px-3 max-h-48 aria-expanded:mb-1 aria-expanded:overflow-auto"
aria-expanded=${this.expanded}
>
${this.game.namespaces.map(namespace => {
return this.renderNamespaceListEntry(
namespace,
namespace.namespaceId === this.currentNamespace.namespaceId
);
})}
</ul>
</div>
</div>
<drop-down-list
.selection=${{
value: this.currentNamespace.namespaceId,
label: this.currentNamespace.displayName
}}
.options=${this.game.namespaces.map(namespace => ({
value: namespace.namespaceId,
label: namespace.displayName
}))}
@select=${this.handleListSelect.bind(this)}
></drop-down-list>
`;
}
}
Loading

0 comments on commit fd99f11

Please sign in to comment.