docs: publish restructure (#3496)
* docs: added features and guides overview page * added image * added version 2 * added version 3 * added version 4 * docs: implemented new color scheme * docs: redesigned sidebar (#3193) * docs: redesigned navbar for restructure (#3199) * docs: redesigned footer (#3209) * docs: redesigned cards (#3230) * docs: redesigned admonitions (#3231) * docs: redesign announcement bar (#3236) * docs: redesigned large cards (#3239) * docs: redesigned code blocks (#3253) * docs: redesigned search modal and page (#3264) * docs: redesigned doc footer (#3268) * docs: added new sidebars + refactored css and assets (#3279) * docs: redesigned api reference sidebar * docs: refactored css * docs: added code tabs transition * docs: added new sidebars * removed unused assets * remove unusued assets * Fix deploy errors * fix incorrect link * docs: fixed code responsivity + missing icons (#3283) * docs: changed icons (#3296) * docs: design fixes to the sidebar (#3297) * redesign fixes * docs: small design fixes * docs: several design fixes after restructure (#3299) * docs: bordered icon fixes * docs: desgin fixes * fixes to code blocks and sidebar scroll * design adjustments * docs: restructured homepage (#3305) * docs: restructured homepage * design fixes * fixed core concepts icon * docs: added core concepts page (#3318) * docs: restructured homepage * design fixes * docs: added core concepts page * changed text of different components * docs: added architecture link * added missing prop for user guide * docs: added regions overview page (#3327) * docs: added regions overview * moved region pages to new structure * docs: fixed description of regions architecture page * small changes * small fix * docs: added customers overview page (#3331) * docs: added regions overview * moved region pages to new structure * docs: fixed description of regions architecture page * small changes * small fix * docs: added customers overview page * fix link * resolve link issues * docs: updated regions architecture image * docs: second-iteration fixes (#3347) * docs: redesigned document * design fixes * docs: added products overview page (#3354) * docs: added carts overview page (#3363) * docs: added orders overview (#3364) * docs: added orders overview * added links in overview * docs: added vercel redirects * docs: added soon badge for cards (#3389) * docs: resolved feedback changes + organized troubleshooting pages (#3409) * docs: resolved feedback changes * added extra line * docs: changed icons for restructure (#3421) * docs: added taxes overview page (#3422) * docs: added taxes overview page * docs: fix sidebar label * added link to taxes overview page * fixed link * docs: fixed sidebar scroll (#3429) * docs: added discounts overview (#3432) * docs: added discounts overview * fixed links * docs: added gift cards overview (#3433) * docs: added price lists overview page (#3440) * docs: added price lists overview page * fixed links * docs: added sales channels overview page (#3441) * docs: added sales overview page * fixed links * docs: added users overview (#3443) * docs: fixed sidebar border height (#3444) * docs: fixed sidebar border height * fixed svg markup * docs: added possible solutions to feedback component (#3449) * docs: added several overview pages + restructured files (#3463) * docs: added several overview pages * fixed links * docs: added feature flags + PAK overview pages (#3464) * docs: added feature flags + PAK overview pages * fixed links * fix link * fix link * fixed links colors * docs: added strategies overview page (#3468) * docs: automated upgrade guide (#3470) * docs: automated upgrade guide * fixed vercel redirect * docs: restructured files in docs codebase (#3475) * docs: restructured files * docs: fixed eslint exception * docs: finished restructure loose-ends (#3493) * fixed uses of backend * docs: finished loose ends * eslint fixes * fixed links * merged master * added update instructions for v1.7.12
This commit is contained in:
Shahed Nasser
GitHub
@@ -1,15 +1,12 @@
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import clsx from 'clsx';
|
||||
import {useThemeConfig} from '@docusaurus/theme-common';
|
||||
import Logo from '@theme/Logo';
|
||||
import CollapseButton from '@theme/DocSidebar/Desktop/CollapseButton';
|
||||
import Content from '@theme/DocSidebar/Desktop/Content';
|
||||
import styles from './styles.module.css';
|
||||
import DocSidebarItem from '@theme/DocSidebarItem';
|
||||
import SearchBar from '../../SearchBar';
|
||||
import useIsBrowser from '@docusaurus/useIsBrowser';
|
||||
import AnnouncementBar from '@theme/AnnouncementBar';
|
||||
import {useWindowSize} from '@docusaurus/theme-common';
|
||||
import {useLocation} from '@docusaurus/router';
|
||||
|
||||
function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}) {
|
||||
const {
|
||||
@@ -17,27 +14,26 @@ function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}) {
|
||||
docs: {
|
||||
sidebar: {hideable},
|
||||
},
|
||||
sidebarFooter = [],
|
||||
} = useThemeConfig();
|
||||
const isBrowser = useIsBrowser()
|
||||
const sidebarRef = useRef(null)
|
||||
const windowSize = useWindowSize();
|
||||
const location = useLocation();
|
||||
|
||||
useEffect(() => {
|
||||
if (isBrowser && sidebarRef.current) {
|
||||
function handleScroll () {
|
||||
if (!sidebarRef.current.classList.contains('scrolling')) {
|
||||
sidebarRef.current.classList.add('scrolling');
|
||||
if (!sidebarRef.current?.classList.contains('scrolling')) {
|
||||
sidebarRef.current?.classList.add('scrolling');
|
||||
const intervalId = setInterval(() => {
|
||||
if (!sidebarRef.current.matches(':hover')) {
|
||||
sidebarRef.current.classList.remove('scrolling');
|
||||
if (!sidebarRef.current?.matches(':hover')) {
|
||||
sidebarRef.current?.classList.remove('scrolling');
|
||||
clearInterval(intervalId);
|
||||
}
|
||||
}, 300)
|
||||
}
|
||||
}
|
||||
|
||||
const navElement = sidebarRef.current.querySelector('nav');
|
||||
const navElement = sidebarRef.current.querySelector('.main-sidebar');
|
||||
navElement.addEventListener('scroll', handleScroll);
|
||||
|
||||
return () => {
|
||||
@@ -46,6 +42,42 @@ function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}) {
|
||||
}
|
||||
}, [isBrowser, sidebarRef.current])
|
||||
|
||||
useEffect(() => {
|
||||
const navElement = sidebarRef.current.querySelector('.main-sidebar'),
|
||||
navElementBoundingRect = navElement.getBoundingClientRect();
|
||||
|
||||
//logic to scroll to current active item
|
||||
const activeItem = document.querySelector('.sidebar-desktop [aria-current=page]'),
|
||||
activeItemBoundingReact = activeItem?.getBoundingClientRect(),
|
||||
//the extra 160 is due to the sticky elements in the sidebar
|
||||
isActiveItemVisible = activeItemBoundingReact.top >= 0 && activeItemBoundingReact.bottom + 160 <= navElementBoundingRect.height
|
||||
|
||||
// alert(isActiveItemVisible);
|
||||
|
||||
if (activeItem && !isActiveItemVisible) {
|
||||
//check if it has a parent list item element
|
||||
// let parentListItem = activeItem.parentElement
|
||||
|
||||
//search only to reach the main sidebar element
|
||||
// while (parentListItem && !parentListItem.classList.contains('sidebar-desktop')) {
|
||||
// if (parentListItem.classList.contains('menu__list-item')) {
|
||||
// break;
|
||||
// }
|
||||
|
||||
// parentListItem = parentListItem.parentElement
|
||||
// }
|
||||
|
||||
const elementToScrollTo = activeItem,
|
||||
elementBounding = elementToScrollTo.getBoundingClientRect()
|
||||
//scroll to element
|
||||
navElement.scroll({
|
||||
//the extra 160 is due to the sticky elements in the sidebar
|
||||
top: elementBounding.top - navElementBoundingRect.top + navElement.scrollTop - 160,
|
||||
behaviour: 'smooth'
|
||||
})
|
||||
}
|
||||
}, [location])
|
||||
|
||||
return (
|
||||
<div
|
||||
className={clsx(
|
||||
@@ -55,23 +87,8 @@ function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}) {
|
||||
isHidden && styles.sidebarHidden,
|
||||
)}
|
||||
ref={sidebarRef}>
|
||||
{hideOnScroll && <Logo tabIndex={-1} className={styles.sidebarLogo} />}
|
||||
<div className={styles.sidebarSearchContainer}>
|
||||
{windowSize !== 'mobile' && <SearchBar />}
|
||||
</div>
|
||||
<AnnouncementBar />
|
||||
<Content path={path} sidebar={sidebar} />
|
||||
{sidebarFooter.length > 0 && (
|
||||
<ul className={
|
||||
clsx(
|
||||
styles.sidebarFooterList
|
||||
)
|
||||
}>
|
||||
{sidebarFooter.map((item, index) => (
|
||||
<DocSidebarItem key={index} item={item} index={index} level={1} />
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
<Content path={path} sidebar={sidebar} className="main-sidebar" />
|
||||
{hideable && <CollapseButton onClick={onCollapse} />}
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user