[frontend] Settings navigation design (#1652)

* change header image alignment

(cherry picked from commit df1bb339a5c597a2b668cedb3dafec5a390df120)

* big mess navigation refactor

* bit of cleanup

* minor css tweaks

* fix error rendering code for remote emoji

* refactor navigation structure code

* refactor styling

* fix className

* stash

* restructure navigation generation

* url wildcard formatting

* remove un-implemented User menu entry

* remove commented lines

* clarify permissions check

* invert permissions logic for clarity

1 files changed, 7 insertions, 5 deletions

diff --git a/web/source/settings/admin/emoji/local/overview.js b/web/source/settings/admin/emoji/local/overview.js
index 616c5144b..757729c38 100644
--- a/web/source/settings/admin/emoji/local/overview.js
+++ b/web/source/settings/admin/emoji/local/overview.js
@@ -29,12 +29,13 @@ const { useTextInput } = require("../../../lib/form");
 
 const query = require("../../../lib/query");
 const { useEmojiByCategory } = require("../category-select");
+const { useBaseUrl } = require("../../../lib/navigation/util");
 
 const Loading = require("../../../components/loading");
 const { Error } = require("../../../components/error");
 const { TextInput } = require("../../../components/form/inputs");
 
-module.exports = function EmojiOverview({ baseUrl }) {
+module.exports = function EmojiOverview({ }) {
 	const {
 		data: emoji = [],
 		isLoading,
@@ -51,7 +52,7 @@ module.exports = function EmojiOverview({ baseUrl }) {
 	} else {
 		content = (
 			<>
-				<EmojiList emoji={emoji} baseUrl={baseUrl} />
+				<EmojiList emoji={emoji} />
 				<NewEmojiForm emoji={emoji} />
 			</>
 		);
@@ -70,7 +71,7 @@ module.exports = function EmojiOverview({ baseUrl }) {
 	);
 };
 
-function EmojiList({ emoji, baseUrl }) {
+function EmojiList({ emoji }) {
 	const filterField = useTextInput("filter");
 	const filter = filterField.value;
 
@@ -116,7 +117,7 @@ function EmojiList({ emoji, baseUrl }) {
 						? (
 							<div className="entries scrolling">
 								{filteredEmoji.map(([category, entries]) => {
-									return <EmojiCategory key={category} category={category} entries={entries} baseUrl={baseUrl} />;
+									return <EmojiCategory key={category} category={category} entries={entries} />;
 								})}
 							</div>
 						)
@@ -128,7 +129,8 @@ function EmojiList({ emoji, baseUrl }) {
 	);
 }
 
-function EmojiCategory({ category, entries, baseUrl }) {
+function EmojiCategory({ category, entries }) {
+	const baseUrl = useBaseUrl();
 	return (
 		<div className="entry">
 			<b>{category}</b>