diff --git a/packages/wiz-ui-react/src/components/base/navigation/components/index.ts b/packages/wiz-ui-react/src/components/base/navigation/components/index.ts index 5f46689f1..f4c7a8f06 100644 --- a/packages/wiz-ui-react/src/components/base/navigation/components/index.ts +++ b/packages/wiz-ui-react/src/components/base/navigation/components/index.ts @@ -1,2 +1,3 @@ export { WizNavigationItem } from "./navigation-item"; export { WizNavigationContainer } from "./navigation-container"; +export {} from "./navigation-content"; diff --git a/packages/wiz-ui-react/src/components/base/navigation/components/navigation-container.tsx b/packages/wiz-ui-react/src/components/base/navigation/components/navigation-container.tsx index 98047c290..d5ba49649 100644 --- a/packages/wiz-ui-react/src/components/base/navigation/components/navigation-container.tsx +++ b/packages/wiz-ui-react/src/components/base/navigation/components/navigation-container.tsx @@ -9,7 +9,7 @@ import { CSSProperties, FC, ReactNode } from "react"; interface Props { isOpen: boolean; width?: string; - sticky?: boolean; + fixed?: boolean; children: ReactNode; footer?: ReactNode; } @@ -17,7 +17,7 @@ interface Props { const NavigationContainer: FC = ({ isOpen, width, - sticky = false, + fixed = false, children, footer, }) => { @@ -25,9 +25,9 @@ const NavigationContainer: FC = ({ width ?? (isOpen ? "180px" : `calc(${THEME.spacing.xl} * 2 + ${THEME.spacing.sm})`); - const stickyStyle: CSSProperties = sticky + const fixedStyle: CSSProperties = fixed ? { - position: "sticky", + position: "fixed", top: `calc(${THEME.share.HEADER_HEIGHT} + 1px)`, left: 0, borderRight: `1px solid ${THEME.color.gray[400]}`, @@ -38,7 +38,7 @@ const NavigationContainer: FC = ({ return (
{children}
{isOpen && footer && ( diff --git a/packages/wiz-ui-react/src/components/base/navigation/components/navigation-content.tsx b/packages/wiz-ui-react/src/components/base/navigation/components/navigation-content.tsx new file mode 100644 index 000000000..232f40bc7 --- /dev/null +++ b/packages/wiz-ui-react/src/components/base/navigation/components/navigation-content.tsx @@ -0,0 +1,27 @@ +import { ComponentName } from "@wizleap-inc/wiz-ui-constants"; +import { navigationContentStyle } from "@wizleap-inc/wiz-ui-styles/bases/navigation.css"; +import { FC, ReactNode } from "react"; + +interface Props { + isOpen: boolean; + width?: string; + sticky?: boolean; + children: ReactNode; + footer?: ReactNode; +} + +const NavigationContent: FC = ({ isOpen, children }) => { + const marginLeftStyle = isOpen ? "181px" : "61px"; + + return ( +
+ {children} +
+ ); +}; +NavigationContent.displayName = ComponentName.NavigationContent; + +export const WizNavigationContent = NavigationContent;