fix: do not uppercase menu items by default

Author: RomanHotsiy

src/components/SideMenu/styled.elements.ts

@@ -104,15 +104,15 @@ export const MenuItemLi = withProps<{ depth: number }>(styled.li)`
 export const menuItemDepth = {
   0: css`
     opacity: 0.7;
-    text-transform: uppercase;
+    text-transform: ${({ theme }) => theme.menu.groupItems.textTransform};
     font-size: 0.8em;
     padding-bottom: 0;
     cursor: default;
     color: ${props => props.theme.colors.text};
   `,
   1: css`
     font-size: 0.929em;
-    text-transform: uppercase;
+    text-transform: ${({ theme }) => theme.menu.level1Items.textTransform};
     &:hover {
       color: ${props => props.theme.colors.main};
     }

src/theme.ts

@@ -60,6 +60,12 @@ const defaultTheme: ThemeInterface = {
   menu: {
     width: '260px',
     backgroundColor: '#fafafa',
+    groupItems: {
+      textTransform: 'uppercase',
+    },
+    level1Items: {
+      textTransform: 'none',
+    },
   },
   logo: {
     maxHeight: ({ menu }) => menu.width,
@@ -167,6 +173,12 @@ export interface ResolvedThemeInterface {
   menu: {
     width: string;
     backgroundColor: string;
+    groupItems: {
+      textTransform: string;
+    };
+    level1Items: {
+      textTransform: string;
+    };
   };
   logo: {
     maxHeight: string;