Merge branch 'main' into b-2344-add-hackathon-banner-to-menu

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 (
-      <motion.div onClick={onClick} layout="position" className={className}>
+      <motion.div onClick={onClick} layout="position" className={cn("flex-1", className)}>
         {children}
       </motion.div>
     );

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 (
+    <div className={cn("flex flex-row items-center justify-start gap-3", classNames?.base)}>
+      {showIllustration && (
+        <Image src={logoIllustration} alt="logo illustration" className={cn("min-w-10", classNames?.illustration)} />
+      )}
+      {showWordmark && (
+        <Image src={logoWordmark} alt="logo word mark" className={cn("h-auto min-w-[100px]", classNames?.wordmark)} />
+      )}
+    </div>
+  );
+}

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<classNames>;
+}

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 (
+    <div className={"relative flex w-full items-center justify-between gap-1 overflow-hidden"}>
+      <div className={"group/header w-fit"}>
+        <Logo
+          classNames={{
+            base: cn({ "group-hover/header:!opacity-0 transition-all": isFolded }),
+          }}
+        />
+        {isFolded && (
+          <Button
+            variant={"secondary-light"}
+            startIcon={{ name: "ri-sidebar-unfold-line" }}
+            hideText={true}
+            size={"l"}
+            onClick={onUnFold}
+            classNames={{
+              base: "absolute top-0 left-0 transition-all opacity-0 group-hover/header:opacity-100 !border-container-stroke-separator",
+            }}
+          />
+        )}
+      </div>
+      <Button
+        variant={"secondary-light"}
+        startIcon={{ name: "ri-sidebar-fold-line" }}
+        hideText={true}
+        size={"l"}
+        onClick={onFold}
+      />
+    </div>
+  );
+}

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;
+}

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}
     >
-      <div />
+      <MenuContainer>
+        <HeaderMenu isFolded={folded} onFoldChange={onFold} />
+      </MenuContainer>
       <MenuContainer>
         <PrimaryMenu isFolded={folded} />
       </MenuContainer>