add MaxWidth to topbar nav

stargately · Feb 18, 2021 · a99e583 · a99e583
1 parent 9529c73
commit a99e583
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 22 deletions.
diff --git a/src/shared/common/styles/style-padding.tsx b/src/shared/common/styles/style-padding.tsx
@@ -20,6 +20,8 @@ export const contentPadding = {
   },
 };
 
+export const maxContentWidth = { maxWidth: "1320px", width: "100%" };
+
 export const topBottomContentPadding = {
   paddingTop: "12px",
   paddingBottom: "12px",
@@ -37,7 +39,7 @@ export function ContentPadding({
   return (
     <Pd style={style as CSSProperties}>
       <Flex center width="100%">
-        <div style={{ maxWidth: "1320px", width: "100%" }}>{children}</div>
+        <div style={maxContentWidth}>{children}</div>
       </Flex>
     </Pd>
   );

diff --git a/src/shared/common/top-bar.tsx b/src/shared/common/top-bar.tsx
@@ -10,7 +10,7 @@ import { Hamburger } from "./icons/hamburger.svg";
 import { transition } from "./styles/style-animation";
 import { colors } from "./styles/style-color";
 import { media, PALM_WIDTH } from "./styles/style-media";
-import { contentPadding } from "./styles/style-padding";
+import { contentPadding, maxContentWidth } from "./styles/style-padding";
 
 export const TOP_BAR_HEIGHT = 52;
 
@@ -55,37 +55,47 @@ export const TopBar = (): JSX.Element => {
   return (
     <div>
       <Bar>
-        <Flex>
-          <Logo />
-          <CommonMargin />
-          <BrandText href="/">{t("topbar.brand")}</BrandText>
-        </Flex>
-        <Flex>
-          <Menu>{renderMenu()}</Menu>
-        </Flex>
-        <HamburgerBtn
-          displayMobileMenu={displayMobileMenu}
-          onClick={() => {
-            setDisplayMobileMenu(true);
-          }}
-        >
-          <Hamburger />
-        </HamburgerBtn>
-        <CrossBtn displayMobileMenu={displayMobileMenu}>
-          <Cross />
-        </CrossBtn>
+        <MaxWidth>
+          <Flex>
+            <Logo />
+            <CommonMargin />
+            <BrandText href="/">{t("topbar.brand")}</BrandText>
+          </Flex>
+          <Flex>
+            <Menu>{renderMenu()}</Menu>
+          </Flex>
+          <HamburgerBtn
+            displayMobileMenu={displayMobileMenu}
+            onClick={() => {
+              setDisplayMobileMenu(true);
+            }}
+          >
+            <Hamburger />
+          </HamburgerBtn>
+          <CrossBtn displayMobileMenu={displayMobileMenu}>
+            <Cross />
+          </CrossBtn>
+        </MaxWidth>
       </Bar>
       <BarPlaceholder />
       {renderMobileMenu()}
     </div>
   );
 };
 
-const Bar = styled("nav", ({ $theme }) => ({
+const MaxWidth = styled("div", () => ({
   display: "flex",
   flexDirection: "row",
+  ...maxContentWidth,
   justifyContent: "space-between",
   alignItems: "center",
+}));
+
+const Bar = styled("nav", ({ $theme }) => ({
+  display: "flex",
+  flexDirection: "row",
+  justifyContent: "center",
+  alignItems: "center",
   lineHeight: `${TOP_BAR_HEIGHT}px`,
   height: `${TOP_BAR_HEIGHT}px`,
   backgroundColor: $theme.colors.nav01,