diff --git a/design-system/molecules/item-nav/adapters/default/default.adapter.tsx b/design-system/molecules/item-nav/adapters/default/default.adapter.tsx
index 2a886bd3..ab2cf7be 100644
--- a/design-system/molecules/item-nav/adapters/default/default.adapter.tsx
+++ b/design-system/molecules/item-nav/adapters/default/default.adapter.tsx
@@ -6,42 +6,63 @@ import { ItemNavPort } from "@/design-system/molecules/item-nav/item-nav.types";
import { BaseLink } from "@/shared/components/base-link/base-link";
import { cn } from "@/shared/helpers/cn";
-export function ItemNavDefaultAdapter({ classNames, children, translate, ...props }: ItemNavPort) {
- const { isDisabled, isFolded, icon, labelProps = {}, ...linkProps } = props;
+function Content({
+ classNames,
+ children,
+ translate,
+ icon,
+ labelProps = {},
+ isExternal,
+ isDisabled,
+ isFolded,
+}: ItemNavPort & { isExternal: boolean }) {
const slots = ItemNavDefaultVariants({
isDisabled,
});
- const showChildren = !!children || !!translate;
+ return (
+
+
+
+
+ {children}
+
+ {isExternal ? (
+
+ ) : null}
+
+
+ );
+}
+
+export function ItemNavDefaultAdapter({ ...props }: ItemNavPort) {
+ const { isDisabled, classNames, onClick, ...linkProps } = props;
+ const slots = ItemNavDefaultVariants({
+ isDisabled,
+ });
+
+ if (onClick) {
+ return (
+
+ );
+ }
return (
- {({ isExternal }) => (
-
-
-
- {showChildren && (
-
- {children}
-
- )}
- {isExternal ? (
-
- ) : null}
-
-
- )}
+ {({ isExternal }) => }
);
}
diff --git a/design-system/molecules/item-nav/item-nav.types.ts b/design-system/molecules/item-nav/item-nav.types.ts
index 2928df9f..0e4c379a 100644
--- a/design-system/molecules/item-nav/item-nav.types.ts
+++ b/design-system/molecules/item-nav/item-nav.types.ts
@@ -20,4 +20,5 @@ export interface ItemNavPort extends _BaseLinkProps, PropsWithChildren {
translate?: TranslateProps;
isDisabled?: boolean;
isFolded?: boolean;
+ onClick?: () => void;
}
diff --git a/package-lock.json b/package-lock.json
index e391c49e..7e41c5a8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
"version": "0.1.0",
"dependencies": {
"@auth0/auth0-react": "^2.2.4",
+ "@fillout/react": "^1.1.2",
"@nextui-org/react": "^2.4.6",
"@tanstack/react-query": "^5.51.21",
"clsx": "^2.1.1",
@@ -4247,6 +4248,12 @@
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
}
},
+ "node_modules/@fillout/react": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/@fillout/react/-/react-1.1.2.tgz",
+ "integrity": "sha512-XyzLY74Zhxxwym3A9770Tb3NINwaaWyWwvaw1lMJ5sA/P6hgsdzvefUOqohzR3+KVyspvBOR4BoR0nBMPFd/Vw==",
+ "license": "MIT"
+ },
"node_modules/@formatjs/ecma402-abstract": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-2.0.0.tgz",
diff --git a/package.json b/package.json
index 4d96879b..f95de446 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
},
"dependencies": {
"@auth0/auth0-react": "^2.2.4",
+ "@fillout/react": "^1.1.2",
"@nextui-org/react": "^2.4.6",
"@tanstack/react-query": "^5.51.21",
"clsx": "^2.1.1",
diff --git a/shared/features/feedback-drawer/feedback-drawer.hooks.ts b/shared/features/feedback-drawer/feedback-drawer.hooks.ts
new file mode 100644
index 00000000..748ce50e
--- /dev/null
+++ b/shared/features/feedback-drawer/feedback-drawer.hooks.ts
@@ -0,0 +1,5 @@
+import { useState } from "react";
+
+export function useFeedbackDrawerState() {
+ return useState(false);
+}
diff --git a/shared/features/feedback-drawer/feedback-drawer.tsx b/shared/features/feedback-drawer/feedback-drawer.tsx
new file mode 100644
index 00000000..0cfa8e1c
--- /dev/null
+++ b/shared/features/feedback-drawer/feedback-drawer.tsx
@@ -0,0 +1,36 @@
+import { FilloutStandardEmbed } from "@fillout/react";
+
+import { Drawer } from "@/design-system/molecules/drawer";
+
+import { useFeedbackDrawerState } from "@/shared/features/feedback-drawer/feedback-drawer.hooks";
+import { useAuthUser } from "@/shared/hooks/auth/use-auth-user";
+
+export function FeedbackDrawer({ state }: { state: ReturnType }) {
+ const [isOpen, setIsOpen] = state;
+
+ const { user } = useAuthUser();
+
+ return (
+
+
+
+ );
+}
diff --git a/shared/features/navigation/menu/primary-menu/primary-menu.tsx b/shared/features/navigation/menu/primary-menu/primary-menu.tsx
index 12a152d2..b856eb88 100644
--- a/shared/features/navigation/menu/primary-menu/primary-menu.tsx
+++ b/shared/features/navigation/menu/primary-menu/primary-menu.tsx
@@ -1,7 +1,7 @@
-import { PrimaryMenuProps } from "shared/features/navigation/menu/primary-menu/primary-menu.types";
-
import { ItemNav } from "@/design-system/molecules/item-nav";
+import { PrimaryMenuProps } from "./primary-menu.types";
+
export function PrimaryMenu({ isFolded }: PrimaryMenuProps) {
return (
<>
diff --git a/shared/features/navigation/menu/secondary-menu/secondary-menu.tsx b/shared/features/navigation/menu/secondary-menu/secondary-menu.tsx
index a776abf0..daf53c68 100644
--- a/shared/features/navigation/menu/secondary-menu/secondary-menu.tsx
+++ b/shared/features/navigation/menu/secondary-menu/secondary-menu.tsx
@@ -1,23 +1,30 @@
-import { SecondaryMenuProps } from "shared/features/navigation/menu/secondary-menu/secondary-menu.types";
-
import { ItemNav } from "@/design-system/molecules/item-nav";
+import { FeedbackDrawer } from "@/shared/features/feedback-drawer/feedback-drawer";
+import { useFeedbackDrawerState } from "@/shared/features/feedback-drawer/feedback-drawer.hooks";
+
+import { SecondaryMenuProps } from "./secondary-menu.types";
+
export function SecondaryMenu({ isFolded }: SecondaryMenuProps) {
+ const feedbackDrawerState = useFeedbackDrawerState();
+ const [, setIsOpen] = feedbackDrawerState;
return (
<>
setIsOpen(true)}
/>
+
>
);
}
diff --git a/shared/features/navigation/menu/user-menu/user-menu.tsx b/shared/features/navigation/menu/user-menu/user-menu.tsx
index a23df563..51fe9644 100644
--- a/shared/features/navigation/menu/user-menu/user-menu.tsx
+++ b/shared/features/navigation/menu/user-menu/user-menu.tsx
@@ -1,5 +1,3 @@
-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";
@@ -10,6 +8,8 @@ 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;