restyle menu (#1036)

* restyle menu

* update readme

Author: aine-etke

README.md

@@ -145,6 +145,7 @@ The following changes are already implemented:
 * 🐋 [Run rootless in Docker container](https://github.com/etkecc/synapse-admin/issues/1021)
 * 🇮🇷 [Fix loading of Persian localization](https://github.com/etkecc/synapse-admin/commit/737ec69b16da62e515be12778c46823f6525df4e#diff-26ad4b834941d9b19ebf9db8082bd202aaf72ea0ddea85f5a8a0cb3c729cc6f2)
 * 🔖 [Sync page title and document title](https://github.com/etkecc/synapse-admin/pull/1032)
+* [Restyle Sidebar Menu](https://github.com/etkecc/synapse-admin/pull/1036)
 
 #### exclusive for [etke.cc](https://etke.cc) customers
 

src/components/AdminLayout.tsx

@@ -106,7 +106,29 @@ const AdminMenu = props => {
   });
 
   return (
-    <Menu {...props}>
+    <Menu
+      {...props}
+      sx={theme => ({
+        "& .RaMenuItemLink-root": {
+          justifyContent: "center",
+          padding: "0px 2px 0px 0px",
+          marginBottom: 0,
+        },
+        "& .RaMenuItemLink-icon": {
+          minWidth: 44,
+          width: 44,
+          height: 44,
+          backgroundColor: "transparent",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          transition: "box-shadow 150ms ease, transform 150ms ease",
+        },
+        "& .RaMenuItemLink-active": {
+          backgroundColor: theme.palette.mode === "dark" ? "rgba(255, 255, 255, 0.12)" : "rgba(0, 0, 0, 0.06)",
+        },
+      })}
+    >
       {etkeRoutesEnabled && !icfg.disabled.monitoring && (
         <Menu.Item
           key="server_status"