Add sidebar to gallery for filtering and bulk actions

webapp/src/assets/less/variables.less

@@ -198,6 +198,63 @@
     }
 }
 
+.ofm-tab {
+    --ofm-navbar-height: 50px;
+}
+
+.ofm-tab-navbar {
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+  display: flex;
+  justify-content: flex-end;
+  height: var(--ofm-navbar-height);
+  border-width: 0 0 1px;
+  border-style: solid;
+  border-color: rgba(180, 180, 180, 0.25);
+  padding-right: 20px;
+  background: #fff;
+}
+.hook-inverse() {
+    .ofm-tab-navbar {
+        background: #252525;
+    }
+}
+
+/*
+ * Sidebar
+ */
+.ofm-container-with-sidebar
+{
+    display: grid;
+    grid-template-columns: 1fr 0;
+    height: 100%;
+}
+
+.ofm-container-with-sidebar.sidebar-open {
+    grid-template-columns: 1fr 250px;
+}
+
+.ofm-sidebar {
+    padding: 10px;
+    overflow: hidden;
+    border-left: none;
+    display: none;
+    background:#f5f5f5;
+}
+
+.ofm-sidebar.open {
+    border-left: 1px solid rgba(180, 180, 180, 0.25);
+    display: block;
+}
+
+.hook-inverse() {
+    .ofm-sidebar{
+        background: #282626;
+    }
+}
+
+
 /*
  * Links
  */