Add more sort options and improve styling

plugins/talk-plugin-viewing-options/client/components/Menu.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import cn from 'classnames';
+import styles from './Menu.css';
+import {capitalize} from 'plugin-api/beta/client/utils';
+import Category from './Category';
+import {t} from 'plugin-api/beta/client/services';
+
+class Menu extends React.Component {
+  categories = {
+    sort: t('talk-plugin-viewing-options.sort'),
+    filter: t('talk-plugin-viewing-options.filter'),
+  };
+
+  render() {
+    return (
+      <div className={cn([styles.menu, 'talk-plugin-viewing-options-menu'])}>
+        {
+          Object.keys(this.categories).map((category) =>
+            <Category
+              key={category}
+              slot={`viewingOptions${capitalize(category)}`}
+              title={this.categories[category]}
+            />
+          )
+        }
+      </div>
+    );
+  }
+}
+
+export default Menu;