mirror of
https://github.com/logto-io/logto.git
synced 2024-12-30 20:33:54 -05:00
feat(console): fulfill tab sections and items
This commit is contained in:
Gao Sun
parent
02e9b8fde4
commit
a89e3d1eb7
17 changed files with 175 additions and 7 deletions
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<div className={styles.row}>
|
||||
<div className={classNames(styles.row, isActive && styles.active)}>
|
||||
{icon && <div className={styles.icon}>{icon}</div>}
|
||||
<div className={styles.title}>{title}</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
|
|
|||
11
packages/console/src/components/Sidebar/icons/Connection.tsx
Normal file
11
packages/console/src/components/Sidebar/icons/Connection.tsx
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
import React from 'react';
|
||||
|
||||
const Connection = () => {
|
||||
return (
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M20.52 3.86994C20.1075 3.00818 19.4568 2.28263 18.6448 1.77916C17.8329 1.2757 16.8937 1.0154 15.9384 1.02908C14.9831 1.04275 14.0517 1.32983 13.2545 1.85634C12.4573 2.38284 11.8276 3.12672 11.44 3.99994H6.99999C6.20434 3.99994 5.44128 4.31601 4.87867 4.87862C4.31606 5.44123 3.99999 6.20429 3.99999 6.99994V10.9999C3.99999 11.2652 4.10535 11.5195 4.29289 11.707C4.48042 11.8946 4.73478 11.9999 4.99999 11.9999C5.26521 11.9999 5.51956 11.8946 5.7071 11.707C5.89464 11.5195 5.99999 11.2652 5.99999 10.9999V6.99994C5.99999 6.73472 6.10535 6.48037 6.29289 6.29283C6.48042 6.10529 6.73478 5.99994 6.99999 5.99994H9.77999C9.2822 6.54757 9.0044 7.25988 8.99999 7.99994C8.99999 8.79559 9.31606 9.55865 9.87867 10.1213C10.4413 10.6839 11.2043 10.9999 12 10.9999H19.33C20.2007 11.0062 21.0452 10.7018 21.7117 10.1415C22.3782 9.58109 22.8231 8.80144 22.9664 7.94255C23.1098 7.08366 22.9422 6.2018 22.4938 5.45536C22.0454 4.70891 21.3456 4.14678 20.52 3.86994ZM19.33 8.99994H12C11.7348 8.99994 11.4804 8.89458 11.2929 8.70704C11.1054 8.51951 11 8.26515 11 7.99994C11 7.73472 11.1054 7.48037 11.2929 7.29283C11.4804 7.10529 11.7348 6.99994 12 6.99994C12.2652 6.99994 12.5196 6.89458 12.7071 6.70704C12.8946 6.51951 13 6.26515 13 5.99994C12.9919 5.28629 13.2385 4.59315 13.6955 4.04497C14.1526 3.4968 14.79 3.12951 15.4935 3.00905C16.1969 2.8886 16.9203 3.02288 17.5336 3.38777C18.147 3.75266 18.6102 4.32427 18.84 4.99994C18.8972 5.17178 18.9999 5.32487 19.1373 5.44287C19.2747 5.56087 19.4415 5.63935 19.62 5.66994C20.0111 5.73473 20.3657 5.93813 20.6191 6.24295C20.8725 6.54777 21.0077 6.93362 21 7.32994C21 7.54924 20.9568 7.7664 20.8729 7.96902C20.7889 8.17163 20.6659 8.35573 20.5109 8.51081C20.3558 8.66588 20.1717 8.78889 19.9691 8.87282C19.7665 8.95674 19.5493 8.99994 19.33 8.99994ZM19 12.9999C18.7348 12.9999 18.4804 13.1053 18.2929 13.2928C18.1054 13.4804 18 13.7347 18 13.9999V16.9999C18 17.2652 17.8946 17.5195 17.7071 17.707C17.5196 17.8946 17.2652 17.9999 17 17.9999H14.74C14.5467 17.505 14.248 17.0582 13.8647 16.6903C13.4813 16.3225 13.0225 16.0426 12.52 15.8699C12.0668 14.9083 11.3189 14.116 10.3849 13.6083C9.4509 13.1006 8.37935 12.9038 7.32587 13.0465C6.27239 13.1892 5.2918 13.6639 4.5265 14.4018C3.76119 15.1397 3.251 16.1024 3.06999 17.1499C2.39278 17.3725 1.81695 17.829 1.44569 18.4375C1.07444 19.0461 0.932006 19.7669 1.04393 20.471C1.15585 21.175 1.5148 21.8161 2.05648 22.2795C2.59815 22.743 3.28714 22.9983 3.99999 22.9999H11.33C12.1862 22.9999 13.0153 22.6998 13.6731 22.1516C14.3308 21.6035 14.7756 20.8421 14.93 19.9999H17C17.7956 19.9999 18.5587 19.6839 19.1213 19.1213C19.6839 18.5586 20 17.7956 20 16.9999V13.9999C20 13.7347 19.8946 13.4804 19.7071 13.2928C19.5196 13.1053 19.2652 12.9999 19 12.9999ZM11.33 20.9999H3.99999C3.73478 20.9999 3.48042 20.8946 3.29289 20.707C3.10535 20.5195 2.99999 20.2652 2.99999 19.9999C2.99999 19.7347 3.10535 19.4804 3.29289 19.2928C3.48042 19.1053 3.73478 18.9999 3.99999 18.9999C4.26521 18.9999 4.51956 18.8946 4.7071 18.707C4.89464 18.5195 4.99999 18.2652 4.99999 17.9999C4.99192 17.2863 5.23854 16.5931 5.69555 16.045C6.15256 15.4968 6.79002 15.1295 7.49347 15.0091C8.19692 14.8886 8.92027 15.0229 9.53363 15.3878C10.147 15.7527 10.6102 16.3243 10.84 16.9999C10.8972 17.1718 10.9999 17.3249 11.1373 17.4429C11.2747 17.5609 11.4415 17.6394 11.62 17.6699C12.0111 17.7347 12.3657 17.9381 12.6191 18.2429C12.8725 18.5478 13.0077 18.9336 13 19.3299C13 19.5492 12.9568 19.7664 12.8729 19.969C12.7889 20.1716 12.6659 20.3557 12.5109 20.5108C12.3558 20.6659 12.1717 20.7889 11.9691 20.8728C11.7665 20.9567 11.5493 20.9999 11.33 20.9999Z" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default Connection;
|
||||
11
packages/console/src/components/Sidebar/icons/Document.tsx
Normal file
11
packages/console/src/components/Sidebar/icons/Document.tsx
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
import React from 'react';
|
||||
|
||||
const Document = () => {
|
||||
return (
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M20 8.94C19.9896 8.84813 19.9695 8.75763 19.94 8.67V8.58C19.8919 8.47718 19.8278 8.38267 19.75 8.3L13.75 2.3C13.6673 2.22222 13.5728 2.15808 13.47 2.11H13.38C13.2784 2.05174 13.1662 2.01434 13.05 2H7C6.20435 2 5.44129 2.31607 4.87868 2.87868C4.31607 3.44129 4 4.20435 4 5V19C4 19.7956 4.31607 20.5587 4.87868 21.1213C5.44129 21.6839 6.20435 22 7 22H17C17.7956 22 18.5587 21.6839 19.1213 21.1213C19.6839 20.5587 20 19.7956 20 19V9C20 9 20 9 20 8.94ZM14 5.41L16.59 8H15C14.7348 8 14.4804 7.89464 14.2929 7.70711C14.1054 7.51957 14 7.26522 14 7V5.41ZM18 19C18 19.2652 17.8946 19.5196 17.7071 19.7071C17.5196 19.8946 17.2652 20 17 20H7C6.73478 20 6.48043 19.8946 6.29289 19.7071C6.10536 19.5196 6 19.2652 6 19V5C6 4.73478 6.10536 4.48043 6.29289 4.29289C6.48043 4.10536 6.73478 4 7 4H12V7C12 7.79565 12.3161 8.55871 12.8787 9.12132C13.4413 9.68393 14.2044 10 15 10H18V19Z" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default Document;
|
||||
11
packages/console/src/components/Sidebar/icons/Gear.tsx
Normal file
11
packages/console/src/components/Sidebar/icons/Gear.tsx
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
import React from 'react';
|
||||
|
||||
const Gear = () => {
|
||||
return (
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M21.32 9.55L19.43 8.92L20.32 7.14C20.4102 6.95369 20.4404 6.74397 20.4064 6.53978C20.3723 6.33558 20.2758 6.14699 20.13 6L18 3.87C17.8522 3.72209 17.6618 3.62421 17.4555 3.59013C17.2493 3.55605 17.0375 3.58748 16.85 3.68L15.07 4.57L14.44 2.68C14.3735 2.483 14.2472 2.31163 14.0787 2.18975C13.9102 2.06787 13.7079 2.00155 13.5 2H10.5C10.2904 1.99946 10.0858 2.06482 9.91537 2.18685C9.7449 2.30887 9.61709 2.48138 9.55 2.68L8.92 4.57L7.14 3.68C6.95369 3.58978 6.74397 3.55961 6.53978 3.59364C6.33558 3.62767 6.14699 3.72423 6 3.87L3.87 6C3.72209 6.14777 3.62421 6.33818 3.59013 6.54446C3.55605 6.75074 3.58748 6.96251 3.68 7.15L4.57 8.93L2.68 9.56C2.483 9.62654 2.31163 9.75283 2.18975 9.92131C2.06787 10.0898 2.00155 10.2921 2 10.5V13.5C1.99946 13.7096 2.06482 13.9142 2.18685 14.0846C2.30887 14.2551 2.48138 14.3829 2.68 14.45L4.57 15.08L3.68 16.86C3.58978 17.0463 3.55961 17.256 3.59364 17.4602C3.62767 17.6644 3.72423 17.853 3.87 18L6 20.13C6.14777 20.2779 6.33818 20.3758 6.54446 20.4099C6.75074 20.444 6.96251 20.4125 7.15 20.32L8.93 19.43L9.56 21.32C9.62709 21.5186 9.7549 21.6911 9.92537 21.8132C10.0958 21.9352 10.3004 22.0005 10.51 22H13.51C13.7196 22.0005 13.9242 21.9352 14.0946 21.8132C14.2651 21.6911 14.3929 21.5186 14.46 21.32L15.09 19.43L16.87 20.32C17.0551 20.4079 17.2628 20.4369 17.4649 20.4029C17.667 20.3689 17.8538 20.2737 18 20.13L20.13 18C20.2779 17.8522 20.3758 17.6618 20.4099 17.4555C20.444 17.2493 20.4125 17.0375 20.32 16.85L19.43 15.07L21.32 14.44C21.517 14.3735 21.6884 14.2472 21.8103 14.0787C21.9321 13.9102 21.9985 13.7079 22 13.5V10.5C22.0005 10.2904 21.9352 10.0858 21.8132 9.91537C21.6911 9.7449 21.5186 9.61709 21.32 9.55ZM20 12.78L18.8 13.18C18.5241 13.2695 18.2709 13.418 18.0581 13.6151C17.8452 13.8122 17.6778 14.0533 17.5675 14.3216C17.4571 14.5899 17.4064 14.879 17.419 15.1688C17.4315 15.4586 17.5069 15.7422 17.64 16L18.21 17.14L17.11 18.24L16 17.64C15.7436 17.5122 15.4627 17.4411 15.1763 17.4313C14.89 17.4215 14.6049 17.4734 14.3403 17.5834C14.0758 17.6934 13.8379 17.8589 13.6429 18.0688C13.4479 18.2787 13.3003 18.5281 13.21 18.8L12.81 20H11.22L10.82 18.8C10.7305 18.5241 10.582 18.2709 10.3849 18.0581C10.1878 17.8452 9.94671 17.6778 9.67842 17.5675C9.41014 17.4571 9.12105 17.4064 8.83123 17.419C8.5414 17.4315 8.25777 17.5069 8 17.64L6.86 18.21L5.76 17.11L6.36 16C6.4931 15.7422 6.56852 15.4586 6.58105 15.1688C6.59358 14.879 6.5429 14.5899 6.43254 14.3216C6.32218 14.0533 6.15478 13.8122 5.94195 13.6151C5.72912 13.418 5.47595 13.2695 5.2 13.18L4 12.78V11.22L5.2 10.82C5.47595 10.7305 5.72912 10.582 5.94195 10.3849C6.15478 10.1878 6.32218 9.94671 6.43254 9.67842C6.5429 9.41014 6.59358 9.12105 6.58105 8.83123C6.56852 8.5414 6.4931 8.25777 6.36 8L5.79 6.89L6.89 5.79L8 6.36C8.25777 6.4931 8.5414 6.56852 8.83123 6.58105C9.12105 6.59358 9.41014 6.5429 9.67842 6.43254C9.94671 6.32218 10.1878 6.15478 10.3849 5.94195C10.582 5.72912 10.7305 5.47595 10.82 5.2L11.22 4H12.78L13.18 5.2C13.2695 5.47595 13.418 5.72912 13.6151 5.94195C13.8122 6.15478 14.0533 6.32218 14.3216 6.43254C14.5899 6.5429 14.879 6.59358 15.1688 6.58105C15.4586 6.56852 15.7422 6.4931 16 6.36L17.14 5.79L18.24 6.89L17.64 8C17.5122 8.25645 17.4411 8.53735 17.4313 8.82369C17.4215 9.11003 17.4734 9.39513 17.5834 9.65969C17.6934 9.92424 17.8589 10.1621 18.0688 10.3571C18.2787 10.5521 18.5281 10.6997 18.8 10.79L20 11.19V12.78ZM12 8C11.2089 8 10.4355 8.2346 9.77772 8.67413C9.11993 9.11365 8.60724 9.73836 8.30448 10.4693C8.00173 11.2002 7.92252 12.0044 8.07686 12.7804C8.2312 13.5563 8.61217 14.269 9.17158 14.8284C9.73099 15.3878 10.4437 15.7688 11.2196 15.9231C11.9956 16.0775 12.7998 15.9983 13.5307 15.6955C14.2616 15.3928 14.8864 14.8801 15.3259 14.2223C15.7654 13.5645 16 12.7911 16 12C16 10.9391 15.5786 9.92172 14.8284 9.17158C14.0783 8.42143 13.0609 8 12 8ZM12 14C11.6044 14 11.2178 13.8827 10.8889 13.6629C10.56 13.4432 10.3036 13.1308 10.1522 12.7654C10.0009 12.3999 9.96126 11.9978 10.0384 11.6098C10.1156 11.2219 10.3061 10.8655 10.5858 10.5858C10.8655 10.3061 11.2219 10.1156 11.6098 10.0384C11.9978 9.96126 12.3999 10.0009 12.7654 10.1522C13.1308 10.3036 13.4432 10.56 13.6629 10.8889C13.8827 11.2178 14 11.6044 14 12C14 12.5304 13.7893 13.0391 13.4142 13.4142C13.0391 13.7893 12.5304 14 12 14Z" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default Gear;
|
||||
11
packages/console/src/components/Sidebar/icons/Help.tsx
Normal file
11
packages/console/src/components/Sidebar/icons/Help.tsx
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
import React from 'react';
|
||||
|
||||
const Help = () => {
|
||||
return (
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.29 15.29C11.247 15.3375 11.2069 15.3876 11.17 15.44C11.1322 15.4957 11.1019 15.5563 11.08 15.62C11.0512 15.6767 11.031 15.7374 11.02 15.8C11.0151 15.8666 11.0151 15.9334 11.02 16C11.0166 16.1312 11.044 16.2613 11.1 16.38C11.1449 16.5041 11.2166 16.6168 11.3099 16.7101C11.4032 16.8034 11.5159 16.8751 11.64 16.92C11.7597 16.9729 11.8891 17.0002 12.02 17.0002C12.1509 17.0002 12.2803 16.9729 12.4 16.92C12.5241 16.8751 12.6368 16.8034 12.7301 16.7101C12.8234 16.6168 12.8951 16.5041 12.94 16.38C12.9844 16.2584 13.0048 16.1294 13 16C13.0008 15.8684 12.9755 15.7379 12.9258 15.6161C12.876 15.4943 12.8027 15.3834 12.71 15.29C12.617 15.1963 12.5064 15.1219 12.3846 15.0711C12.2627 15.0203 12.132 14.9942 12 14.9942C11.868 14.9942 11.7373 15.0203 11.6154 15.0711C11.4936 15.1219 11.383 15.1963 11.29 15.29ZM12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17317C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8079C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7363 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2ZM12 20C10.4178 20 8.87104 19.5308 7.55544 18.6518C6.23985 17.7727 5.21447 16.5233 4.60897 15.0615C4.00347 13.5997 3.84504 11.9911 4.15372 10.4393C4.4624 8.88743 5.22433 7.46197 6.34315 6.34315C7.46197 5.22433 8.88743 4.4624 10.4393 4.15372C11.9911 3.84504 13.5997 4.00346 15.0615 4.60896C16.5233 5.21447 17.7727 6.23984 18.6518 7.55544C19.5308 8.87103 20 10.4177 20 12C20 14.1217 19.1572 16.1566 17.6569 17.6569C16.1566 19.1571 14.1217 20 12 20ZM12 7C11.4731 6.99966 10.9553 7.13812 10.4989 7.40144C10.0425 7.66476 9.66347 8.04366 9.4 8.5C9.32765 8.61382 9.27907 8.7411 9.25718 8.87418C9.23529 9.00726 9.24055 9.14339 9.27263 9.27439C9.30472 9.40538 9.36297 9.52854 9.44389 9.63643C9.52481 9.74433 9.62671 9.83475 9.74348 9.90224C9.86024 9.96974 9.98945 10.0129 10.1233 10.0292C10.2572 10.0454 10.393 10.0345 10.5225 9.99688C10.6521 9.9593 10.7727 9.89591 10.8771 9.81052C10.9814 9.72513 11.0675 9.6195 11.13 9.5C11.2181 9.3474 11.345 9.22078 11.4978 9.13298C11.6505 9.04518 11.8238 8.9993 12 9C12.2652 9 12.5196 9.10536 12.7071 9.29289C12.8946 9.48043 13 9.73478 13 10C13 10.2652 12.8946 10.5196 12.7071 10.7071C12.5196 10.8946 12.2652 11 12 11C11.7348 11 11.4804 11.1054 11.2929 11.2929C11.1054 11.4804 11 11.7348 11 12V13C11 13.2652 11.1054 13.5196 11.2929 13.7071C11.4804 13.8946 11.7348 14 12 14C12.2652 14 12.5196 13.8946 12.7071 13.7071C12.8946 13.5196 13 13.2652 13 13V12.82C13.6614 12.58 14.2174 12.1152 14.5708 11.5069C14.9242 10.8985 15.0525 10.1853 14.9334 9.49189C14.8143 8.79849 14.4552 8.16902 13.919 7.71352C13.3828 7.25801 12.7035 7.00546 12 7Z" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default Help;
|
||||
11
packages/console/src/components/Sidebar/icons/List.tsx
Normal file
11
packages/console/src/components/Sidebar/icons/List.tsx
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
import React from 'react';
|
||||
|
||||
const List = () => {
|
||||
return (
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.5 8H21.5C22.1 8 22.5 7.6 22.5 7C22.5 6.4 22.1 6 21.5 6H7.5C6.9 6 6.5 6.4 6.5 7C6.5 7.6 6.9 8 7.5 8ZM21.5 11H11.5C10.9 11 10.5 11.4 10.5 12C10.5 12.6 10.9 13 11.5 13H21.5C22.1 13 22.5 12.6 22.5 12C22.5 11.4 22.1 11 21.5 11ZM21.5 16H15.5C14.9 16 14.5 16.4 14.5 17C14.5 17.6 14.9 18 15.5 18H21.5C22.1 18 22.5 17.6 22.5 17C22.5 16.4 22.1 16 21.5 16ZM3.5 6C2.9 6 2.5 6.4 2.5 7C2.5 7.6 2.9 8 3.5 8C4.1 8 4.5 7.6 4.5 7C4.5 6.4 4.1 6 3.5 6ZM7.5 11C6.9 11 6.5 11.4 6.5 12C6.5 12.6 6.9 13 7.5 13C8.1 13 8.5 12.6 8.5 12C8.5 11.4 8.1 11 7.5 11ZM11.5 16C10.9 16 10.5 16.4 10.5 17C10.5 17.6 10.9 18 11.5 18C12.1 18 12.5 17.6 12.5 17C12.5 16.4 12.1 16 11.5 16Z" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default List;
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import React from 'react';
|
||||
|
||||
const UserProfile = () => {
|
||||
return (
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 2C10.0605 2.00369 8.16387 2.57131 6.54122 3.63374C4.91856 4.69617 3.63988 6.20754 2.86093 7.98377C2.08197 9.76 1.83636 11.7244 2.15401 13.6378C2.47166 15.5511 3.33887 17.3308 4.64999 18.76C5.58641 19.775 6.72293 20.5851 7.98793 21.1392C9.25292 21.6933 10.619 21.9793 12 21.9793C13.381 21.9793 14.7471 21.6933 16.012 21.1392C17.277 20.5851 18.4136 19.775 19.35 18.76C20.6611 17.3308 21.5283 15.5511 21.846 13.6378C22.1636 11.7244 21.918 9.76 21.139 7.98377C20.3601 6.20754 19.0814 4.69617 17.4588 3.63374C15.8361 2.57131 13.9395 2.00369 12 2ZM12 20C9.92845 19.9969 7.9389 19.1903 6.44999 17.75C6.90203 16.6495 7.67102 15.7083 8.65924 15.0459C9.64746 14.3835 10.8103 14.0298 12 14.0298C13.1897 14.0298 14.3525 14.3835 15.3407 15.0459C16.329 15.7083 17.0979 16.6495 17.55 17.75C16.0611 19.1903 14.0715 19.9969 12 20ZM9.99999 10C9.99999 9.60444 10.1173 9.21776 10.337 8.88886C10.5568 8.55996 10.8692 8.30362 11.2346 8.15224C11.6001 8.00087 12.0022 7.96126 12.3902 8.03843C12.7781 8.1156 13.1345 8.30608 13.4142 8.58579C13.6939 8.86549 13.8844 9.22186 13.9616 9.60982C14.0387 9.99778 13.9991 10.3999 13.8477 10.7654C13.6964 11.1308 13.44 11.4432 13.1111 11.6629C12.7822 11.8827 12.3955 12 12 12C11.4696 12 10.9608 11.7893 10.5858 11.4142C10.2107 11.0391 9.99999 10.5304 9.99999 10ZM18.91 16C18.0165 14.4718 16.6414 13.283 15 12.62C15.5092 12.0427 15.8409 11.3307 15.9555 10.5694C16.07 9.80822 15.9625 9.03011 15.6457 8.3285C15.329 7.62688 14.8166 7.03156 14.1699 6.61397C13.5232 6.19637 12.7698 5.97425 12 5.97425C11.2302 5.97425 10.4768 6.19637 9.83008 6.61397C9.1834 7.03156 8.67096 7.62688 8.35424 8.3285C8.03752 9.03011 7.92997 9.80822 8.04452 10.5694C8.15906 11.3307 8.49082 12.0427 8.99999 12.62C7.35859 13.283 5.98346 14.4718 5.08999 16C4.37793 14.7871 4.00171 13.4065 3.99999 12C3.99999 9.87827 4.84284 7.84344 6.34313 6.34315C7.84342 4.84285 9.87826 4 12 4C14.1217 4 16.1566 4.84285 17.6568 6.34315C19.1571 7.84344 20 9.87827 20 12C19.9983 13.4065 19.622 14.7871 18.91 16Z" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserProfile;
|
||||
11
packages/console/src/components/Sidebar/icons/Web.tsx
Normal file
11
packages/console/src/components/Sidebar/icons/Web.tsx
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
import React from 'react';
|
||||
|
||||
const Web = () => {
|
||||
return (
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10 5C9.80222 5 9.60888 5.05865 9.44443 5.16853C9.27998 5.27841 9.15181 5.43459 9.07612 5.61732C9.00043 5.80004 8.98063 6.00111 9.01921 6.19509C9.0578 6.38907 9.15304 6.56725 9.29289 6.70711C9.43275 6.84696 9.61093 6.9422 9.80491 6.98079C9.99889 7.01937 10.2 6.99957 10.3827 6.92388C10.5654 6.84819 10.7216 6.72002 10.8315 6.55557C10.9414 6.39112 11 6.19778 11 6C11 5.73478 10.8946 5.48043 10.7071 5.29289C10.5196 5.10536 10.2652 5 10 5ZM6 5C5.80222 5 5.60888 5.05865 5.44443 5.16853C5.27998 5.27841 5.15181 5.43459 5.07612 5.61732C5.00043 5.80004 4.98063 6.00111 5.01921 6.19509C5.0578 6.38907 5.15304 6.56725 5.29289 6.70711C5.43275 6.84696 5.61093 6.9422 5.80491 6.98079C5.99889 7.01937 6.19996 6.99957 6.38268 6.92388C6.56541 6.84819 6.72159 6.72002 6.83147 6.55557C6.94135 6.39112 7 6.19778 7 6C7 5.73478 6.89464 5.48043 6.70711 5.29289C6.51957 5.10536 6.26522 5 6 5ZM14 5C13.8022 5 13.6089 5.05865 13.4444 5.16853C13.28 5.27841 13.1518 5.43459 13.0761 5.61732C13.0004 5.80004 12.9806 6.00111 13.0192 6.19509C13.0578 6.38907 13.153 6.56725 13.2929 6.70711C13.4327 6.84696 13.6109 6.9422 13.8049 6.98079C13.9989 7.01937 14.2 6.99957 14.3827 6.92388C14.5654 6.84819 14.7216 6.72002 14.8315 6.55557C14.9414 6.39112 15 6.19778 15 6C15 5.73478 14.8946 5.48043 14.7071 5.29289C14.5196 5.10536 14.2652 5 14 5ZM20 1H4C3.20435 1 2.44129 1.31607 1.87868 1.87868C1.31607 2.44129 1 3.20435 1 4V20C1 20.7956 1.31607 21.5587 1.87868 22.1213C2.44129 22.6839 3.20435 23 4 23H20C20.7956 23 21.5587 22.6839 22.1213 22.1213C22.6839 21.5587 23 20.7956 23 20V4C23 3.20435 22.6839 2.44129 22.1213 1.87868C21.5587 1.31607 20.7956 1 20 1ZM21 20C21 20.2652 20.8946 20.5196 20.7071 20.7071C20.5196 20.8946 20.2652 21 20 21H4C3.73478 21 3.48043 20.8946 3.29289 20.7071C3.10536 20.5196 3 20.2652 3 20V11H21V20ZM21 9H3V4C3 3.73478 3.10536 3.48043 3.29289 3.29289C3.48043 3.10536 3.73478 3 4 3H20C20.2652 3 20.5196 3.10536 20.7071 3.29289C20.8946 3.48043 21 3.73478 21 4V9Z" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default Web;
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 }) => (
|
||||
<Section key={title} title={tSection(title)}>
|
||||
{items.map(({ title, Icon }) => (
|
||||
<Item key={title} title={tItem(title)} icon={<Icon />} />
|
||||
<Item
|
||||
key={title}
|
||||
title={tItem(title)}
|
||||
icon={<Icon />}
|
||||
isActive={title === 'api_resources'}
|
||||
/>
|
||||
))}
|
||||
</Section>
|
||||
))}
|
||||
<div className={styles.spacer} />
|
||||
<Item title={tItem('settings')} icon={<Gear />} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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: '设置',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in a new issue