u
This commit is contained in:
@@ -27,6 +27,10 @@ class AppSidebar extends PureComponent {
|
|||||||
display: 'flex',
|
display: 'flex',
|
||||||
flexDirection: 'column',
|
flexDirection: 'column',
|
||||||
bgcolor: theme.nav.background,
|
bgcolor: theme.nav.background,
|
||||||
|
position: 'sticky',
|
||||||
|
top: 0,
|
||||||
|
alignSelf: 'flex-start',
|
||||||
|
height: '100vh',
|
||||||
})}
|
})}
|
||||||
>
|
>
|
||||||
<List disablePadding sx={{ flexGrow: 1 }}>
|
<List disablePadding sx={{ flexGrow: 1 }}>
|
||||||
@@ -107,6 +111,10 @@ class AppSubNav extends PureComponent {
|
|||||||
flexDirection: 'column',
|
flexDirection: 'column',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
gap: 1,
|
gap: 1,
|
||||||
|
position: 'sticky',
|
||||||
|
top: 0,
|
||||||
|
alignSelf: 'flex-start',
|
||||||
|
py: 4,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{subNav.map(({ segment, label, icon: Icon }) => {
|
{subNav.map(({ segment, label, icon: Icon }) => {
|
||||||
|
|||||||
@@ -16,12 +16,14 @@ import {
|
|||||||
DEFAULT_ARTICLE_TAB,
|
DEFAULT_ARTICLE_TAB,
|
||||||
artikelDetailPath,
|
artikelDetailPath,
|
||||||
articleShowsCompoundTab,
|
articleShowsCompoundTab,
|
||||||
|
articleSku,
|
||||||
articleTabFromPathname,
|
articleTabFromPathname,
|
||||||
readPreferredArticleTab,
|
readPreferredArticleTab,
|
||||||
resolveArticleTab,
|
resolveArticleTab,
|
||||||
writePreferredArticleTab,
|
writePreferredArticleTab,
|
||||||
} from '../../pages/artikel/articleRoute';
|
} from '../../pages/artikel/articleRoute';
|
||||||
import { router } from '../../appRouter';
|
import { router } from '../../appRouter';
|
||||||
|
import { matchPath } from 'react-router-dom';
|
||||||
import { PanelTile } from '../panels';
|
import { PanelTile } from '../panels';
|
||||||
import { PANEL_TILE_BORDER_RADIUS, responsiveColumnSpan } from '../panels/panelTileLayout';
|
import { PANEL_TILE_BORDER_RADIUS, responsiveColumnSpan } from '../panels/panelTileLayout';
|
||||||
import ArticleAttributesTab from './tabs/ArticleAttributesTab';
|
import ArticleAttributesTab from './tabs/ArticleAttributesTab';
|
||||||
@@ -77,6 +79,18 @@ function readRouteTab() {
|
|||||||
return articleTabFromPathname(router.state.location.pathname);
|
return articleTabFromPathname(router.state.location.pathname);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** True only while the URL is this article’s detail route. */
|
||||||
|
function isOnArticleDetail(article) {
|
||||||
|
const sku = articleSku(article);
|
||||||
|
if (!sku) return false;
|
||||||
|
const match = matchPath(
|
||||||
|
'/artikel/:sku/:tab?',
|
||||||
|
router.state.location.pathname,
|
||||||
|
);
|
||||||
|
if (!match?.params?.sku) return false;
|
||||||
|
return decodeURIComponent(match.params.sku) === sku;
|
||||||
|
}
|
||||||
|
|
||||||
class ArticleTileTab extends PureComponent {
|
class ArticleTileTab extends PureComponent {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
@@ -106,6 +120,7 @@ class ArticleTileTab extends PureComponent {
|
|||||||
}
|
}
|
||||||
|
|
||||||
syncTabFromRouter() {
|
syncTabFromRouter() {
|
||||||
|
if (!isOnArticleDetail(this.props.article)) return;
|
||||||
const tabParam = readRouteTab();
|
const tabParam = readRouteTab();
|
||||||
if (tabParam !== this.state.tabParam) {
|
if (tabParam !== this.state.tabParam) {
|
||||||
this.setState({ tabParam }, () => this.ensureValidTab());
|
this.setState({ tabParam }, () => this.ensureValidTab());
|
||||||
@@ -115,7 +130,7 @@ class ArticleTileTab extends PureComponent {
|
|||||||
ensureValidTab() {
|
ensureValidTab() {
|
||||||
const { article } = this.props;
|
const { article } = this.props;
|
||||||
const { tabParam } = this.state;
|
const { tabParam } = this.state;
|
||||||
if (!article) return;
|
if (!article || !isOnArticleDetail(article)) return;
|
||||||
const resolved = resolveArticleTab(tabParam, article);
|
const resolved = resolveArticleTab(tabParam, article);
|
||||||
if (tabParam !== resolved) {
|
if (tabParam !== resolved) {
|
||||||
void router.navigate(artikelDetailPath(article, resolved), { replace: true });
|
void router.navigate(artikelDetailPath(article, resolved), { replace: true });
|
||||||
|
|||||||
Reference in New Issue
Block a user