Skip to content

Commit

Permalink
New navbar
Browse files Browse the repository at this point in the history
  • Loading branch information
@jog1t
jog1t committed Feb 20, 2024
1 parent 377250e commit 3f2863d
Show file tree
Hide file tree
Showing 13 changed files with 179 additions and 97 deletions.
59 changes: 50 additions & 9 deletions src/elements/common/button/rvt-button.styles.ts
View file
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
View file
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
View file
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"
.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
115 changes: 74 additions & 41 deletions src/elements/common/rvt-nav.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,77 +24,110 @@ export default class RvtNav extends LitElement {
render() {
return html`
<nav
class="gap-10 px-6 lg:z-30 pointer-events-auto flex flex-col transition md:divide-white/15 backdrop-blur bg-charcole-950 border-b border-white/10"
class="sm:px-6 relative z-30 w-full pointer-events-auto flex flex-col transition md:divide-white/15 backdrop-blur bg-charcole-950 border-b border-white/10"
>
<div class="h-14 flex items-center justify-between">
<div class="flex flex-row align-middle my-auto max-sm:mx-auto">
<div
class="px-6 sm:px-0 h-14 flex items-center justify-between max-w-contentwidth mx-auto w-full"
>
<div class="flex flex-row align-middle my-auto gap-4 order-2 sm:order-none">
<!-- Logo -->
<a aria-label="Home" class="my-auto" href=${routes.home.build({})}>
<div class="h-6">
<div class="h-6 hidden sm:block">
<e-svg
src="logo/cream"
src="logo/text-cream"
non-icon
class="mb-[2px] h-full w-auto"
class="block h-full w-auto"
preserve
></e-svg>
</div>
</a>
<!-- Breadcrumb -->
<div class="hidden my-auto sm:ml-6 sm:block">
<div class="flex my-auto" aria-label="Breadcrumb">
<rvt-breadcrumbs .breadcrumbs=${this.breadcrumbs}></rvt-breadcrumbs>
<div class="h-6 sm:hidden">
<e-svg src="logo/cream" non-icon class="block h-full w-auto" preserve></e-svg>
</div>
</a>
<div class="hidden sm:flex flex-row align-middle gap-1">
<rvt-button icon="solid/hammer" variant="nav" href="https://rivet.gg/learn"
>Learn</rvt-button
>
<rvt-button icon="solid/books" variant="nav" href="https://rivet.gg/docs"
>Docs</rvt-button
>
<rvt-button icon="solid/circle-info" variant="nav" href="https://rivet.gg/support"
>Support</rvt-button
>
</div>
</div>
${when(
global.status == GlobalStatus.Connected,
() => html`
<!-- Avatar -->
<div class="sm:hidden absolute left-2">
<div class="sm:hidden order-1">
<identity-avatar
class="my-auto block w-7 h-7"
shadow
.identity=${global.currentIdentity}
></identity-avatar>
</div>
<div
class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0 space-x-4 max-sm:invisible my-auto"
>
<identity-name
class="my-auto text-sm"
.identity=${global.currentIdentity}
no-link
></identity-name>
<identity-avatar
class="block w-6 h-6 m-2"
.identity=${global.currentIdentity}
></identity-avatar>
<div class="sm:flex items-center pr-2 gap-4 hidden my-auto">
<a href="https://rivet.gg/discord">
<e-svg
src="brands/discord"
class="block w-5 h-5 transition-opacity text-white opacity-75 hover:opacity-100"
></e-svg>
</a>
<a href="https://github.com/rivet-gg">
<e-svg
src="brands/github"
class="block w-5 h-5 transition-opacity text-white opacity-75 hover:opacity-100"
></e-svg>
</a>
<div class="flex ml-3">
<identity-name
class="my-auto text-sm"
.identity=${global.currentIdentity}
no-link
></identity-name>
<identity-avatar
class="block w-6 h-6 ml-2"
.identity=${global.currentIdentity}
></identity-avatar>
</div>
<icon-button
src="solid/gear"
small
color="#ececec80"
href=${routes.settings.build({})}
></icon-button>
<a href=${routes.settings.build({})}>
<e-svg
src="solid/gear"
class="block w-4 h-4 text-cream-100 hover:text-white"
></e-svg>
</a>
</div>
<!-- Settings -->
<div
class="sm:hidden absolute right-2 flex place-content-center my-auto opacity-75 transition hover:opacity-100"
>
<icon-button
src="regular/gear"
class="my-auto"
small
color="#ececec80"
href=${routes.settings.build({})}
></icon-button>
<div class="sm:hidden flex place-content-center my-auto order-3">
<a href=${routes.settings.build({})}>
<e-svg
src="solid/gear"
class="block w-4 h-4 text-cream-100 hover:text-white"
></e-svg>
</a>
</div>
`
)}
</div>
<!-- Breadcrumb -->
${when(
this.breadcrumbs,
() =>
html` <div
class="block max-w-contentwidth mx-auto w-full overflow-x-auto overflow-y-hidden"
>
<div class="flex my-auto sm:px-0" aria-label="Breadcrumbs">
<rvt-breadcrumbs
class="px-6 sm:px-0"
.breadcrumbs=${this.breadcrumbs}
></rvt-breadcrumbs>
</div>
</div>`
)}
</nav>
`;
}
Expand Down
10 changes: 5 additions & 5 deletions src/elements/layouts/sidebar-layout.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,16 +11,16 @@ export default class Layout extends LitElement {

render() {
return html`
<div class="grid lg:grid-cols-sidebar-layout min-h-full">
<div class="grid lg:grid-cols-sidebar-layout min-h-full gap-5">
<!-- Sidebar -->
<div class="flex flex-col border-white/10 border-r">
<div class="min-h-full overflow-y-auto px-6 py-5 w-full h-full">
<div class="flex flex-col border-white/10 lg:border-r">
<div class="min-h-full lg:overflow-y-auto w-full h-full mt-8">
<slot name="sidebar"></slot>
</div>
</div>
<!-- Main -->
<main class="w-full">
<main class="w-full mt-8">
<slot name="body"></slot>
</main>
</div>
Expand All @@ -46,7 +46,7 @@ export class Body extends LitElement {
static styles = cssify();

render() {
return html` <div class="px-4 sm:px-6 lg:px-8 py-2 sm:py-3 lg:py-4"><slot></slot></div> `;
return html` <div><slot></slot></div> `;
}
}

Expand Down
2 changes: 1 addition & 1 deletion src/elements/pages/analytics/rvt-game-analytics.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@ export class RvtGameAnalytics extends LitElement {

return html`
<div class="flex flex-col">
<div class="flex flex-row justify-between">
<div class="flex flex-col gap-2 sm:gap-0 sm:flex-row justify-between">
<div>
<rvt-button
@click=${this.handleDateRangeClick.bind(this, '24h')}
Expand Down
6 changes: 3 additions & 3 deletions src/elements/pages/dev/game/game-banner.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export default class DevGameBanner extends LitElement {
renderGameIcon(game: cloud.GameFull): TemplateResult {
return html`
<lazy-img
class="mx-auto w-28 h-28 z-10"
class="mx-auto w-28 h-28 relative"
bg-size=${game ? (game.logoUrl ? 'contain' : 'cover') : 'cover'}
src=${game.logoUrl ?? assets.asset('/games/blank/logo.png')}
></lazy-img>
Expand All @@ -36,7 +36,7 @@ export default class DevGameBanner extends LitElement {
? html`
${this.game.bannerUrl
? html` <lazy-img
class="absolute left-0 top-0 w-full h-full opacity-40"
class="absolute left-0 top-0 w-full h-full opacity-40 -z-1"
src=${this.game.bannerUrl}
bg-size="cover"
></lazy-img>`
Expand All @@ -52,7 +52,7 @@ export default class DevGameBanner extends LitElement {
Settings
</rvt-button>
${this.renderGameIcon(this.game)}
<h1 class="text-2xl mt-8 z-10">${this.game.displayName}</h1>
<h1 class="text-2xl mt-8 relative">${this.game.displayName}</h1>
`
: html``}
</div>
Expand Down
Loading

0 comments on commit 3f2863d

Please sign in to comment.