немного аккаунта

src/main.jsx

 import './view/page/login/Login.jsx';
 import './view/page/account/WelcomePage.jsx';
+import './view/page/account/Account.jsx';
 import './view/page/tmp/Fields.jsx';
 
 import './view/cmp/switch/Switch.jsx';
@@ -14,7 +15,8 @@ export default function() {
     {Switch({cls: 'page-content__inner', key: 'navigation.current'}, {
       login: new view.page.Login(),
       welcome: new view.page.WelcomePage(),
-      fields: new view.page.tmp.Fields()
+      fields: new view.page.tmp.Fields(),
+      account: new view.page.Account()
     })}
   </div>;
 };

src/view/block/header/Header.jsx

@@ -14,7 +14,7 @@ export default D.declare('view.block.Header', () => {
             {
                 [
                     'login',
-                    'welcome','fields'
+                    'welcome','fields', 'account'
                 ].map(name=>
                     <button type={'button'} onClick={() => store.set('navigation.current', name)}>{name}</button>
                 )

src/view/page/account/Account.jsx

+import './accountPage.scss';
+import User from "/svg/user.svg";
+
+export default D.declare('view.page.Account', () => {
+    return <div class="account-page">
+        <div class="account-page__wrapper">
+            <div class="account-page__menu">
+                <div class="account">
+                    <h2 class="account__headline">Личный кабинет</h2>
+                    <div class="account__info">
+                        <h3 class="account__name">
+                            <User width="32" height="32" />
+                            <span>Иванов Иван</span>
+                        </h3>
+                        <p>Химки-2</p>
+                        <p>Кассир</p>
+                    </div>
+                </div>
+            </div>
+            <div class="account-page__content">
+
+            </div>
+        </div>
+    </div>
+})

src/view/page/account/accountPage.scss

+.account-page {
+	@include pageInner;
+	display: flex;
+	flex-direction: column;
+	padding: 0;
+	background-color: $bg-accent;
+}
+
+.account-page__wrapper {
+	display: flex;
+	flex-grow: 1;
+}
+
+.account-page__menu {
+	box-sizing: border-box;
+	padding: 23px 20px 50px 50px;
+	width: 320px;
+	background-color: $bg-main;
+}
+
+.account-page__content {
+	flex-grow: 1;
+	max-width: calc(100% - 320px);
+}
+
+.account__headline {
+	margin: 0 0 14px;
+	font-weight: 500;
+	font-size: 17px;
+	line-height: 22px;
+	color: $gray-medium;
+}
+
+.account__info {
+	@include mainCaption;
+	padding-bottom: 10px;
+	border-bottom: 1px solid #747474;
+}
+
+.account__info p {
+	margin: 0;
+}
+
+.account__name {
+	position: relative;
+	margin: 0 0 8px;
+	font-weight: 700;
+	font-size: 24px;
+	line-height: 32px;
+	color: $text-main;
+}
+
+.account__name svg {
+	position: absolute;
+	top: 0;
+	right: 100%;
+	transform: translate(-18px, 0);
+	color: $accent-main;
+}

src/view/page/tmp/Fields.jsx

@@ -18,7 +18,7 @@ export default D.declare('view.page.tmp.Fields', () => {
 
     <div>
         <h3>Phone input</h3>
-      <div style={{display: 'flex'}}>
+      <div style={{display: 'flex', 'flex-wrap': 'wrap'}}>
         <div>
           <h5>Empty</h5>