Create switch content width button component

https://youtrack.weseek.co.jp/issue/GW-7826
- Create button component for content width switching
- Implement SwitchContentWidthButton in SubNavButtons component

packages/app/src/components/Navbar/SubNavButtons.tsx

@@ -16,6 +16,7 @@ import {
 } from '../Common/Dropdown/PageItemControl';
 import LikeButtons from '../LikeButtons';
 import SubscribeButton from '../SubscribeButton';
+import SwitchContentWidthButton from '../SwitchContentWidthButton';
 import SeenUserInfo from '../User/SeenUserInfo';
 
 
@@ -144,9 +145,12 @@ const SubNavButtonsSubstance = (props: SubNavButtonsSubstanceProps): JSX.Element
     return <></>;
   }
 
+  const switchContentWidthHandler = () => {
+    // TODO Implement switch content width
+  };
 
   const {
-    sumOfLikers, sumOfSeenUsers, isLiked, bookmarkCount, isBookmarked,
+    sumOfLikers, sumOfSeenUsers, isLiked, bookmarkCount, isBookmarked, isContainerFluid,
   } = pageInfo;
 
   const forceHideMenuItemsWithBookmark = forceHideMenuItems ?? [];
@@ -154,6 +158,12 @@ const SubNavButtonsSubstance = (props: SubNavButtonsSubstanceProps): JSX.Element
 
   return (
     <div className="d-flex" style={{ gap: '2px' }}>
+      <SwitchContentWidthButton
+        isContainerFluid={isContainerFluid}
+        onSwitchContentWidthClicked={switchContentWidthHandler}
+      >
+
+      </SwitchContentWidthButton>
       <span>
         <SubscribeButton
           status={pageInfo.subscriptionStatus}

packages/app/src/components/SwitchContentWidthButton.tsx

@@ -0,0 +1,50 @@
+import React, { FC } from 'react';
+
+import { useTranslation } from 'react-i18next';
+import { UncontrolledTooltip } from 'reactstrap';
+
+
+interface Props {
+  isContainerFluid?: boolean,
+  onSwitchContentWidthClicked: () => void;
+}
+
+const SwitchContentWidthButton: FC<Props> = (props: Props) => {
+  const { t } = useTranslation();
+  const { isContainerFluid, onSwitchContentWidthClicked } = props;
+
+
+  const handleClick = async() => {
+    if (onSwitchContentWidthClicked != null) {
+      onSwitchContentWidthClicked();
+    }
+  };
+  return (
+    <div className="btn-group" role="group" aria-label="Switch content width">
+      <button
+        type="button"
+        id="default-container-button"
+        onClick={handleClick}
+        className={`btn btn-switch-content-width border-1 ${!isContainerFluid ? 'active' : ''}`}
+      >
+        Default
+      </button>
+      <UncontrolledTooltip placement="top" target="default-container-button" fade={false}>
+        Default container width
+      </UncontrolledTooltip>
+      <button
+        type="button"
+        id="fluid-container-button"
+        onClick={handleClick}
+        className={`btn btn-switch-content-width border-1 ${isContainerFluid ? 'active' : ''}`}
+      >
+        Full Width
+      </button>
+      <UncontrolledTooltip placement="top" target="fluid-container-button" fade={false}>
+        Fluid container width
+      </UncontrolledTooltip>
+    </div>
+  );
+};
+
+export default SwitchContentWidthButton;