Add Entities list toggle

translate/src/App.css

@@ -45,10 +45,19 @@
     width: 100%;
   }
 
+  #app > .main-content.entities-list > .panel-content {
+    width: 0%;
+  }
+
   #app > .main-content > .panel-list {
     left: -100%;
     width: 0%;
   }
+
+  #app > .main-content.entities-list > .panel-list {
+    left: 0%;
+    width: 100%;
+  }
 }
 
 /* NProgress: A nanoscopic progress bar. */

translate/src/App.tsx

@@ -22,6 +22,7 @@ import { AddonPromotion } from './modules/addonpromotion/components/AddonPromoti
 import { BatchActions } from './modules/batchactions/components/BatchActions';
 import { useBatchactions } from './modules/batchactions/hooks';
 import { EntitiesList } from './modules/entitieslist';
+import { EntitiesListToggle } from './modules/entitieslist/components/EntitiesListToggle';
 import { Entity } from './modules/entitydetails/components/Entity';
 import { InteractiveTour } from './modules/interactivetour/components/InteractiveTour';
 import { Navigation } from './modules/navbar/components/Navigation';
@@ -68,6 +69,7 @@ export function App() {
                 <AddonPromotion />
                 <header>
                   <Navigation />
+                  <EntitiesListToggle />
                   <ResourceProgress />
                   {allProjects ? null : <ProjectInfo />}
                   <NotificationPanel />

translate/src/modules/entitieslist/components/EntitiesListToggle.css

@@ -0,0 +1,22 @@
+.entities-list-toggle {
+  display: none;
+  float: left;
+  cursor: pointer;
+}
+
+@media screen and (max-width: 600px) {
+  .entities-list-toggle {
+    display: block;
+  }
+}
+
+.entities-list-toggle .icon {
+  border: 2px solid var(--icon-border-1);
+  border-radius: 6px;
+  font-size: 20px;
+  height: 20px;
+  width: 20px;
+  margin: 6px 5px 6px 5px;
+  padding: 12px;
+  text-align: center;
+}

translate/src/modules/entitieslist/components/EntitiesListToggle.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import './EntitiesListToggle.css';
+
+/**
+ * Render entities list toggle.
+ *
+ * Used in a single-column layout.
+ */
+export function EntitiesListToggle(): React.ReactElement<'div'> {
+  const toggleEntitiesList = () => {
+    document
+      .querySelector('#app > .main-content')
+      .classList.toggle('entities-list');
+  };
+
+  return (
+    <div className='entities-list-toggle' onClick={() => toggleEntitiesList()}>
+      <div className='icon fa fa-bars'></div>
+    </div>
+  );
+}