diff --git a/client/package.json b/client/package.json index b98ba92f..387760c0 100644 --- a/client/package.json +++ b/client/package.json @@ -57,6 +57,7 @@ "rooks": "7.14.1", "tailwind-merge": "2.5.3", "tailwindcss-animate": "1.0.7", + "usehooks-ts": "^3.1.0", "zod": "catalog:" }, "devDependencies": { diff --git a/client/public/logo-full.avif b/client/public/logo-full.avif new file mode 100644 index 00000000..f3543ff8 Binary files /dev/null and b/client/public/logo-full.avif differ diff --git a/client/public/logo-small.avif b/client/public/logo-small.avif new file mode 100644 index 00000000..70e61d3b Binary files /dev/null and b/client/public/logo-small.avif differ diff --git a/client/src/containers/nav/index.tsx b/client/src/containers/nav/index.tsx index f4c08d78..f3bcea33 100644 --- a/client/src/containers/nav/index.tsx +++ b/client/src/containers/nav/index.tsx @@ -2,6 +2,7 @@ import { useMemo } from "react"; +import Image from "next/image"; import Link from "next/link"; import { usePathname } from "next/navigation"; @@ -15,8 +16,9 @@ import { UserIcon, } from "lucide-react"; import { useSession } from "next-auth/react"; +import { useMediaQuery } from "usehooks-ts"; -import { cn } from "@/lib/utils"; +import { cn, getThemeSize } from "@/lib/utils"; import { useFeatureFlags } from "@/hooks/use-feature-flags"; @@ -94,11 +96,28 @@ export default function MainNav() { const footerNavItems = useMemo(() => { return navItems.footer.filter(() => methodologyPage); }, [methodologyPage]); + const isMobile = useMediaQuery(`(max-width: ${getThemeSize("md")})`); return ( - {open ? "Blue Carbon Cost Tool" : "BCCT"} + + {open || (!open && isMobile) ? ( + Blue Carbon Cost Tool + ) : ( + Blue Carbon Cost Tool + )} + diff --git a/client/src/lib/utils.ts b/client/src/lib/utils.ts index e4596d8e..0ea627fb 100644 --- a/client/src/lib/utils.ts +++ b/client/src/lib/utils.ts @@ -1,10 +1,25 @@ import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; +import resolveConfig from "tailwindcss/resolveConfig"; import { formatCurrency } from "@/lib/format"; import { CostItem } from "@/containers/projects/custom-project/cost-details/table"; +import tailwindConfig from "@/../tailwind.config"; + +const { theme } = resolveConfig(tailwindConfig); + +export const getThemeSize = (size: keyof typeof theme.screens) => { + if (theme?.screens && size in theme?.screens) { + return theme?.screens?.[size]; + } + + console.error(`Theme size ${size} not found`); + + return ""; +}; + export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2e1c57b1..81d81522 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -450,6 +450,9 @@ importers: tailwindcss-animate: specifier: 1.0.7 version: 1.0.7(tailwindcss@3.4.10(ts-node@10.9.2(@types/node@20.14.2)(typescript@5.4.5))) + usehooks-ts: + specifier: ^3.1.0 + version: 3.1.0(react@18.3.1) zod: specifier: 'catalog:' version: 3.23.8 @@ -8005,6 +8008,12 @@ packages: peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 + usehooks-ts@3.1.0: + resolution: {integrity: sha512-bBIa7yUyPhE1BCc0GmR96VU/15l/9gP1Ch5mYdLcFBaFGQsdmXkvjV0TtOqW1yUd6VjIwDunm+flSciCQXujiw==} + engines: {node: '>=16.15.0'} + peerDependencies: + react: ^16.8.0 || ^17 || ^18 + util-deprecate@1.0.2: resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==} @@ -13445,7 +13454,7 @@ snapshots: '@typescript-eslint/parser': 7.18.0(eslint@8.57.0)(typescript@5.4.5) eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 - eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.30.0(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0))(eslint@8.57.0) + eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.30.0)(eslint@8.57.0) eslint-plugin-import: 2.30.0(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.0) eslint-plugin-jsx-a11y: 6.10.0(eslint@8.57.0) eslint-plugin-react: 7.35.2(eslint@8.57.0) @@ -13469,13 +13478,13 @@ snapshots: transitivePeerDependencies: - supports-color - eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.30.0(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0))(eslint@8.57.0): + eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.30.0)(eslint@8.57.0): dependencies: '@nolyfill/is-core-module': 1.0.39 debug: 4.3.6(supports-color@5.5.0) enhanced-resolve: 5.17.1 eslint: 8.57.0 - eslint-module-utils: 2.9.0(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.30.0(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) + eslint-module-utils: 2.9.0(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.30.0)(eslint@8.57.0))(eslint@8.57.0) fast-glob: 3.3.2 get-tsconfig: 4.8.0 is-bun-module: 1.1.0 @@ -13488,14 +13497,14 @@ snapshots: - eslint-import-resolver-webpack - supports-color - eslint-module-utils@2.9.0(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.30.0(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0): + eslint-module-utils@2.9.0(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.30.0)(eslint@8.57.0))(eslint@8.57.0): dependencies: debug: 3.2.7 optionalDependencies: '@typescript-eslint/parser': 7.18.0(eslint@8.57.0)(typescript@5.4.5) eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 - eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.30.0(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0))(eslint@8.57.0) + eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.30.0)(eslint@8.57.0) transitivePeerDependencies: - supports-color @@ -13510,7 +13519,7 @@ snapshots: doctrine: 2.1.0 eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.9.0(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.30.0(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) + eslint-module-utils: 2.9.0(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.30.0)(eslint@8.57.0))(eslint@8.57.0) hasown: 2.0.2 is-core-module: 2.15.1 is-glob: 4.0.3 @@ -17151,6 +17160,11 @@ snapshots: dependencies: react: 18.3.1 + usehooks-ts@3.1.0(react@18.3.1): + dependencies: + lodash.debounce: 4.0.8 + react: 18.3.1 + util-deprecate@1.0.2: {} utils-merge@1.0.1: {}