Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-01-27 21:39:16 -05:00
Code Issues Activity

feat: add overlay scrollbar on sidebar and main content (#3764)

Browse source
This commit is contained in:
Charles Zhao 2023-04-28 10:07:25 +08:00 • committed by GitHub
parent 4b3c545c59
commit db4bc9e3ba
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 99 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
packages/console/src/containers/ConsoleContent/Sidebar/index.tsx
View file

@ -1,6 +1,8 @@
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { useLocation } from 'react-router-dom'; import { useLocation } from 'react-router-dom';
import OverlayScrollbar from '@/components/OverlayScrollbar';
import Item from './components/Item'; import Item from './components/Item';
import Section from './components/Section'; import Section from './components/Section';
import { useSidebarMenuItems } from './hook'; import { useSidebarMenuItems } from './hook';
@ -15,7 +17,7 @@ function Sidebar() {
const { sections } = useSidebarMenuItems(); const { sections } = useSidebarMenuItems();
return ( return (
<div className={styles.sidebar}> <OverlayScrollbar className={styles.sidebar}>
{sections.map(({ title, items }) => ( {sections.map(({ title, items }) => (
<Section key={title} title={t(title)}> <Section key={title} title={t(title)}>
{items.map( {items.map(
@ -33,7 +35,7 @@ function Sidebar() {
)} )}
</Section> </Section>
))} ))}
</div> </OverlayScrollbar>
); );
} }

10
packages/console/src/containers/ConsoleContent/index.module.scss
View file

@ -6,10 +6,14 @@
overflow: hidden; overflow: hidden;
} }
.main { .overlayScrollbarWrapper {
flex-grow: 1; flex-grow: 1;
padding: 0 _.unit(2); }
overflow-y: scroll;
.main {
width: 100%;
padding: 0 _.unit(6) 0 _.unit(2);
min-width: 636px;
> * { > * {
@include _.main-content-width; @include _.main-content-width;

3
packages/console/src/containers/ConsoleContent/index.tsx
View file

@ -1,5 +1,6 @@
import { Navigate, Route, Routes, useOutletContext } from 'react-router-dom'; import { Navigate, Route, Routes, useOutletContext } from 'react-router-dom';
import OverlayScrollbar from '@/components/OverlayScrollbar';
import { import {
ApiResourceDetailsTabs, ApiResourceDetailsTabs,
SignInExperiencePage, SignInExperiencePage,
@ -48,6 +49,7 @@ function ConsoleContent() {
return ( return (
<div className={styles.content}> <div className={styles.content}>
<Sidebar /> <Sidebar />
<OverlayScrollbar className={styles.overlayScrollbarWrapper}>
<div ref={scrollableContent} className={styles.main}> <div ref={scrollableContent} className={styles.main}>
<Routes> <Routes>
<Route path="*" element={<NotFound />} /> <Route path="*" element={<NotFound />} />
@ -116,6 +118,7 @@ function ConsoleContent() {
</Route> </Route>
</Routes> </Routes>
</div> </div>
</OverlayScrollbar>
</div> </div>
); );
} }

26
packages/console/src/scss/overlayscrollbars.scss
View file

@ -6,18 +6,28 @@
width: 12px; width: 12px;
padding: 8px 2px; padding: 8px 2px;
.os-scrollbar-handle {
> .os-scrollbar-track {
> .os-scrollbar-handle {
background: var(--color-neutral-variant-80);
min-height: 40px; min-height: 40px;
}
}
&:hover { &.os-scrollbar-horizontal {
height: 12px;
padding: 2px 8px;
.os-scrollbar-handle {
min-width: 40px;
}
}
}
&.os-theme-dark,
&.os-theme-light,
&.os-theme-dark.os-scrollbar:hover,
&.os-theme-light.os-scrollbar:hover {
.os-scrollbar-track .os-scrollbar-handle {
background: var(--color-neutral-variant-80); background: var(--color-neutral-variant-80);
} }
} }
} }
}
}
}
/* stylelint-enable selector-class-pattern */ /* stylelint-enable selector-class-pattern */