feat(page): header component (#4)

Co-authored-by: Mehdi Hamri <[email protected]>

app/test/page.tsx

@@ -2,12 +2,19 @@ import { TestSidePanel } from "@/app/test/_components/side-panel/test-side-panel
 
 import { AnimatedColumnGroup } from "@/shared/components/animated-column-group/animated-column-group";
 import { AnimatedColumn } from "@/shared/components/animated-column-group/animated-column/animated-column";
+import { SecondaryNavigation } from "@/shared/features/navigation/secondary-navigation/secondary-navigation";
 
 export default function TestPage() {
   // TODO UPDATE THIS TO MAKE A COMPONENT
   return (
     <div className={"flex h-full w-full flex-col overflow-hidden bg-orange-900"}>
-      <div className="min-h-[50px] w-full bg-blue-500">TOP NAV</div>
+      <SecondaryNavigation
+        iconName={"ri-rocket-line"}
+        breadcrumbs={[
+          { id: "root", label: "OnlyDust app", href: "https://app.onlydust.com" },
+          { id: "current_page", label: "Current page" },
+        ]}
+      />
       <AnimatedColumnGroup>
         <AnimatedColumn autoWidth={true} className="h-full flex-1 overflow-auto bg-yellow-900">
           <div className={"h-[5000px] bg-orange-900"}>CONTENT</div>

shared/features/navigation/primary-menu/primary-menu.tsx → shared/features/navigation/menu/primary-menu/primary-menu.tsx

@@ -1,6 +1,6 @@
-import { ItemNav } from "@/design-system/molecules/item-nav";
+import { PrimaryMenuProps } from "shared/features/navigation/menu/primary-menu/primary-menu.types";
 
-import { PrimaryMenuProps } from "./primary-menu.types";
+import { ItemNav } from "@/design-system/molecules/item-nav";
 
 export function PrimaryMenu({ isFolded }: PrimaryMenuProps) {
   return (

shared/features/navigation/secondary-menu/secondary-menu.tsx → shared/features/navigation/menu/secondary-menu/secondary-menu.tsx

@@ -1,6 +1,6 @@
-import { ItemNav } from "@/design-system/molecules/item-nav";
+import { SecondaryMenuProps } from "shared/features/navigation/menu/secondary-menu/secondary-menu.types";
 
-import { SecondaryMenuProps } from "./secondary-menu.types";
+import { ItemNav } from "@/design-system/molecules/item-nav";
 
 export function SecondaryMenu({ isFolded }: SecondaryMenuProps) {
   return (

shared/features/navigation/user-menu/user-menu.tsx → shared/features/navigation/menu/user-menu/user-menu.tsx

@@ -1,3 +1,5 @@
+import { UserMenuProps } from "shared/features/navigation/menu/user-menu/user-menu.types";
+
 import { useClientBootstrapContext } from "@/core/bootstrap/client-bootstrap-context";
 
 import { Avatar } from "@/design-system/atoms/avatar";
@@ -8,8 +10,6 @@ import { Typo } from "@/design-system/atoms/typo";
 import { cn } from "@/shared/helpers/cn";
 import { useAuthUser } from "@/shared/hooks/auth/use-auth-user";
 
-import { UserMenuProps } from "./user-menu.types";
-
 export function UserMenu({ isFolded }: UserMenuProps) {
   const { user, isLoading } = useAuthUser();
   const login = user?.login;

shared/features/navigation/primary-navigation-desktop/primary-navigation-desktop.tsx

@@ -5,9 +5,9 @@ import { useState } from "react";
 import { Paper } from "@/design-system/atoms/paper";
 
 import { AnimatedColumn } from "@/shared/components/animated-column-group/animated-column/animated-column";
-import { PrimaryMenu } from "@/shared/features/navigation/primary-menu/primary-menu";
-import { SecondaryMenu } from "@/shared/features/navigation/secondary-menu/secondary-menu";
-import { UserMenu } from "@/shared/features/navigation/user-menu/user-menu";
+import { PrimaryMenu } from "@/shared/features/navigation/menu/primary-menu/primary-menu";
+import { SecondaryMenu } from "@/shared/features/navigation/menu/secondary-menu/secondary-menu";
+import { UserMenu } from "@/shared/features/navigation/menu/user-menu/user-menu";
 
 function MenuContainer({ children }: { children: React.ReactNode }) {
   return (

shared/features/navigation/secondary-navigation/secondary-navigation.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { Breadcrumbs } from "@/design-system/atoms/breadcrumbs";
+import { Button } from "@/design-system/atoms/button/variants/button-default";
+import { Icon } from "@/design-system/atoms/icon";
+import { Paper } from "@/design-system/atoms/paper";
+
+import { SecondaryNavigationTypes } from "@/shared/features/navigation/secondary-navigation/secondary-navigation.types";
+
+export function SecondaryNavigation({ iconName, breadcrumbs, onBack }: SecondaryNavigationTypes) {
+  return (
+    <Paper
+      as={"header"}
+      size={"s"}
+      container={"2"}
+      border={"none"}
+      classNames={{ base: "flex justify-between items-center gap-3" }}
+    >
+      <div className={"flex items-center gap-2"}>
+        {onBack ? (
+          <Button
+            variant={"secondary-light"}
+            size={"l"}
+            startIcon={{ name: "ri-arrow-left-s-line" }}
+            hideText
+            onClick={onBack}
+          />
+        ) : null}
+        <Icon name={iconName} size={24} />
+        <Breadcrumbs items={breadcrumbs} />
+      </div>
+
+      <div>
+        <Button variant={"secondary-light"} size={"l"} startIcon={{ name: "ri-notification-3-line" }} hideText />
+      </div>
+    </Paper>
+  );
+}

shared/features/navigation/secondary-navigation/secondary-navigation.types.ts

@@ -0,0 +1,8 @@
+import { BreadcrumbsPort } from "@/design-system/atoms/breadcrumbs";
+import { IconPort } from "@/design-system/atoms/icon";
+
+export interface SecondaryNavigationTypes {
+  iconName: IconPort["name"];
+  breadcrumbs: BreadcrumbsPort["items"];
+  onBack?: () => void;
+}