Completely re-wrote our sidebar. Now we can filter by search and category on top and a list of all elements are displayed below in a scrollable list. Each element has a indicator showing if the item is requested, downloading or downloaded. There are several generator functions that are to be pulled out in their seperate components.

client/app/components/styles/adminSidebar.jsx

@@ -1,13 +1,15 @@
 export default {
+   header: {
+      textAlign: 'center',
+   },
    body: {
       backgroundColor: 'white',
-      width: 'min-content',
    },
 
    parentElement: {
       display: 'inline-block',
-      width: '300px',
-      border: '1px solid black',
+      width: '100%',
+      border: '1px solid grey',
       borderRadius: '2px',
       padding: '4px',
       margin: '4px',
@@ -16,7 +18,8 @@ export default {
    },
 
    parentElement_hover: {
-      marginLeft: '10px',
+      backgroundColor: '#f8f8f8',
+      pointer: 'hand',
    },
 
    parentElement_active: {
@@ -25,8 +28,8 @@ export default {
 
    parentElement_selected: {
       display: 'inline-block',
-      width: '300px',
-      border: '1px solid black',
+      width: '100%',
+      border: '1px solid grey',
       borderRadius: '2px',
       padding: '4px',
       margin: '4px 0px 4px 4px',
@@ -35,7 +38,7 @@ export default {
    },
 
    title: {
-      maxWidth: '70%',
+      maxWidth: '65%',
       display: 'inline-flex',
    },
 
@@ -47,4 +50,104 @@ export default {
    rightContainer: {
       float: 'right',
    },
+
+
+
+   searchSidebar: {
+      height: '4em',
+   },
+   searchInner: {
+      top: '0',
+      right: '0',
+      left: '0',
+      bottom: '0',
+      margin: 'auto',
+      width: '90%',
+      minWidth: '280px',
+      height: '30px',
+      border: '1px solid #d0d0d0',
+      borderRadius: '4px',
+      overflow: 'hidden'
+   },
+   searchTextField: {
+      display: 'inline-block',
+      width: '90%',
+      padding: '.3em',
+      verticalAlign: 'middle',
+      border: 'none',
+      background: '#fff',
+      fontSize: '14px',
+      marginTop: '-7px',
+   },
+   searchIcon: {
+      width: '15px',
+      height: '16px',
+      marginRight: '4px',
+      marginTop: '7px',
+   },
+   searchSVGIcon: {
+      fill: 'none',
+      stroke: '#9d9d9d',
+      strokeLinecap: 'round',
+      strokeLinejoin: 'round',
+      strokeMiterlimit: '10',
+   },
+
+
+   ulFilterSelectors: {
+      borderBottom: '2px solid #f1f1f1',
+      display: 'flex',
+      padding: '0',
+      margin: '0',
+      listStyle: 'none',
+      justifyContent: 'space-evenly',
+   },
+   aFilterSelectors: {
+      color: '#3eaaaf',
+      fontSize: '16px',
+      cursor: 'pointer',
+   },
+   spanFilterSelectors: {
+      content: '""',
+      bottom: '-2px',
+      display: 'block',
+      width: '100%',
+      height: '2px',
+      backgroundColor: '#3eaaaa',
+   },
+
+
+   ulCard: {
+      margin: '1em 0 0 0',
+      padding: '0',
+      listStyle: 'none',
+      borderBottom: '.46rem solid #f1f1f',
+      backgroundColor: '#f1f1f1',
+      overflow: 'scroll',
+   },
+
+
+   card: {
+      padding: '.1em .5em .8em 1.5em',
+      marginBottom: '.26rem',
+      height: 'auto',
+      cursor: 'pointer',
+   },
+   cardSelected: {
+      padding: '.1em .5em .8em 1.5em',
+      marginBottom: '.26rem',
+      height: 'auto',
+      cursor: 'pointer',
+
+      backgroundColor: '#f9f9f9',
+   },
+   titleCard: {
+      fontSize: '15px',
+      fontWeight: '400',
+      whiteSpace: 'no-wrap',
+      textDecoration: 'none',
+   },
+   pCard: {
+      margin: '0',
+   },
 }