From 4c92d0821ec26b58d0816b9e6716df269c5231ba Mon Sep 17 00:00:00 2001
From: cha0s <git@cha0s.io>
Date: Mon, 12 Jul 2021 14:04:43 -0500
Subject: [PATCH] refactor: ui

---
 packages/core/src/components/persea/index.jsx |  26 ++---
 .../core/src/components/persea/index.scss     |  49 ++-------
 .../src/components/project/bottom/index.jsx   |  34 ++++++
 .../project/bottom/index.module.scss          |  46 ++++++++
 .../src/components/project/bottom/map.png     | Bin 0 -> 5617 bytes
 .../components/project/bottom/settings.svg    |   1 +
 .../core/src/components/project/index.jsx     |  78 ++++++++------
 .../core/src/components/project/index.scss    |  14 ---
 .../src/components/project/route/index.jsx    |   5 +-
 .../src/components/project/sidebar/index.scss |  98 ------------------
 10 files changed, 152 insertions(+), 199 deletions(-)
 create mode 100644 packages/core/src/components/project/bottom/index.jsx
 create mode 100644 packages/core/src/components/project/bottom/index.module.scss
 create mode 100644 packages/core/src/components/project/bottom/map.png
 create mode 100644 packages/core/src/components/project/bottom/settings.svg
 delete mode 100644 packages/core/src/components/project/index.scss
 delete mode 100644 packages/core/src/components/project/sidebar/index.scss

diff --git a/packages/core/src/components/persea/index.jsx b/packages/core/src/components/persea/index.jsx
index c7a1f7d..4e70bb5 100644
--- a/packages/core/src/components/persea/index.jsx
+++ b/packages/core/src/components/persea/index.jsx
@@ -19,19 +19,21 @@ import history from './history';
 const Persea = React.memo(() => {
   const isLoggedIn = useSelector(userIdSelector);
   return (
-    <ConnectedRouter history={history}>
-      <Switch>
-        <Route path="/login">
-          {isLoggedIn ? <Redirect to="/" /> : Login}
+    <div className="persea">
+      <ConnectedRouter history={history}>
+        <Switch>
+          <Route path="/login">
+            {isLoggedIn ? <Redirect to="/" /> : Login}
+          </Route>
+          <Route path="/dashboard" component={Dashboard} />
+          <Route path="/project/:uuid:uri(/*)?" component={ProjectRoute} />
+        </Switch>
+        <Route exact path="/">
+          <Redirect to="/dashboard" />
         </Route>
-        <Route path="/dashboard" component={Dashboard} />
-        <Route path="/project/:uuid" component={ProjectRoute} />
-      </Switch>
-      <Route exact path="/">
-        <Redirect to="/dashboard" />
-      </Route>
-      {!isLoggedIn && <Redirect to="/login" />}
-    </ConnectedRouter>
+        {!isLoggedIn && <Redirect to="/login" />}
+      </ConnectedRouter>
+    </div>
   );
 });
 
diff --git a/packages/core/src/components/persea/index.scss b/packages/core/src/components/persea/index.scss
index 0a506c9..83f926b 100644
--- a/packages/core/src/components/persea/index.scss
+++ b/packages/core/src/components/persea/index.scss
@@ -111,11 +111,6 @@ label, .label {
   min-height: 3em;
   padding: 1em;
   user-select: none;
-  // @media(min-width: 20em) {
-  //   align-items: center;
-  //   flex-direction: row;
-  //   justify-content: space-between;
-  // }
   &:nth-of-type(2n+1) {
     background-color: rgba(0, 0, 0, 0.15);
   }
@@ -178,38 +173,6 @@ textarea {
   resize: none;
 }
 
-.grow-wrap {
-  /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
-  display: grid;
-}
-.grow-wrap::after {
-  /* Note the weird space! Needed to preventy jumpy behavior */
-  content: attr(data-replicated-value) " ";
-
-  /* This is how textarea text behaves */
-  white-space: pre-wrap;
-
-  /* Hidden from view, clicks, and screen readers */
-  visibility: hidden;
-}
-.grow-wrap > textarea {
-  /* You could leave this, but after a user resizes, then it ruins the auto sizing */
-  resize: none;
-
-  /* Firefox shows scrollbar on growth, you can hide like this. */
-  overflow: hidden;
-}
-.grow-wrap > textarea,
-.grow-wrap::after {
-  /* Identical styling required!! */
-  border: 1px solid black;
-  padding: 0.5rem;
-  font: inherit;
-
-  /* Place on top of each other */
-  grid-area: 1 / 1 / 2 / 2;
-}
-
 fieldset {
   background-color: #151515;
 	border: 1px solid rgba(255, 255, 255, 0.1);
@@ -233,6 +196,11 @@ button, .button {
   &:hover {
     background-color: rgba(255, 255, 255, 0.05);
   }
+  .active {
+    box-shadow: 0px 0px 5px #00e1ff inset;
+    background-color: #006370;
+    border: 2px solid #006370;
+  }
 }
 
 button, input[type="checkbox"], input[type="checkbox"] + label {
@@ -289,8 +257,7 @@ img {
   image-rendering: pixelated;
 }
 
-button.active {
-  box-shadow: 0px 0px 5px #00e1ff inset;
-  background-color: #006370;
-  border: 2px solid #006370;
+.persea {
+  height: 100vh;
+  width: 100vw;
 }
diff --git a/packages/core/src/components/project/bottom/index.jsx b/packages/core/src/components/project/bottom/index.jsx
new file mode 100644
index 0000000..f43533e
--- /dev/null
+++ b/packages/core/src/components/project/bottom/index.jsx
@@ -0,0 +1,34 @@
+import {
+  classnames,
+  hot,
+  React,
+} from '@latus/react';
+
+import {locals} from './index.module.scss';
+
+function Bottom() {
+  const buttons = [
+    <button className={classnames(locals.organization)} type="button">
+      <svg height="512pt" viewBox="0 0 512 512" width="512pt" xmlns="http://www.w3.org/2000/svg">
+        <path d="m512 312v-160h-230v62h-152v-54h100v-160h-230v160h90v294h192v58h230v-160h-230v62h-152v-160h152v58zm-472-272h150v80h-150zm282 352h150v80h-150zm0-200h150v80h-150zm0 0" />
+      </svg>
+    </button>,
+    // eslint-disable-next-line jsx-a11y/control-has-associated-label
+    <button className={classnames(locals.resource, 'active')} type="button" />,
+  ];
+  return (
+    <div className={locals.bottom}>
+      <div className={locals.buttons}>
+        {buttons}
+      </div>
+    </div>
+  );
+}
+
+Bottom.defaultProps = {};
+
+Bottom.displayName = 'Bottom';
+
+Bottom.propTypes = {};
+
+export default hot(module)(Bottom);
diff --git a/packages/core/src/components/project/bottom/index.module.scss b/packages/core/src/components/project/bottom/index.module.scss
new file mode 100644
index 0000000..a7241b1
--- /dev/null
+++ b/packages/core/src/components/project/bottom/index.module.scss
@@ -0,0 +1,46 @@
+.bottom {
+  height: 3rem;
+  width: 100%;
+}
+
+.buttons {
+  align-items: center;
+  display: flex;
+  height: 100%;
+  justify-content: space-around;
+
+  button {
+    background-color: transparent;
+    border: 2px transparent;
+    height: 2em;
+    padding: 0.5rem;
+    width: 2em;
+
+    &:focus, &:hover {
+      background-color: transparent;
+      box-shadow: none;
+    }
+
+    &:global(.active) {
+      border-bottom: 1px solid #009fb4;
+    }
+
+    svg {
+      fill: #999;
+      height: 100%;
+      width: 100%;
+    }
+  }
+}
+
+button.side {
+  padding: 0.35rem;
+}
+
+button.resource {
+  background-image: url('./map.png');
+  background-origin: content-box;
+  background-repeat: no-repeat;
+  background-size: cover;
+  padding: 0.25rem;
+}
diff --git a/packages/core/src/components/project/bottom/map.png b/packages/core/src/components/project/bottom/map.png
new file mode 100644
index 0000000000000000000000000000000000000000..1f2d25343497ca491c41b457a7a291edb46a82d1
GIT binary patch
literal 5617
zcmV<N6%Oi&P)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00001b5ch_0Itp)
z=>Px#24YJ`L;wH)0002_L%V+f000SaNLh0L01FcU01FcV0GgZ_00007bV*G`2iXh=
z4FWG{p6($4000?uMObu0Z*6U5Zgc=ca%Ew3Wn>_CX>@2HM@dakSAh-}000$CNkl<Z
zXx_z|d6->QmG*!84ENk~=Uca`a_iQdR4Vg8MiK~75TYP72#6gfQ3P!fQ0V>?96s6x
zyFWghXy}#)cv{g0LB)Y)P8bA}Fl0_DRjEo<>Q>!bx2o<u59jRfk8V_2{RBk&{qH=_
zS$nVdS$nO$_j<SB9UvZ$)7I98l#(xe>3Vf#=iHO_A3EZ)t%kmK?WzN}efvAHYd`ZT
zdHEGr*Wa+oPY>X2UG!_)cMIZAG2XRjhx^W3|KaYzeXm{S)#`W*4TsN1wBR1<?ry&)
zH#_{`6E6-Xgb)@$EH+6b($2eycT7M^$%-WluWc5oZ=JPqiHydl#A&ClW$(bC9G<}z
zx>Uo>t^vOpxofyEz2_qre|i7un>QEUu;2cZ$2j#vAAD0p|6&B<@i?Em@y4bDue|*D
z2YOk*x!1&Q^5c)R(P+S&-gY}#sM;>SU;Fu!`^Z-d(+(x@*h7!*_~F(IKE3}R|K--H
zH^w?TG{pS={&yS!^_>{qamO84wjEH)xld{hyE)+13HhDWGATTDkma;kvtW)=DAZ}2
z+g0su_WL!eCxkovXS{ys@cL}7ykXw_{-#7?>PV=$*#h|b*S^M6+qV7Xme9plT;VzX
z>dQat@yb)Xn<a+REtOnS?2k3rd_tITtC!{T0y5AR5d~Y9HHX6M6FDKXc@n8QnOrS3
z6c@X<zqI?FFMj3r?bm+hvgCg+5`Xq2zV_;?*6w)z$x9b?`sVFEGI?f~W;1E2oOw!b
zqf|4kZdb+_8Z5GKS&-#DA-d-G$YaxWVY+lOl`2jI<0+AS;HR%l55{tjH+us292h!y
z_>J-Z@heyJ`CGn2xg5td+unTw4?OfRpa0BN+WN(Fn@5I^$J^RF=;-KXbbM4=(!vlK
zQOjF&yEJ6A&Uq*I5M0v5-guQ2E9d4~-CkdpuS!0ZV%vedwKtltKDBe;$Q)Pm1J~TJ
z^}FYO_;cwu=DO+nPjlNh?|OF$6bqBMJ?-4~`A?t!;J-caqs5EXv24Y1rlw|4O_jD5
zl|8QvFg-Ja->4JT>U7O*W&hEv>|Z@ceCWg;d0@0GtYVr?t2-rLr;zS8o_={ZPjBC6
zWwXW)ouRg|?)I*K|JU#S`+$_v7UDN9UwQc@e;R?QsR0oVFOp|%SoyG3tzCHf86Rf(
z^5qmu1rpO!xJ(_Z(jZePGc<UJVm(L50h41RjHfbuXmcAc9ZGP~miZJaZszxxw1!%k
ztv2vCMcDW1e(rz#RYr~#S=>MWXW{nn|Cz{^6U&z@p8m!+?#v4z{xkvrcin!=>W6>u
z{nz^1dgPhsZWY~gyC{`PNL#_GHBf~h8jn(~)Tv|RHk_2QX}0ftp7wxBrdYsJD$wvt
z^lF_mPnw6O8MHQ=j3%;VtUR$e*fq(^hhvngjf~>(|3Gp2zW>a&7k0kmec->263#PD
zI$_Vm@z}z1K5zl2Y}$w~5G0dM)7;WRqgF=|f?}nNqN)f4@x&ClY!;ykn*B{AXJ?q6
znI#$@pqiV+tJJ8bv#goxrLCu(RK3oolNNDw?<kWcRVHSl;+K1J9Gb2VE?u(pbnTrG
zc;g(j<<t|e+PCjO--cBi<bnnBMLM6MT&qy6*Kn78NWkSX&@2^?+k-7_LX9AGtBT(j
z#37)$C4}4KrlqZgiRcKki6~OW*fE+z4iA%U)OqdDBxkPeVI(>uY(>Ye)aB9+V?p%T
z;g7$qjjU9PbL*{l0FaJlJ9fPK{Jn<e2wr;8<zm779^9S)Q!{a}6)Ke~rs=}ART7B=
zQrZY1Q4myWH4I&+Rw-fI62qyJOXe{RFHNBcPHzaD0S*rxMXA}83M$27o@WoHI6R&v
z<PV6I{XSwDmc6YAxLj?-CJ(BS_NCUL{ZD+ooKAPWcheU7`xoHyIH}Yc=!!v4Pbax-
zg@XqN*gyOfNimKrL9@FDm)3-)c<Jrx!fsfUiX|KlgR$cY6t#-(E|W+kDHT+l!MPk7
zI>O2hg=ErZJeHv-75dv7=$eqSnhCuv0^hs$+eF%zS`XZR+jU>N<sUBWZ0lvgyalpc
zD+s+Rh>lOv5$U9uEAq;|oxFT-J4NpZ3l}Ry;}+4W1V%%loL3nv8Td^F2{=@fMtc%Z
zK%fOn^yyBbBMPM<leNoy6ecAHCUeZ~^fHx%d`VKSTL@?UtyiI*W}UIwI#coEkxS0o
ze84HZO|79mKJZr`q~2&?H)<4%B}|v#*&RRNc=a$ny>5ECT`cMIqr3dPu;Vz<WR7|B
zy#$+!xZMGCMI&D<P?2Q}O+g5STD^{@s^s%EWW_<vs*p)IP_icbc9uvSudr%vD|zY3
zyyYCol<fb!n8Xi$YkYKiqXVzpdhsQqv$GSw*Td1Fqf93zcy!-=Oglz7`NS4_+k%|7
zemT<V!{gFf(B49K*v-1dOK>R;>b8Yq3uGPI{eD885COx3%W%`MZGt{OK9@#O6sd_C
zb+d{dsncu*m^xZVH-bM@-dgg;0QlnHezJeZ&V#2F^9|0q@UKN@PY0S)Cq6aH;K(7S
ztS4w~&2!4?2>p>ctXaJTVft`kVn`3ERDrIJc5;OzDk{D1PTHJvXjZ)lMPSvdU|Hxw
zK@~cxEl5{t=s0i)f#CvYKvJHurBC;;XyLNw-ckf=`5At-Yag;&yK*|7IREUk&*P*M
zH)0qDnN*&iKl2Eq>1{-orrEf<lM`1jM8k!lo1{}2?3zGYCVTdb($?umQ&e*KJYKVj
zYOPLls0qX2L=g%O%|TT_wwgf-iL@oA>clj3OrIcoOk;VyTjXjQ4M*tOKN^9Fkr%oB
z+uvjRQxA2HMJKO6Vbv<$ciO4abeoilHD2GjljEruh%C<2J3q+0-acw|n~GlLczPV$
zVUbePB&;kG)hvn09MaNp2!nV$iO223ZTfJkCQaT}!og0Ix<Z>Pf>AYbSUL(4r4EgT
zO>NLaN0ZKI#(HecnkBP;v<h|1I|V7FIA!Ar_tk3k@OwACkD$*dtcK0-v4d>e`Ev;8
za5>zxxWg2yMWnE>M4g6`q^eZO*0U5c4G!(kaOz2d;oLDs#*(-cAM^UUP!t<O_o3-3
zg?t`o!$i|ns*N($T9IN^Wu{mm8k3yW9+EHY&(w5J>kmHrg}*Pqr5yOwWfxqt|Mdf>
zpK{^`dVBli#Ka_1(_<W%`Y}fL2y53lIeBe20e6sGx`b2lGk4B>mUb>d)Kz@a#rpnb
zxP{K}&@>IbNUWSeH7%kOF(xNxQB?<q>7i7y2>DxZ8E%>aJ`^FDo-CqE54E8tS;Hk>
z8@3MZ+`02d0DqLgx9<E_-*elx-_YOP&c<~o%5*j@gz8{)VuZnC12oOC@cG>2$~lgW
z#_6BGl%T(z>TH!pR!7Zh`1}D5&kPY-QDrJsAYwM*c0sA0CE)WhJ~GX-&pylKcnr7c
zM04mg>>7#GG_er}eI0X{qj{OwmlOZ|NVIg%_wKtu2+;sgN~QSkb^O9}wjiZc@4M&j
zPr3}F`?9T<vvkQ)!YyqmYJ=odMHa@Ll&69`|7?LhuNIgXEpzzrK^j(?V7r%Gtw`^Z
z<useEw7LR>npH$|9>a38u45i9Q|0K$F#GlmvtrdsJYF~1T!C~ZO}*Ygl?v_cCT(Fi
zBQF;?I$ES>>GEqfyyx`MVqsDR5T#OFxLj@W_mMdB^v%mlrP*x@yB9Z~dHUIe!*i(D
zEqf|8BmGXF`t-IZDOZbhMmkY6s9G`h9($3CuW2S=L{Jn3kK05D0g5C!JInt4gETjV
zXbm@0F4mZuPLN8aIsJX_r&uiD^Ertnj!`OBXw(!;k49=H$v1DFprN%-9T^^Oa{(ow
zT#lo@aX6D%%hlWN59&&-_1^pMw2H|_aC&;|DN{2#Hm=_!J#LRs6@_B8Ty1R%)l8S+
zShivXeRKOLR!cMmLm)J!GDCDPY@kX99+wG<iUjhx0<)<!ZQ(FoJsmh44lKJ)Q^=3c
z=VdyPq^mnjrCdNLHvT|>LcT~WRpQ_a1-Wx)K`4gn3s3&X6R-X2{r5?LTW`Gs4d8p<
z{pXf*KC<CPE1jEPtW;WVzxj&;BU7o~YPs6C<-ChzS7(oKICQ4dvnWDy`aFINrz$Pm
z7DA}>boZd4@yfu%IJ|Labb~`;BXFoHR>PuDEaEm@1pGdP6gZtGUXPbdHp}G16#jsp
z(PP61&BAGF%*^H}7E8n?GEBZ+6N|gUc2e=~+HmqlI~I!(i9`TUWNpNF_OYLS!dXcC
zT}V%!cS4(b@`|wa30)T6*W_=KilGWaQ}BCzQbANTMP+<^l0u;>EXyWeC=l=km`+bp
zkw;jy-iy!W$K!URYbr;F2br0j#dMl@{XX1Y4-V5n)fDQD2DN&P-kxrPK`)A?P%4!e
zpP1pukx6ou6vMkxvL(<=-8LS*XzQg1fnPfhpk@*i-aW7Gf530oJy)$zSi7j5zIj11
z=^CAFh8Q?{g#Cw(QLUC~3rFyIy^5hLBxh4(vpIsn08$D@<GX0MUtvzGACK9BWmPa;
z23Fm|G@X=6B}~&vp-@KCR2;gF1j?l{Znq0v(eSvP6e~rB29tO_env)$G^Ik~>DOlR
z%QkJf=+1B6p7_uQ&thQc=x+!#nZa|Tqa&BMdo)h&_G9S^lQkdn7xb`seHUxGT%=~E
z*tK(yICyweiN+JssX2wq<tCTU(P-4E+jaII+Rf<rak@L3=<e>pvdc&bKCh34EpZwK
z4qeCR^HQr+nN4M|sudhg1A)M@8<c8AGN~e(Q^Vg3FFci!gTKm&-c=|5(@!4#$&Z0I
zIS-(&?CrTSJ~4UX%HEKCWxOV~oZQQ@4f9yAqL&u0AA=HoVZrJ}ZWgt|-oeA-7f(OO
z_{1c-?jRfv6P=1uE>t))Fu>wfZsvsDI2|qwhe5Sop-?E}HeJ}Z#Ih|^O~dDNkxXT&
z)$4e?Uh0h!xm=D!B8epm?Aeu+FF#ur!r3;v<Mlmf0^D@nb^LPIt~V2ynVsFEJM|lr
z#WL+)mvA+y=;bQW=_)&R4zMVqpgM!JM7n8hcC)G-F5c41=)f4S4MYir=Frp8h2d~9
zHgkZSGKozU({Laam672nb3y?uQKwpOV5ovhrOy7tBSa#dghMV~+BrZapQDaOx>8{@
zn&sHhh8Wr><fe_AK7M%c$f0sM&il{4@OPWLSAOi`@Yq=N+GEoh(IcR&X-s8`Jo3|5
z*}A%kV@D@w3%BCdENsn1#q^+?I%|4O)^zJU^Y~*-rwdrZBpyv;Hb+^~AH?A>IJkcd
zx6_MI%H*phMq}e73l`2`kbPrg{Nllbbj%NMc(O!mz@%8pQ?67f&J^XZp0R|>8NT=L
zZocXENT^wU@UK4n`@7R0zw%Oj`}P-3$YzUk*9KuQmd9&Z=!#0RSirJ0_KZx?p-hv_
z=V_g{n3k3~xV$=Zj3Vz@-_Jz!D6z?7<m(2BOom3Ig2!#(@tHVWHi=4#XmXmG-az_u
zygqt>l$}8pDj92<=l71{)dlTsCb?9B(s8di^qM`nVdF{HeCaD+O6+*`l|S5G|HXei
zU0k_hc|M=XoL`l;I-YIFN?nL0P4L6rWu|itMrSLuD-y#nsM&%<x{9TH&~y_`6zOSq
zbIwUUw73Mi?P7E|$H9>lE$vQ%A&XY8pN0iisZ26c!|&E{8*pr<Os!s_DWtLeu_9hg
z!<3eEWV(cEcK^$d9((M;x1<k@jYp3?`tzTeHO;-EY+J_BOofOpIg)B%IyLDwrPw=E
z0EbE}na5ep5*vw<oGFp2)adJup!iyt)8XT^bv-mm3nc@?gL$6cKE>!{kz6H%-mtOq
z9)eC6MpdC!7lhhW0&`$+ut99BLZ=!O>9|>pobdj0UwUzS_5a>*Gf(gM<sT-{9dz;8
z&wtUn;kxU0>6-FPGL?G7^!i>5b}wk3sg$*<wA|%-9fzi2m+I^|m|}60O+1=m;&_~V
zs>YHolZq>X>Ghzie!BZw>FahwS|Jy!q2)cq$82VjPMW(c(y0u!nxsA8MOZE-<0TBI
zgX70*GNO2d!|1>Hj=S!D?wrkQx%0t?{{Q;GZ*R-L*1sBg^`lo`9~wHe*Wq=$KK9zK
zUALIJ!t!RXEEP&35^`aw7EQ9w#(4pzst$VA&&6&ibj=OZzhFKZU{~_wVsYX_`$?4G
zk(Xz9aeRu!%N(p)?<UYLsTF<LdXb?6RdQ)3MzZ<n){kC$(s`F$HS^n@=syJQ4d;Jb
zL=c+S0;d1#pTEEAvXA8U?i={0okx#20v?m;Xr2|FE{aAI<0E-?&88?<Ys~8~czr6z
z)c80jFX<sK1<mbESj7&EnIu<zAjAc736JlNa_Hp*tr3A}NiuhyilP_g*kMJ4Jnl!M
zQ>kPkcI4etXrz<?;_1g9eeajQa?2+t$B&)8vbROc$7Z!PEq=Z~l%j<yYr1^Y5wy2^
zXbuHP%v8DV{0I###LRRWr=!B8<)rKg^5aK$F*2IQvkc}gYfwz;JoU3$vb$~mS-TG&
z*!8YyWWP_|dFcE1pK<F~zk1r}_|!+Yba`4wV_BTK%2=@`=Qo>Tp-W-bR#_Txv$<a|
zEds>iRTekrxN8p>tu17u)2vt&=3s7?v=S#frc<tZU%cn*_ny7w!gF(f7LhNVjuQ<2
zhRmn0{nVzNPjCBNK9`;EsTAf;RZ8YEzn40asuVOi1c^qSzMw%d-=M2W<#^3WELUd5
zTob1=$o|<Z6Zt8bPik`Q%8j3WV*B&o=Ff?8`FF3NcYo*Z1*;bH-_+j{I=;HSNiJ>i
z$PHniz0B{Hsw(6e5udzbL96sQG`S}1lj}O0WM4QSFIYcMp0TFGZZ(AL?1)Sc?S9Gg
zcKuP_uEBp_PB;Cp8~B^6|7LLa;LvTJ?#@dZzNVYPJw3;(!Xa!`rNyD)khYx2RZtbk
zRx6B6=MlQ(@MsF7Sf<&nbJB*5xA(6)xv*}<BL3p|%*VIB>HE4%&tG}=x|JVZ)z|xz
zj-X%mxeeLxaY?5p?1dqh44H;(GBvrj!(;#L=CHittWCezyJxTSKi^Zt_#ea2?l%{Y
z^=noK`n!7;ty{kQ8=bA8i~#A>RH+JK1NPFeS6=j<_0Qe$zrWZ4aLbo(=6@XJa_o0X
z@TWd;l@6#M+q(7YNNdaMrqhss+_ZM}Q&0Z*;TC|e-hAUbn(zMs8GZEd#`S}f00000
LNkvXXu0mjf8bdP=

literal 0
HcmV?d00001

diff --git a/packages/core/src/components/project/bottom/settings.svg b/packages/core/src/components/project/bottom/settings.svg
new file mode 100644
index 0000000..127f981
--- /dev/null
+++ b/packages/core/src/components/project/bottom/settings.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m113.147 53.166h-2.175v-22.456c0-16.934-13.777-30.71-30.788-30.71-16.934 0-30.71 13.776-30.71 30.71v22.456c-22.985-1.145-43.857 15.46-43.857 39.432v123.282c0 24.002 20.867 40.512 43.856 39.431v225.979c0 16.934 13.776 30.71 30.788 30.71 16.934 0 30.71-13.776 30.71-30.71v-225.979c22.21.781 41.606-16.895 41.606-39.431v-42.882c0-9.434-15.078-9.883-15.078.002 0 14.287.078 28.588.078 42.88 0 13.471-10.959 24.431-24.431 24.431h-68.098c-13.471 0-24.431-10.96-24.431-24.431v-123.282c0-13.472 10.959-24.432 24.431-24.432h68.099c13.471 0 24.431 10.96 24.431 24.432 0 13.466-.078 26.941-.078 40.402 0 9.459 15.078 9.869 15.078.004v-40.406c0-21.743-17.689-39.432-39.431-39.432zm-17.175 428.124c0 8.662-7.047 15.71-15.788 15.71-8.663 0-15.71-7.048-15.71-15.71v-225.979h31.498zm-31.498-450.58c0-8.662 7.047-15.71 15.788-15.71 8.663 0 15.71 7.048 15.71 15.71v22.456h-31.498z"/><path d="m290.612 255.094h-3.3v-224.384c0-16.934-13.776-30.71-30.788-30.71-16.934 0-30.71 13.776-30.71 30.71v224.384c-22.604-.988-42.731 16.189-42.731 39.431v123.283c0 23.349 20.118 40.263 42.731 39.432v24.051c0 16.934 13.777 30.71 30.788 30.71 16.934 0 30.71-13.776 30.71-30.71v-24.051c22.604.988 42.731-16.189 42.731-39.432v-123.284c0-21.742-17.689-39.43-39.431-39.43zm-49.799-224.384c0-8.662 7.048-15.71 15.788-15.71 8.663 0 15.71 7.048 15.71 15.71v224.384h-31.498zm31.499 450.58c0 8.662-7.047 15.71-15.788 15.71-8.663 0-15.71-7.048-15.71-15.71v-24.051h31.498zm42.731-63.482c0 13.472-10.96 24.432-24.431 24.432h-68.099c-13.471 0-24.431-10.96-24.431-24.432v-123.284c0-13.471 10.959-24.431 24.431-24.431h68.099c13.471 0 24.431 10.96 24.431 24.431z"/><path d="m466.952 139.191h-3.3v-108.481c0-16.934-13.776-30.71-30.788-30.71-16.934 0-30.71 13.776-30.71 30.71v108.481c-22.604-.988-42.731 16.19-42.731 39.432v123.282c0 23.349 20.118 40.263 42.731 39.432v139.953c0 16.934 13.777 30.71 30.788 30.71 16.934 0 30.71-13.776 30.71-30.71v-44.29c0-9.697-15-9.697-15 0v44.29c0 8.662-7.047 15.71-15.788 15.71-8.663 0-15.71-7.048-15.71-15.71v-139.953h31.498v52.663c0 9.697 15 9.697 15 0v-52.663c22.604.988 42.731-16.189 42.731-39.432v-123.282c0-21.742-17.689-39.432-39.431-39.432zm-49.799-108.481c0-8.662 7.048-15.71 15.788-15.71 8.663 0 15.71 7.048 15.71 15.71v108.481h-31.498zm74.23 271.195c0 13.472-10.96 24.432-24.431 24.432h-68.099c-13.471 0-24.431-10.96-24.431-24.432v-123.282c0-13.472 10.959-24.432 24.431-24.432h68.099c13.471 0 24.431 10.96 24.431 24.432z"/><path d="m102.347 100.484h-46.498c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h46.498c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5z"/><path d="m102.347 146.738h-46.498c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h46.498c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5z"/><path d="m102.347 192.993h-46.498c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h46.498c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5z"/><path d="m279.812 302.412h-46.498c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h46.498c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5z"/><path d="m279.812 348.666h-46.498c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h46.498c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5z"/><path d="m279.812 394.921h-46.498c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h46.498c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5z"/><path d="m456.151 186.51h-46.498c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h46.498c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5z"/><path d="m456.151 232.764h-46.498c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h46.498c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5z"/><path d="m456.151 279.019h-46.498c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h46.498c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5z"/></g></svg>
\ No newline at end of file
diff --git a/packages/core/src/components/project/index.jsx b/packages/core/src/components/project/index.jsx
index 7a7b684..5d36375 100644
--- a/packages/core/src/components/project/index.jsx
+++ b/packages/core/src/components/project/index.jsx
@@ -1,47 +1,66 @@
-import './index.scss';
-
+import {
+  useResourceController,
+} from '@avocado/resource-persea';
 import {
   classnames,
+  hot,
+  IconPages,
   PropTypes,
   React,
   Route,
-  useEffect,
+  useParams,
   useRef,
   useState,
 } from '@latus/react';
+import {
+  useSelector,
+} from '@latus/redux';
 
+import {structureSelector} from '../../state/projects';
 import ResourceRoute from '../resource/route';
-import Sidebar from './sidebar';
+import Organization from './organization';
 
-function Project({structure: {label, resourcePaths}, uuid}) {
+import {locals} from './index.module.scss';
+
+function Project({uuid}) {
+  const {uri} = useParams();
+  const [currentPageIndex, setCurrentPageIndex] = useState(0);
   const ref = useRef();
-  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
-  useEffect(() => {
-    const {current} = ref;
-    const onSwipeLeft = () => {
-      setIsSidebarOpen(false);
-    };
-    const onSwipeRight = () => {
-      setIsSidebarOpen(true);
-    };
-    current.addEventListener('swipeleft', onSwipeLeft);
-    current.addEventListener('swiperight', onSwipeRight);
-    return () => {
-      current.removeEventListener('swipeleft', onSwipeLeft);
-      current.removeEventListener('swiperight', onSwipeRight);
-    };
-  }, [ref]);
-  return (
-    <div className="project" ref={ref}>
-      <Sidebar
-        className={classnames({open: isSidebarOpen})}
+  const {label, resourcePaths} = useSelector((state) => structureSelector(state, uuid));
+  const iconPages = [];
+  // Organization
+  iconPages.push({
+    Icon: (
+      <svg viewBox="0 0 512 512">
+        <path d="m512 312v-160h-230v62h-152v-54h100v-160h-230v160h90v294h192v58h230v-160h-230v62h-152v-160h152v58zm-472-272h150v80h-150zm282 352h150v80h-150zm0-200h150v80h-150zm0 0" />
+      </svg>
+    ),
+    Page: (
+      <Organization
         label={label}
         uuid={uuid}
         resourcePaths={resourcePaths}
       />
-      <div className="resource-container">
-        <Route path="/project/:uuid:uri(/*)" component={ResourceRoute} />
-      </div>
+    ),
+  });
+  const {className} = useResourceController(uri);
+  // Resource
+  iconPages.push({
+    Icon: (
+      <div className={classnames(locals.resource, className)} />
+    ),
+    Page: (
+      <Route path="/project/:uuid:uri(/*)" component={ResourceRoute} />
+    ),
+  });
+  return (
+    <div className={locals.project} ref={ref}>
+      <IconPages
+        iconsAreBelow={false}
+        iconPages={iconPages}
+        index={currentPageIndex}
+        onIndexChanged={setCurrentPageIndex}
+      />
     </div>
   );
 }
@@ -54,8 +73,7 @@ export const propTypes = PropTypes.shape({
 Project.displayName = 'Project';
 
 Project.propTypes = {
-  structure: propTypes.isRequired,
   uuid: PropTypes.string.isRequired,
 };
 
-export default Project;
+export default hot(module)(Project);
diff --git a/packages/core/src/components/project/index.scss b/packages/core/src/components/project/index.scss
deleted file mode 100644
index cad29b5..0000000
--- a/packages/core/src/components/project/index.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-.project {
-  display: flex;
-  width: 100vw;
-  height: 100vh;
-  .resource-container {
-    background-color: rgba(0, 0, 0, 0.2);
-    flex-grow: 1;
-    overflow: auto;
-  }
-}
-
-[class*="ResizePanel-module_ResizeHandleHorizontal"] {
-  display: none;
-}
diff --git a/packages/core/src/components/project/route/index.jsx b/packages/core/src/components/project/route/index.jsx
index 525afbb..ea0dda2 100644
--- a/packages/core/src/components/project/route/index.jsx
+++ b/packages/core/src/components/project/route/index.jsx
@@ -4,15 +4,12 @@ import {join} from 'path';
 
 import {Resource} from '@avocado/resource';
 import {PropTypes, React} from '@latus/react';
-import {useSelector} from '@latus/redux';
 
-import {structureSelector} from '../../../state/projects';
 import Project from '../index';
 
 const ProjectRoute = ({match: {params: {uuid}}}) => {
-  const structure = useSelector((state) => structureSelector(state, uuid));
   Resource.root = join('/projects', uuid);
-  return <Project uuid={uuid} structure={structure} />;
+  return <Project uuid={uuid} />;
 };
 
 ProjectRoute.displayName = 'ProjectRoute';
diff --git a/packages/core/src/components/project/sidebar/index.scss b/packages/core/src/components/project/sidebar/index.scss
deleted file mode 100644
index 54ee5a2..0000000
--- a/packages/core/src/components/project/sidebar/index.scss
+++ /dev/null
@@ -1,98 +0,0 @@
-.sidebar {
-  background-color: #222;
-  height: 100%;
-  overflow-x: hidden;
-  overflow-y: auto;
-  left: -100vw;
-  position: absolute;
-  transition: 0.2s left;
-  width: 100%;
-  z-index: 100;
-  &.open {
-    left: 0;
-  }
-  @media(min-width: 90rem) {
-    position: static;
-    width: 30rem;
-  }
-  > .tree > .node > .item .label > .text {
-    flex-grow: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  .label.inline {
-    justify-content: flex-start;
-    > div:first-child.icon {
-      background-size: cover;
-      flex-grow: unset;
-      margin-right: 0.125em;
-      width: 1em;
-      height: 1em;
-      &.AudioComponent {
-        background-image: url('./img/sound.png');
-      }
-      &.Binary {
-        background-image: url('./img/question.png');
-      }
-      &.EntityComponent {
-        background-image: url('./img/joystick.png');
-      }
-      &.ImageComponent {
-        background-image: url('./img/image.png');
-      }
-      &.RoomComponent {
-        background-image: url('./img/map.png');
-      }
-      &.ScriptComponent {
-        background-image: url('./img/script.png');
-      }
-      &.SoundComponent {
-        background-image: url('./img/music.png');
-      }
-      &.TextComponent {
-        background-image: url('./img/note.png');
-      }
-    }
-  }
-  .node {
-    &.parent > .item .label:before {
-      color: #999;
-      content: "\25BE";
-      margin-right: 0.25em;
-    }
-    &.collapsed {
-      &.parent > .item .label:before {
-        color: #999;
-        content: "\25B8";
-      }
-    }
-  }
-}
-
-.sidebar-actions {
-  display: none;
-  line-height: 0;
-  min-width: 4em;
-  .sidebar:hover & {
-    display: block;
-  }
-  button {
-    background-color: transparent;
-    background-size: cover;
-    background-repeat: no-repeat;
-    border: none;
-    margin: 0;
-    margin-right: 0.25em;
-    width: 1em;
-    height: 1em;
-    &.collapse-all {
-      background-image: url('./img/collapse-all.svg');
-    }
-    &.new-file {
-      background-image: url('./img/new-file.svg');
-    }
-    &.new-folder {
-      background-image: url('./img/new-folder.svg');
-    }
-  }
-}