diff --git a/public/images/logos/logo-illustration.svg b/public/images/logos/logo-illustration.svg new file mode 100644 index 000000000..5fc320862 --- /dev/null +++ b/public/images/logos/logo-illustration.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/public/images/logos/logo-wordmark.svg b/public/images/logos/logo-wordmark.svg new file mode 100644 index 000000000..c487917a2 --- /dev/null +++ b/public/images/logos/logo-wordmark.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/shared/components/animated-column-group/animated-column/animated-column.tsx b/shared/components/animated-column-group/animated-column/animated-column.tsx index b041ca5df..63ca49b0c 100644 --- a/shared/components/animated-column-group/animated-column/animated-column.tsx +++ b/shared/components/animated-column-group/animated-column/animated-column.tsx @@ -2,12 +2,14 @@ import { motion } from "framer-motion"; +import { cn } from "@/shared/helpers/cn"; + import { AnimatedColumnProps } from "./animated-column.types"; export function AnimatedColumn({ width, autoWidth, initialWidth, children, className, onClick }: AnimatedColumnProps) { if (autoWidth) { return ( - + {children} ); diff --git a/shared/components/logo/logo.tsx b/shared/components/logo/logo.tsx new file mode 100644 index 000000000..ebbe39c53 --- /dev/null +++ b/shared/components/logo/logo.tsx @@ -0,0 +1,23 @@ +import logoIllustration from "@/public/images/logos/logo-illustration.svg"; +import logoWordmark from "@/public/images/logos/logo-wordmark.svg"; +import Image from "next/image"; + +import { cn } from "@/shared/helpers/cn"; + +import { LogoProps } from "./logo.types"; + +export function Logo({ type = "full", classNames }: LogoProps) { + const showIllustration = type === "illustration" || type === "full"; + const showWordmark = type === "word-mark" || type === "full"; + + return ( +
+ {showIllustration && ( + logo illustration + )} + {showWordmark && ( + logo word mark + )} +
+ ); +} diff --git a/shared/components/logo/logo.types.ts b/shared/components/logo/logo.types.ts new file mode 100644 index 000000000..9f2518a5c --- /dev/null +++ b/shared/components/logo/logo.types.ts @@ -0,0 +1,10 @@ +interface classNames { + base: string; + illustration: string; + wordmark: string; +} + +export interface LogoProps { + type?: "illustration" | "word-mark" | "full"; + classNames?: Partial; +} diff --git a/shared/features/navigation/primary-navigation-desktop/header-menu/header-menu.tsx b/shared/features/navigation/primary-navigation-desktop/header-menu/header-menu.tsx new file mode 100644 index 000000000..5b3813dfd --- /dev/null +++ b/shared/features/navigation/primary-navigation-desktop/header-menu/header-menu.tsx @@ -0,0 +1,47 @@ +import { Button } from "@/design-system/atoms/button/variants/button-default"; + +import { Logo } from "@/shared/components/logo/logo"; +import { cn } from "@/shared/helpers/cn"; + +import { HeaderMenuProps } from "./header-menu.types"; + +export function HeaderMenu({ isFolded, onFoldChange }: HeaderMenuProps) { + function onUnFold() { + onFoldChange(false); + } + + function onFold() { + onFoldChange(true); + } + + return ( +
+
+ + {isFolded && ( +
+
+ ); +} diff --git a/shared/features/navigation/primary-navigation-desktop/header-menu/header-menu.types.ts b/shared/features/navigation/primary-navigation-desktop/header-menu/header-menu.types.ts new file mode 100644 index 000000000..a2870f677 --- /dev/null +++ b/shared/features/navigation/primary-navigation-desktop/header-menu/header-menu.types.ts @@ -0,0 +1,4 @@ +export interface HeaderMenuProps { + isFolded?: boolean; + onFoldChange: (isFolded: boolean) => void; +} diff --git a/shared/features/navigation/primary-navigation-desktop/primary-navigation-desktop.tsx b/shared/features/navigation/primary-navigation-desktop/primary-navigation-desktop.tsx index 85f8c464f..db92819f9 100644 --- a/shared/features/navigation/primary-navigation-desktop/primary-navigation-desktop.tsx +++ b/shared/features/navigation/primary-navigation-desktop/primary-navigation-desktop.tsx @@ -9,6 +9,7 @@ import { PrimaryMenu } from "@/shared/features/navigation/menu/primary-menu/prim import { SecondaryMenu } from "@/shared/features/navigation/menu/secondary-menu/secondary-menu"; import { UserMenu } from "@/shared/features/navigation/menu/user-menu/user-menu"; import { PrimaryBanner } from "@/shared/features/navigation/primary-banner/primary-banner"; +import { HeaderMenu } from "@/shared/features/navigation/primary-navigation-desktop/header-menu/header-menu"; function MenuContainer({ children }: { children: ReactNode }) { return ( @@ -25,8 +26,9 @@ const SIZES = { export function PrimaryNavigationDesktop() { const [folded, setFolded] = useState(false); - function onFold() { - setFolded(!folded); + + function onFold(value: boolean) { + setFolded(value); } const navSize = folded ? SIZES.folded : SIZES.unfolded; @@ -37,9 +39,10 @@ export function PrimaryNavigationDesktop() { width={navSize} initialWidth={260} className="flex h-full flex-col justify-between gap-3" - onClick={onFold} > -
+ + +