better editor layout

src/components/containers/Panel/index.tsx

@@ -4,15 +4,17 @@ import classNames = require("classnames");
 
 type IProps = HTMLAttributes<HTMLDivElement> & {
   seamless?: boolean;
+  stretchy?: boolean
 }
 
 const Panel: FC<IProps> = ({
   className,
   children,
   seamless,
+  stretchy,
   ...props
 }) => (
-    <div className={classNames(styles.panel, className, { seamless })} {...props}>
+    <div className={classNames(styles.panel, className, { seamless, stretchy })} {...props}>
       {children}
     </div>
 );

src/components/containers/Panel/styles.scss

@@ -10,4 +10,5 @@
   @include outer_shadow();
 
   &:global(.seamless) { padding: 0; }
+  &:global(.stretchy) { flex: 1; align-items: flex-start; }
 }

src/components/main/Header/index.tsx

@@ -1,40 +1,45 @@
 import * as React from 'react';
 import { Logo } from "~/components/main/Logo";
 import { connect } from 'react-redux';
-import { IUserProfile, IUserState } from "~/redux/user/reducer";
+import { IUserState } from "~/redux/user/reducer";
+import { push as historyPush } from 'connected-react-router';
 
 import * as style from './style.scss';
 import {Filler} from "~/components/containers/Filler";
 import {Group} from "~/components/containers/Group";
-
-interface IHeaderProps {
-  username?: IUserProfile['username'],
-  is_user?: IUserProfile['is_user'],
-}
-
-export const Component: React.FunctionComponent<IHeaderProps> = ({ username, is_user }) => (
-  <div className="default_container head_container">
-    <div className={style.container}>
-      <Logo />
-
-      <Filler />
-
-      <div className={style.plugs}>
-        <div>depth</div>
-        <div>boris</div>
-        <div>flow</div>
-      </div>
-
-      <Filler />
-
-      <Group horizontal className={style.user_button}>
-        <div>username</div>
-        <div className={style.user_avatar} />
-      </Group>
-    </div>
-  </div>
-);
+import { Link } from 'react-router-dom';
 
 const mapStateToProps = ({ user: { profile: { username, is_user } } }: { user: IUserState }) => ({ username, is_user });
+const mapDispatchToProps = {
+  push: historyPush,
+};
 
-export const Header = connect(mapStateToProps)(Component);
+type IHeaderProps = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
+
+export const Component: React.FunctionComponent<IHeaderProps> = ({ username, is_user }) => {
+  return (
+    <div className="default_container head_container">
+      <div className={style.container}>
+        <Logo/>
+
+        <Filler/>
+
+        <div className={style.plugs}>
+          <Link to="/">flow</Link>
+          <Link to="/examples/image">image</Link>
+          <Link to="/examples/edit">editor</Link>
+          <Link to="/examples/horizontal">horizontal</Link>
+        </div>
+
+        <Filler/>
+
+        <Group horizontal className={style.user_button}>
+          <div>username</div>
+          <div className={style.user_avatar}/>
+        </Group>
+      </div>
+    </div>
+  );
+};
+
+export const Header = connect(mapStateToProps, mapDispatchToProps)(Component);

src/components/main/Header/style.scss

@@ -17,13 +17,15 @@
   font: $font_16_medium;
   text-transform: uppercase;
 
-  > div {
+  > a {
     display: flex;
     align-items: center;
     position: relative;
     padding: $gap;
     cursor: pointer;
     transition: color 0.25s;
+    text-decoration: none;
+    color: white;
 
     &:hover {
       color: $red;
@@ -65,6 +67,7 @@
   font: $font_16_medium;
   text-transform: uppercase;
   flex: 0 !important;
+  opacity: 0.3;
 }
 
 .user_avatar {