feat: add router config, layout, header, and toolbar

src/providers/RtlProvider.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';
 import rtlPlugin from 'stylis-plugin-rtl';
+import { prefixer } from 'stylis';
 
 // This provider configures Emotion's cache to support RTL.
 export const RtlProvider: React.FC<{ children: React.ReactNode }> = ({
@@ -15,8 +16,8 @@ export const RtlProvider: React.FC<{ children: React.ReactNode }> = ({
     const newDir = i18n.dir(i18n.language);
 
     const newCache = createCache({
-      key: 'css',
-      stylisPlugins: newDir === 'rtl' ? [rtlPlugin] : [],
+      key: 'mui',
+      stylisPlugins: newDir === 'rtl' ? [prefixer, rtlPlugin] : [],
     });
     setCache(newCache);
   }, [i18n, i18n.language]);