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
-