Refactor Layout (#322)

* Refactor Layout

* Fix storybook

* Fixing tests by forcing msw version before regression

front/src/modules/ui/layout/navbar/NavItemsContainer.tsx

@@ -8,6 +8,7 @@ const StyledNavItemsContainer = styled.div`
   display: flex;
   flex-direction: column;
   margin-top: 40px;
+  min-width: 220px;
 `;
 
 function NavItemsContainer({ children }: OwnProps) {

front/src/modules/ui/layout/navbar/NavbarContainer.tsx

@@ -4,10 +4,9 @@ import { useRecoilValue } from 'recoil';
 import { isNavbarOpenedState } from '../states/isNavbarOpenedState';
 import { MOBILE_VIEWPORT } from '../styles/themes';
 
-const StyledNavbarContainer = styled.div<{ width: string }>`
+const StyledNavbarContainer = styled.div`
   flex-direction: column;
-  width: ${(props) =>
-    useRecoilValue(isNavbarOpenedState) ? props.width : '0'};
+  width: ${(props) => (useRecoilValue(isNavbarOpenedState) ? 'auto' : '0')};
   padding: ${(props) => props.theme.spacing(2)};
   flex-shrink: 0;
   overflow: hidden;
@@ -19,18 +18,6 @@ const StyledNavbarContainer = styled.div<{ width: string }>`
         : '0'};
 `;
 
-const NavbarSubContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  margin-left: auto;
-  margin-top: 41px;
-  width: 160px;
-
-  @media (max-width: ${MOBILE_VIEWPORT}px) {
-    width: 100%;
-  }
-`;
-
 const NavbarContent = styled.div`
   display: ${() => (useRecoilValue(isNavbarOpenedState) ? 'block' : 'none')};
 `;
@@ -44,18 +31,8 @@ export const NavbarContainer: React.FC<NavbarProps> = ({
   children,
   layout,
 }) => {
-  if (layout === 'secondary') {
-    return (
-      <StyledNavbarContainer width="500px">
-        <NavbarSubContainer>
-          <NavbarContent>{children}</NavbarContent>
-        </NavbarSubContainer>
-      </StyledNavbarContainer>
-    );
-  }
-
   return (
-    <StyledNavbarContainer width="220px">
+    <StyledNavbarContainer>
       <NavbarContent>{children}</NavbarContent>
     </StyledNavbarContainer>
   );

front/src/modules/ui/layout/navbar/sub-navbar/NavBackButton.tsx

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 
 import { IconChevronLeft } from '@/ui/icons/index';
 
-import NavCollapseButton from './NavCollapseButton';
+import NavCollapseButton from '../NavCollapseButton';
 
 type OwnProps = {
   title: string;

front/src/modules/ui/layout/navbar/sub-navbar/SubNavBarContainer.tsx

@@ -0,0 +1,32 @@
+import styled from '@emotion/styled';
+
+import NavBackButton from './NavBackButton';
+
+type OwnProps = {
+  children: JSX.Element;
+  backButtonTitle: string;
+};
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding-left: 300px;
+  padding-top: ${(props) => props.theme.spacing(6)};
+`;
+
+const StyledNavItemsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export default function SubNavbarContainer({
+  children,
+  backButtonTitle,
+}: OwnProps) {
+  return (
+    <StyledContainer>
+      <NavBackButton title={backButtonTitle} />
+      <StyledNavItemsContainer>{children}</StyledNavItemsContainer>
+    </StyledContainer>
+  );
+}