diff --git a/apps/web/package.json b/apps/web/package.json index 0e98d00b798..69f0a06a0e9 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -137,8 +137,8 @@ "@faker-js/faker": "^6.0.0", "@novu/dal": "workspace:*", "@novu/testing": "workspace:*", - "@pandacss/dev": "^0.38.0", - "@pandacss/studio": "^0.38.0", + "@pandacss/dev": "^0.40.1", + "@pandacss/studio": "^0.40.1", "@playwright/test": "^1.44.0", "@storybook/addon-actions": "^7.4.2", "@storybook/addon-essentials": "^7.4.2", diff --git a/apps/web/src/AppRoutes.tsx b/apps/web/src/AppRoutes.tsx index 0d566dbf411..df54cd9d4c9 100644 --- a/apps/web/src/AppRoutes.tsx +++ b/apps/web/src/AppRoutes.tsx @@ -138,6 +138,10 @@ export const AppRoutes = () => { {isInformationArchitectureEnabled && ( } /> )} + + } /> + } /> + } /> } /> diff --git a/apps/web/src/components/nav/MainNav.tsx b/apps/web/src/components/nav/MainNav.tsx index 627678b796f..50b7a70bd87 100644 --- a/apps/web/src/components/nav/MainNav.tsx +++ b/apps/web/src/components/nav/MainNav.tsx @@ -1,9 +1,15 @@ import { ROUTES } from '@novu/shared-web'; import { FC } from 'react'; +import { LocalNavMenu } from '../../studio/components/LocalNavMenu'; import { RootNavMenu } from './RootNavMenu'; import { SettingsNavMenu } from './SettingsNavMenu'; import { SidebarNav } from './SidebarNav'; export const MainNav: FC = () => { - return } routeMenus={{ [ROUTES.SETTINGS]: }} />; + return ( + } + routeMenus={{ [ROUTES.SETTINGS]: , [ROUTES.STUDIO]: }} + /> + ); }; diff --git a/apps/web/src/components/nav/NavMenuButton/NavMenuButton.shared.ts b/apps/web/src/components/nav/NavMenuButton/NavMenuButton.shared.ts index 0dfac7ebaad..f1811b159aa 100644 --- a/apps/web/src/components/nav/NavMenuButton/NavMenuButton.shared.ts +++ b/apps/web/src/components/nav/NavMenuButton/NavMenuButton.shared.ts @@ -2,8 +2,7 @@ import { IIconProps } from '@novu/design-system'; import { LocalizedMessage } from '@novu/shared-web'; import { ReactNode } from 'react'; import { css } from '@novu/novui/css'; -import { styled } from '@novu/novui/jsx'; -import { text } from '@novu/novui/recipes'; +import { CoreProps } from '@novu/novui'; export type RightSideTrigger = 'hover'; @@ -12,7 +11,7 @@ export interface INavMenuButtonRightSideConfig { tooltip?: LocalizedMessage; triggerOn?: RightSideTrigger; } -export interface INavMenuButtonProps { +export interface INavMenuButtonProps extends CoreProps { icon: React.ReactElement; label: LocalizedMessage; rightSide?: INavMenuButtonRightSideConfig; diff --git a/apps/web/src/components/nav/NavMenuButton/NavMenuLinkButton.tsx b/apps/web/src/components/nav/NavMenuButton/NavMenuLinkButton.tsx index dde30a8e004..70599044299 100644 --- a/apps/web/src/components/nav/NavMenuButton/NavMenuLinkButton.tsx +++ b/apps/web/src/components/nav/NavMenuButton/NavMenuLinkButton.tsx @@ -1,6 +1,6 @@ import { FC, PropsWithChildren, useState } from 'react'; import { NavLink } from 'react-router-dom'; -import { css } from '@novu/novui/css'; +import { css, cx } from '@novu/novui/css'; import { HStack } from '@novu/novui/jsx'; import { INavMenuButtonProps, rawButtonBaseStyles } from './NavMenuButton.shared'; import { NavMenuRightSide } from './NavMenuButtonRightSide'; @@ -33,6 +33,7 @@ export const NavMenuLinkButton: FC> = link, label, isVisible = true, + className, }) => { const [isHovered, setIsHovered] = useState(false); @@ -42,7 +43,7 @@ export const NavMenuLinkButton: FC> = return isVisible ? ( setIsHovered(true)} diff --git a/apps/web/src/components/nav/NavMenuButton/NavMenuToggleButton.tsx b/apps/web/src/components/nav/NavMenuButton/NavMenuToggleButton.tsx index 77f2e1a4cf4..7fb604b6efb 100644 --- a/apps/web/src/components/nav/NavMenuButton/NavMenuToggleButton.tsx +++ b/apps/web/src/components/nav/NavMenuButton/NavMenuToggleButton.tsx @@ -1,6 +1,6 @@ import { IconArrowDropUp, IconArrowDropDown } from '@novu/design-system'; import { FC, PropsWithChildren, useState } from 'react'; -import { css } from '@novu/novui/css'; +import { css, cx } from '@novu/novui/css'; import { Flex, HStack } from '@novu/novui/jsx'; import { INavMenuButtonProps, rawButtonBaseStyles } from './NavMenuButton.shared'; @@ -11,6 +11,7 @@ export const NavMenuToggleButton: FC { const [isOpen, setIsOpen] = useState(false); @@ -20,7 +21,7 @@ export const NavMenuToggleButton: FC -