[#1004] React 対応

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";

packages/wiz-ui-react/src/components/base/navigation/components/navigation-container.tsx

@@ -9,25 +9,25 @@ import { CSSProperties, FC, ReactNode } from "react";
 interface Props {
   isOpen: boolean;
   width?: string;
-  sticky?: boolean;
+  fixed?: boolean;
   children: ReactNode;
   footer?: ReactNode;
 }
 
 const NavigationContainer: FC<Props> = ({
   isOpen,
   width,
-  sticky = false,
+  fixed = false,
   children,
   footer,
 }) => {
   const widthStyle =
     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<Props> = ({
   return (
     <div
       className={navigationContainerStyle}
-      style={{ ...stickyStyle, width: widthStyle }}
+      style={{ ...fixedStyle, width: widthStyle }}
     >
       <div className={navigationContainerItemsStyle}>{children}</div>
       {isOpen && footer && (

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<Props> = ({ isOpen, children }) => {
+  const marginLeftStyle = isOpen ? "181px" : "61px";
+
+  return (
+    <div
+      className={navigationContentStyle}
+      style={{ marginLeft: marginLeftStyle }}
+    >
+      {children}
+    </div>
+  );
+};
+NavigationContent.displayName = ComponentName.NavigationContent;
+
+export const WizNavigationContent = NavigationContent;