From 8d9f677c4e9ccfcc6dc9297864dc49446fb5ee59 Mon Sep 17 00:00:00 2001 From: Ellie Huxtable Date: Wed, 10 Jul 2024 15:56:33 +0100 Subject: feat(gui): use fancy new side nav (#2243) * feat(gui): use fancy new side nav * compact only sidebar, no expand-collapse * custom drag region, remove titlebar * add user popup * wire up login/logout/register, move user button to bottom and add menu * link help and feedback to forum --- ui/src/lib/utils.ts | 31 ++++++++++++++++++++++++++++--- 1 file changed, 28 insertions(+), 3 deletions(-) (limited to 'ui/src/lib') diff --git a/ui/src/lib/utils.ts b/ui/src/lib/utils.ts index d084ccad..c56d3687 100644 --- a/ui/src/lib/utils.ts +++ b/ui/src/lib/utils.ts @@ -1,6 +1,31 @@ -import { type ClassValue, clsx } from "clsx" -import { twMerge } from "tailwind-merge" +import type { ClassValue } from "clsx"; + +import clsx from "clsx"; +import { extendTailwindMerge } from "tailwind-merge"; + +const COMMON_UNITS = ["small", "medium", "large"]; + +/** + * We need to extend the tailwind merge to include NextUI's custom classes. + * + * So we can use classes like `text-small` or `text-default-500` and override them. + */ +const twMerge = extendTailwindMerge({ + extend: { + theme: { + opacity: ["disabled"], + spacing: ["divider"], + borderWidth: COMMON_UNITS, + borderRadius: COMMON_UNITS, + }, + classGroups: { + shadow: [{ shadow: COMMON_UNITS }], + "font-size": [{ text: ["tiny", ...COMMON_UNITS] }], + "bg-image": ["bg-stripe-gradient"], + }, + }, +}); export function cn(...inputs: ClassValue[]) { - return twMerge(clsx(inputs)) + return twMerge(clsx(inputs)); } -- cgit v1.3.1