diff --git a/packages/core/package.json b/packages/core/package.json
index 014a8cf..d2cf0c2 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -36,13 +36,14 @@
     "fast-json-patch": "^3.0.0-1",
     "glob": "^7.1.6",
     "history": "^4.10.0",
+    "import": "^0.0.6",
     "lodash.flatten": "^4.4.0",
     "natsort": "^2.0.2",
     "rc-slider": "^9.7.1",
     "react-hex-editor": "^0.3.0",
     "react-modal": "^3.12.1",
-    "react-resize-panel": "^0.3.5",
-    "react-ui-tree": "^4.0.0"
+    "react-ui-tree": "^4.0.0",
+    "swipe-touch-events": "^1.0.2"
   },
   "devDependencies": {
     "@latus/build": "1.x"
diff --git a/packages/core/src/components/persea/index.scss b/packages/core/src/components/persea/index.scss
index 2385a3c..666df1f 100644
--- a/packages/core/src/components/persea/index.scss
+++ b/packages/core/src/components/persea/index.scss
@@ -109,15 +109,15 @@ label, .label {
   font-family: var(--thick-title-font-family);
   font-size: 1em;
   min-height: 3em;
-  padding: 0.5em 0.5em 0.5em 1em;
+  padding: 1em;
   user-select: none;
-  @media(min-width: 20em) {
-    align-items: center;
-    flex-direction: row;
-    justify-content: space-between;
-  }
+  // @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.05);
+    background-color: rgba(0, 0, 0, 0.15);
   }
   &.above {
     flex-direction: column;
@@ -127,6 +127,24 @@ label, .label {
       margin-top: 1em;
     }
   }
+  // non-inline
+  flex-direction: column;
+  width: 100%;
+  > div:first-child {
+    font-size: 0.7em;
+    text-transform: uppercase;
+    opacity: 1;
+    margin-bottom: 1em;
+  }
+  &.inline {
+    align-items: center;
+    flex-direction: row;
+    justify-content: space-between;
+    > div:first-child {
+      flex-grow: 1;
+      margin: auto 0;
+    }
+  }
   .center {
     text-align: center;
   }
@@ -273,6 +291,6 @@ img {
 
 button.active {
   box-shadow: 0px 0px 5px #00e1ff inset;
-  background-image: #373737;
+  background-color: #006370;
   border: 2px solid #006370;
 }
diff --git a/packages/core/src/components/project/index.jsx b/packages/core/src/components/project/index.jsx
index bb326f7..7a7b684 100644
--- a/packages/core/src/components/project/index.jsx
+++ b/packages/core/src/components/project/index.jsx
@@ -1,29 +1,50 @@
 import './index.scss';
 
 import {
+  classnames,
   PropTypes,
   React,
   Route,
+  useEffect,
+  useRef,
+  useState,
 } from '@latus/react';
-import ResizePanel from 'react-resize-panel';
 
 import ResourceRoute from '../resource/route';
 import Sidebar from './sidebar';
 
-const Project = ({structure: {label, resourcePaths}, uuid}) => (
-  <div className="project">
-    <ResizePanel direction="e">
+function Project({structure: {label, resourcePaths}, uuid}) {
+  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})}
         label={label}
         uuid={uuid}
         resourcePaths={resourcePaths}
       />
-    </ResizePanel>
-    <div className="resource-container">
-      <Route path="/project/:uuid:uri(/*)" component={ResourceRoute} />
+      <div className="resource-container">
+        <Route path="/project/:uuid:uri(/*)" component={ResourceRoute} />
+      </div>
     </div>
-  </div>
-);
+  );
+}
 
 export const propTypes = PropTypes.shape({
   label: PropTypes.string.isRequired,
diff --git a/packages/core/src/components/project/index.scss b/packages/core/src/components/project/index.scss
index 10fb384..cad29b5 100644
--- a/packages/core/src/components/project/index.scss
+++ b/packages/core/src/components/project/index.scss
@@ -1,5 +1,3 @@
-$sidebar-basis: 12rem;
-
 .project {
   display: flex;
   width: 100vw;
@@ -14,7 +12,3 @@ $sidebar-basis: 12rem;
 [class*="ResizePanel-module_ResizeHandleHorizontal"] {
   display: none;
 }
-
-[class*="ResizePanel-module_ResizeContent"] {
-  min-width: $sidebar-basis;
-}
diff --git a/packages/core/src/components/project/sidebar/index.jsx b/packages/core/src/components/project/sidebar/index.jsx
index 1c3e352..1b37170 100644
--- a/packages/core/src/components/project/sidebar/index.jsx
+++ b/packages/core/src/components/project/sidebar/index.jsx
@@ -1,9 +1,8 @@
-import './index.scss';
-
 import {join} from 'path';
 
 import {Tree} from '@avocado/react';
 import {
+  classnames,
   PropTypes,
   React,
   useHistory,
@@ -12,10 +11,17 @@ import {
   useState,
 } from '@latus/react';
 import {createNextState} from '@latus/redux';
+import 'swipe-touch-events';
 
 import SidebarActions from './actions';
+import './index.scss';
 
-const Sidebar = ({label, resourcePaths, uuid}) => {
+const Sidebar = ({
+  className,
+  label,
+  resourcePaths,
+  uuid,
+}) => {
   const history = useHistory();
   const latus = useLatus();
   const location = useLocation();
@@ -54,7 +60,7 @@ const Sidebar = ({label, resourcePaths, uuid}) => {
   };
   const path = join('/project', uuid);
   return (
-    <div className="sidebar">
+    <div className={classnames('sidebar', className)}>
       <Tree
         // active={({value}) => location.pathname === join('/project', value)}
         activate={({value, nodes}) => {
@@ -109,11 +115,13 @@ const Sidebar = ({label, resourcePaths, uuid}) => {
   );
 };
 
-Sidebar.defaultProps = {};
+Sidebar.defaultProps = {
+  className: '',
+};
 
 Sidebar.propTypes = {
+  className: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
-  // eslint-disable-next-line react/no-unused-prop-types
   resourcePaths: PropTypes.arrayOf(PropTypes.any).isRequired,
   uuid: PropTypes.string.isRequired,
 };
diff --git a/packages/core/src/components/project/sidebar/index.scss b/packages/core/src/components/project/sidebar/index.scss
index ae81e90..6249eab 100644
--- a/packages/core/src/components/project/sidebar/index.scss
+++ b/packages/core/src/components/project/sidebar/index.scss
@@ -1,11 +1,20 @@
-$sidebar-basis: 12rem;
-
 .sidebar {
+  background-color: #222;
   height: 100%;
-  min-width: $sidebar-basis;
   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: 80rem) {
+    position: static;
+    width: 80rem;
+  }
   > .tree > .node > .item .label > .text {
     flex-grow: 1;
     overflow: hidden;
diff --git a/packages/core/yarn.lock b/packages/core/yarn.lock
index 7eb430d..9443263 100644
--- a/packages/core/yarn.lock
+++ b/packages/core/yarn.lock
@@ -2729,11 +2729,6 @@ caseless@~0.12.0:
   resolved "https://verdaccio.hq.cha0s.io/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
   integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=
 
-cash-dom@^4.1.5:
-  version "4.1.5"
-  resolved "https://verdaccio.hq.cha0s.io/cash-dom/-/cash-dom-4.1.5.tgz#0ef0cf205bc7603aa4e2dfada5808442a7a0e6ca"
-  integrity sha512-E6MO0A6ms5iZPtexznQXWRkFEvqdPqCmdx/SiJr2PnhOQNhZNfALkLG5t83Hk3J5JELzED7PJuzhMoS2tT64XA==
-
 chai@4.2.0:
   version "4.2.0"
   resolved "https://verdaccio.hq.cha0s.io/chai/-/chai-4.2.0.tgz#760aa72cf20e3795e84b12877ce0e83737aa29e5"
@@ -5229,6 +5224,13 @@ import-local@^2.0.0:
     pkg-dir "^3.0.0"
     resolve-cwd "^2.0.0"
 
+import@^0.0.6:
+  version "0.0.6"
+  resolved "https://verdaccio.hq.cha0s.io/import/-/import-0.0.6.tgz#d0eb79df86aa2677c6db61578a5212b3031e6042"
+  integrity sha1-0Ot534aqJnfG22FXilISswMeYEI=
+  dependencies:
+    optimist "0.3.x"
+
 imurmurhash@^0.1.4:
   version "0.1.4"
   resolved "https://verdaccio.hq.cha0s.io/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
@@ -6922,6 +6924,13 @@ opn@^5.5.0:
   dependencies:
     is-wsl "^1.1.0"
 
+optimist@0.3.x:
+  version "0.3.7"
+  resolved "https://verdaccio.hq.cha0s.io/optimist/-/optimist-0.3.7.tgz#c90941ad59e4273328923074d2cf2e7cbc6ec0d9"
+  integrity sha1-yQlBrVnkJzMokjB00s8ufLxuwNk=
+  dependencies:
+    wordwrap "~0.0.2"
+
 optionator@^0.9.1:
   version "0.9.1"
   resolved "https://verdaccio.hq.cha0s.io/optionator/-/optionator-0.9.1.tgz#4f236a6373dae0566a6d43e1326674f50c291499"
@@ -7543,7 +7552,7 @@ promise-inflight@^1.0.1:
   resolved "https://verdaccio.hq.cha0s.io/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
   integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM=
 
-prop-types@^15.5.0, prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.0, prop-types@^15.5.10, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://verdaccio.hq.cha0s.io/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -7791,14 +7800,6 @@ react-dom@^17.0.1:
     object-assign "^4.1.1"
     scheduler "^0.20.2"
 
-react-draggable@^4.0.3:
-  version "4.4.3"
-  resolved "https://verdaccio.hq.cha0s.io/react-draggable/-/react-draggable-4.4.3.tgz#0727f2cae5813e36b0e4962bf11b2f9ef2b406f3"
-  integrity sha512-jV4TE59MBuWm7gb6Ns3Q1mxX8Azffb7oTtDtBgFkxRvhDp38YAARmRplrj0+XGkhOJB5XziArX+4HUUABtyZ0w==
-  dependencies:
-    classnames "^2.2.5"
-    prop-types "^15.6.0"
-
 react-hex-editor@^0.3.0:
   version "0.3.0"
   resolved "https://verdaccio.hq.cha0s.io/react-hex-editor/-/react-hex-editor-0.3.0.tgz#4133715faa9eb46ea3f373ec0c81a2e379fe6575"
@@ -7863,16 +7864,6 @@ react-redux@^7.2.2:
     prop-types "^15.7.2"
     react-is "^16.13.1"
 
-react-resize-panel@^0.3.5:
-  version "0.3.5"
-  resolved "https://verdaccio.hq.cha0s.io/react-resize-panel/-/react-resize-panel-0.3.5.tgz#43aa3450bf5b5a2566b40c4201445ced96c2a905"
-  integrity sha512-iyHOFTrSt+WV4Ilzi81x6KH3FU7VsGP736rmxepwGrgAEATmCvXzZdluTm3NpsptP7aC3hLODmXwnxusyA393A==
-  dependencies:
-    cash-dom "^4.1.5"
-    classnames "^2.2.6"
-    lodash.debounce "^4.0.8"
-    react-draggable "^4.0.3"
-
 react-router-dom@^5.2.0:
   version "5.2.0"
   resolved "https://verdaccio.hq.cha0s.io/react-router-dom/-/react-router-dom-5.2.0.tgz#9e65a4d0c45e13289e66c7b17c7e175d0ea15662"
@@ -9163,6 +9154,11 @@ supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
+swipe-touch-events@^1.0.2:
+  version "1.0.2"
+  resolved "https://verdaccio.hq.cha0s.io/swipe-touch-events/-/swipe-touch-events-1.0.2.tgz#84c2ba1570db85a41bbf082f20a53b165b67326a"
+  integrity sha512-Tj3MeUzzMGVoazK5UloCzX9JCJ9y+Xy/F8tHbZy6bFzjNMTXE0VM6RAyarhtjG+oU70ggEtaYSDvoZPczUMaTg==
+
 table@^6.0.9:
   version "6.7.1"
   resolved "https://verdaccio.hq.cha0s.io/table/-/table-6.7.1.tgz#ee05592b7143831a8c94f3cee6aae4c1ccef33e2"
@@ -9887,6 +9883,11 @@ word-wrap@^1.2.3:
   resolved "https://verdaccio.hq.cha0s.io/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"
   integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==
 
+wordwrap@~0.0.2:
+  version "0.0.3"
+  resolved "https://verdaccio.hq.cha0s.io/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
+  integrity sha1-o9XabNXAvAAI03I0u68b7WMFkQc=
+
 worker-farm@^1.7.0:
   version "1.7.0"
   resolved "https://verdaccio.hq.cha0s.io/worker-farm/-/worker-farm-1.7.0.tgz#26a94c5391bbca926152002f69b84a4bf772e5a8"