fix(containers): fix SidebarSemanticPusherStyled max-width from SSR

Metnew · Nov 10, 2017 · b2e136b · b2e136b
1 parent 8df5ff4
commit b2e136b
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 14 deletions.
diff --git a/src/common/containers/App/index.jsx b/src/common/containers/App/index.jsx
@@ -46,7 +46,7 @@ type Props = {
 	checkAuthLogic: Function,
 	toggleSidebar: Function,
 	// IsMobile can force component to re-render
-	isMobile: string,
+	isMobile: boolean,
 	isMobileXS: boolean,
 	isMobileSM: boolean
 }
@@ -147,22 +147,14 @@ class App extends Component {
 			//  page: true,
 			onClick: closeSidebar
 		}
-
-		// {/* XXX: There is an issue with props and styled-components, so we use .extend and re-render the component when isMobile/isLoggedIn change triggered. Using `style` attribute isn't a good solution.
-		//   Please, check: https://github.com/styled-components/styled-components/issues/439 */}
-		//   {/* <SidebarSemanticPusherStyled style={SidebarSemanticPusherStyleProps}> */}
-		const SidebarSemanticPusherStyledPatch =
-			!isMobile && isLoggedIn
-				? SidebarSemanticPusherStyled.extend`
-						max-width: calc(100% - 150px);
-					`
-				: SidebarSemanticPusherStyled
+		// XXX: There is an issue with props and styled-components, so we use custom attributes and handle them inside styled component
+		/** {@link: https://github.com/styled-components/styled-components/issues/439} */
 
 		return (
 			<PageLayout>
 				<SidebarSemanticPushableStyled>
 					{isLoggedIn && <Sidebar {...sidebarProps} />}
-					<SidebarSemanticPusherStyledPatch>
+					<SidebarSemanticPusherStyled isloggedin={isLoggedIn ? 'y' : ''} ismobile={isMobile ? 'y' : ''}>
 						<StyledDimmer {...dimmerProps} />
 						<Header {...headerProps} />
 						<MainLayout>
@@ -173,7 +165,7 @@ class App extends Component {
 								<Footer />
 							</MainContent>
 						</MainLayout>
-					</SidebarSemanticPusherStyledPatch>
+					</SidebarSemanticPusherStyled>
 				</SidebarSemanticPushableStyled>
 			</PageLayout>
 		)

diff --git a/src/common/containers/App/style.jsx b/src/common/containers/App/style.jsx
@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import styled, {css} from 'styled-components'
 import {Dimmer, Sidebar, Container} from 'semantic-ui-react'
 
 export const PageLayout = styled.div`height: 100%;`
@@ -18,6 +18,7 @@ export const MainContent = styled.main`
 
 export const SidebarSemanticPusherStyled = styled(Sidebar.Pusher)`
 	-webkit-overflow-scrolling: touch;
+	${({isloggedin, ismobile}) => isloggedin && !ismobile && css`max-width: calc(100% - 150px);`}}
 `
 
 export const SidebarSemanticPushableStyled = styled(Sidebar.Pushable)`