From 11899731e7b0cee510ae73efc2e5e9bdd0950020 Mon Sep 17 00:00:00 2001
From: wangsijie <wangsijie@silverhand.io>
Date: Thu, 7 Apr 2022 12:08:25 +0800
Subject: [PATCH] fix: set cn font size to 12 in sidebar section

---
 .../Sidebar/components/Section/index.module.scss     |  6 +++++-
 .../components/Sidebar/components/Section/index.tsx  | 12 +++++++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/packages/console/src/components/AppContent/components/Sidebar/components/Section/index.module.scss b/packages/console/src/components/AppContent/components/Sidebar/components/Section/index.module.scss
index 0f477502f..7e9399d13 100644
--- a/packages/console/src/components/AppContent/components/Sidebar/components/Section/index.module.scss
+++ b/packages/console/src/components/AppContent/components/Sidebar/components/Section/index.module.scss
@@ -6,5 +6,9 @@
   padding: _.unit(2) _.unit(6);
   text-transform: uppercase;
   letter-spacing: 0.1em;
-  font-size: 12px;
+  font-size: 10px;
+
+  &.zh {
+    font-size: 12px;
+  }
 }
diff --git a/packages/console/src/components/AppContent/components/Sidebar/components/Section/index.tsx b/packages/console/src/components/AppContent/components/Sidebar/components/Section/index.tsx
index 6f1068d30..d69e3cfba 100644
--- a/packages/console/src/components/AppContent/components/Sidebar/components/Section/index.tsx
+++ b/packages/console/src/components/AppContent/components/Sidebar/components/Section/index.tsx
@@ -1,4 +1,6 @@
+import classNames from 'classnames';
 import React, { ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import * as styles from './index.module.scss';
 
@@ -8,9 +10,17 @@ type Props = {
 };
 
 const Section = ({ children, title }: Props) => {
+  const {
+    i18n: { language },
+  } = useTranslation();
+
+  const languageClassname = language.split('-')[0];
+
   return (
     <div>
-      <div className={styles.title}>{title}</div>
+      <div className={classNames(styles.title, languageClassname && styles[languageClassname])}>
+        {title}
+      </div>
       {children}
     </div>
   );