diff --git a/packages/console/package.json b/packages/console/package.json index b6d1c21df..efd659aa5 100644 --- a/packages/console/package.json +++ b/packages/console/package.json @@ -17,6 +17,7 @@ "dependencies": { "@logto/phrases": "^0.1.0", "@logto/schemas": "^0.1.0", + "classnames": "^2.3.1", "i18next": "^21.6.12", "i18next-browser-languagedetector": "^6.1.3", "react": "^17.0.2", diff --git a/packages/console/src/App.module.scss b/packages/console/src/App.module.scss index fa0a04e94..39de15523 100644 --- a/packages/console/src/App.module.scss +++ b/packages/console/src/App.module.scss @@ -2,6 +2,8 @@ // TO-DO: move to theme component --color-on-surface-variant: #47464e; + --color-primary: #4f37f9; + --color-primary-90: #e5dfff; position: absolute; left: 0; top: 0; diff --git a/packages/console/src/components/Sidebar/components/Item/index.module.scss b/packages/console/src/components/Sidebar/components/Item/index.module.scss index 3d4619ebc..b078ac64f 100644 --- a/packages/console/src/components/Sidebar/components/Item/index.module.scss +++ b/packages/console/src/components/Sidebar/components/Item/index.module.scss @@ -6,10 +6,7 @@ margin: 0 _.unit(5) 0 _.unit(2); padding: _.unit(3) _.unit(4); color: var(--color-on-surface-variant); - - > div + div { - margin-left: _.unit(5); - } + border-radius: _.unit(2); .icon { width: _.unit(6); @@ -21,6 +18,19 @@ } } + &.active { + background: var(--color-primary-90); + color: var(--color-primary); + + .icon svg { + fill: var(--color-primary); + } + } + + > div + div { + margin-left: _.unit(5); + } + .title { @include _.subhead-1; } diff --git a/packages/console/src/components/Sidebar/components/Item/index.tsx b/packages/console/src/components/Sidebar/components/Item/index.tsx index c13e7e08b..c02f1514a 100644 --- a/packages/console/src/components/Sidebar/components/Item/index.tsx +++ b/packages/console/src/components/Sidebar/components/Item/index.tsx @@ -1,3 +1,4 @@ +import classNames from 'classnames'; import React, { ReactChild } from 'react'; import * as styles from './index.module.scss'; @@ -5,11 +6,12 @@ import * as styles from './index.module.scss'; type Props = { icon?: ReactChild; title: string; + isActive?: boolean; }; -const Item = ({ icon, title }: Props) => { +const Item = ({ icon, title, isActive = false }: Props) => { return ( -
+
{icon &&
{icon}
}
{title}
diff --git a/packages/console/src/components/Sidebar/consts.tsx b/packages/console/src/components/Sidebar/consts.tsx index 4ba1595fd..7f9f7387c 100644 --- a/packages/console/src/components/Sidebar/consts.tsx +++ b/packages/console/src/components/Sidebar/consts.tsx @@ -5,6 +5,12 @@ import BarGraph from './icons/BarGraph'; import Bolt from './icons/Bolt'; import Box from './icons/Box'; import Cloud from './icons/Cloud'; +import Connection from './icons/Connection'; +import Document from './icons/Document'; +import Help from './icons/Help'; +import List from './icons/List'; +import UserProfile from './icons/UserProfile'; +import Web from './icons/Web'; type SidebarItem = { Icon: FC; @@ -41,6 +47,40 @@ export const sections: SidebarSection[] = [ Icon: Cloud, title: 'api_resources', }, + { + Icon: Web, + title: 'sign_in_experience', + }, + { + Icon: Connection, + title: 'connectors', + }, + ], + }, + { + title: 'user_management', + items: [ + { + Icon: UserProfile, + title: 'user_management', + }, + { + Icon: List, + title: 'audit_logs', + }, + ], + }, + { + title: 'help_and_support', + items: [ + { + Icon: Help, + title: 'community_support', + }, + { + Icon: Document, + title: 'documentation', + }, ], }, ]; diff --git a/packages/console/src/components/Sidebar/icons/Connection.tsx b/packages/console/src/components/Sidebar/icons/Connection.tsx new file mode 100644 index 000000000..4ed7b8a0f --- /dev/null +++ b/packages/console/src/components/Sidebar/icons/Connection.tsx @@ -0,0 +1,11 @@ +import React from 'react'; + +const Connection = () => { + return ( + + + + ); +}; + +export default Connection; diff --git a/packages/console/src/components/Sidebar/icons/Document.tsx b/packages/console/src/components/Sidebar/icons/Document.tsx new file mode 100644 index 000000000..f2a9a284f --- /dev/null +++ b/packages/console/src/components/Sidebar/icons/Document.tsx @@ -0,0 +1,11 @@ +import React from 'react'; + +const Document = () => { + return ( + + + + ); +}; + +export default Document; diff --git a/packages/console/src/components/Sidebar/icons/Gear.tsx b/packages/console/src/components/Sidebar/icons/Gear.tsx new file mode 100644 index 000000000..a52089f7c --- /dev/null +++ b/packages/console/src/components/Sidebar/icons/Gear.tsx @@ -0,0 +1,11 @@ +import React from 'react'; + +const Gear = () => { + return ( + + + + ); +}; + +export default Gear; diff --git a/packages/console/src/components/Sidebar/icons/Help.tsx b/packages/console/src/components/Sidebar/icons/Help.tsx new file mode 100644 index 000000000..980ff9bf0 --- /dev/null +++ b/packages/console/src/components/Sidebar/icons/Help.tsx @@ -0,0 +1,11 @@ +import React from 'react'; + +const Help = () => { + return ( + + + + ); +}; + +export default Help; diff --git a/packages/console/src/components/Sidebar/icons/List.tsx b/packages/console/src/components/Sidebar/icons/List.tsx new file mode 100644 index 000000000..4c74da4b6 --- /dev/null +++ b/packages/console/src/components/Sidebar/icons/List.tsx @@ -0,0 +1,11 @@ +import React from 'react'; + +const List = () => { + return ( + + + + ); +}; + +export default List; diff --git a/packages/console/src/components/Sidebar/icons/UserProfile.tsx b/packages/console/src/components/Sidebar/icons/UserProfile.tsx new file mode 100644 index 000000000..c7188b8b7 --- /dev/null +++ b/packages/console/src/components/Sidebar/icons/UserProfile.tsx @@ -0,0 +1,11 @@ +import React from 'react'; + +const UserProfile = () => { + return ( + + + + ); +}; + +export default UserProfile; diff --git a/packages/console/src/components/Sidebar/icons/Web.tsx b/packages/console/src/components/Sidebar/icons/Web.tsx new file mode 100644 index 000000000..5a4c1ea96 --- /dev/null +++ b/packages/console/src/components/Sidebar/icons/Web.tsx @@ -0,0 +1,11 @@ +import React from 'react'; + +const Web = () => { + return ( + + + + ); +}; + +export default Web; diff --git a/packages/console/src/components/Sidebar/index.module.scss b/packages/console/src/components/Sidebar/index.module.scss index 3f300fba5..6c6914944 100644 --- a/packages/console/src/components/Sidebar/index.module.scss +++ b/packages/console/src/components/Sidebar/index.module.scss @@ -1,11 +1,19 @@ @use '@/scss/underscore' as _; .sidebar { + display: flex; + flex-direction: column; flex-grow: 0; flex-shrink: 0; width: 275px; + padding-bottom: _.unit(6); > div + div { margin-top: _.unit(6); } + + .spacer { + margin: 0; + flex: 1 1 0; + } } diff --git a/packages/console/src/components/Sidebar/index.tsx b/packages/console/src/components/Sidebar/index.tsx index e0f60f09d..326445897 100644 --- a/packages/console/src/components/Sidebar/index.tsx +++ b/packages/console/src/components/Sidebar/index.tsx @@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next'; import Item from './components/Item'; import Section from './components/Section'; import { sections } from './consts'; +import Gear from './icons/Gear'; import * as styles from './index.module.scss'; const Sidebar = () => { @@ -19,10 +20,17 @@ const Sidebar = () => { {sections.map(({ title, items }) => (
{items.map(({ title, Icon }) => ( - } /> + } + isActive={title === 'api_resources'} + /> ))}
))} +
+ } />
); }; diff --git a/packages/phrases/src/locales/en.ts b/packages/phrases/src/locales/en.ts index 420a42ee0..b1abeab28 100644 --- a/packages/phrases/src/locales/en.ts +++ b/packages/phrases/src/locales/en.ts @@ -16,12 +16,21 @@ const translation = { tab_sections: { overview: 'Overview', resource_management: 'Resource Management', + user_management: 'User Management', + help_and_support: 'Help and Support', }, tabs: { get_started: 'Get Started', dashboard: 'Dashboard', applications: 'Applications', api_resources: 'API Resources', + sign_in_experience: 'Sign-in Experience', + connectors: 'Connectors', + user_management: 'User Management', + audit_logs: 'Audit Logs', + documentation: 'Documentation', + community_support: 'Community Support', + settings: 'Settings', }, }, }; diff --git a/packages/phrases/src/locales/zh-cn.ts b/packages/phrases/src/locales/zh-cn.ts index 58d933d86..84131388b 100644 --- a/packages/phrases/src/locales/zh-cn.ts +++ b/packages/phrases/src/locales/zh-cn.ts @@ -18,12 +18,21 @@ const translation = { tab_sections: { overview: '概览', resource_management: '资源管理', + user_management: '用户管理', + help_and_support: '帮助与支持', }, tabs: { get_started: '开始使用', dashboard: '仪表盘', applications: '应用', api_resources: 'API 资源', + sign_in_experience: '登录体验', + connectors: '连接器', + user_management: '用户管理', + audit_logs: '审计日志', + documentation: '文档', + community_support: '社区支持', + settings: '设置', }, }, }; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3ed2f3ae5..379a998ed 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -30,6 +30,7 @@ importers: '@silverhand/ts-config-react': ^0.9.2 '@types/react': ^17.0.14 '@types/react-dom': ^17.0.9 + classnames: ^2.3.1 eslint: ^8.10.0 i18next: ^21.6.12 i18next-browser-languagedetector: ^6.1.3 @@ -46,6 +47,7 @@ importers: dependencies: '@logto/phrases': link:../phrases '@logto/schemas': link:../schemas + classnames: 2.3.1 i18next: 21.6.12 i18next-browser-languagedetector: 6.1.3 react: 17.0.2