Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2025-11-09 23:15:43 +01:00
Code Issues Packages Projects Releases Activity

use position sticky to avoid css glitches // cleanup

Browse Source
This commit is contained in:
Eduard Heimbuch
2020-03-10 10:45:37 +01:00
parent 2db6980098
commit 13799044bd
6 changed files with 193 additions and 215 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
scm-ui/ui-components/src/navigation/Section.tsx
View File

@@ -1,36 +1,31 @@
import React, { FC, ReactElement, ReactNode, useContext, useEffect, useState } from "react";
import React, { FC, ReactElement, ReactNode, useContext, useEffect } from "react";
import styled from "styled-components";
import SubNavigation from "./SubNavigation";
import { matchPath, useLocation } from "react-router-dom";
import { isMenuCollapsed, MenuContext } from "./MenuContext";
type Props = {
label: string;
children: ReactElement[];
collapsed: boolean;
onCollapse?: (newStatus: boolean) => void;
scrollTransitionAt?: number;
};
type CollapsedProps = {
collapsed: boolean;
};
type PositionProps = CollapsedProps & {
scrollPositionY: number;
scrollTransitionAt: number;
};
const SectionContainer = styled.div<PositionProps>`
position: ${props =>
props.scrollPositionY > props.scrollTransitionAt && window.innerWidth > 770 ? "fixed" : "inherit"};
top: ${props => props.scrollPositionY > props.scrollTransitionAt && window.innerWidth > 770 && "2rem"};
const SectionContainer = styled.aside<CollapsedProps>`
position: sticky;
position: -webkit-sticky; /* Safari */
top: 2rem;
width: ${props => (props.collapsed ? "5.5rem" : "20.5rem")};
`;
const Icon = styled.i<CollapsedProps>`
padding-left: ${(props: CollapsedProps) => (props.collapsed ? "0" : "0.5rem")}
padding-right: ${(props: CollapsedProps) => (props.collapsed ? "0" : "0.3rem")};
height: 1.5rem;
padding-left: ${(props: CollapsedProps) => (props.collapsed ? "0" : "0.5rem")};
padding-right: ${(props: CollapsedProps) => (props.collapsed ? "0" : "0.4rem")};
height: 1.5rem;
font-size: 24px;
margin-top: -0.75rem;
`;
@@ -40,8 +35,48 @@ const MenuLabel = styled.p<CollapsedProps>`
display: flex;
align-items: center;
justify-content: ${(props: CollapsedProps) => (props.collapsed ? "center" : "inherit")};
cursor: pointer;
`;
const Section: FC<Props> = ({ label, children, collapsed, onCollapse }) => {
const location = useLocation();
const menuContext = useContext(MenuContext);
const subNavActive = isSubNavigationActive(children, location.pathname);
const isCollapsed = collapsed && !subNavActive;
useEffect(() => {
if (isMenuCollapsed()) {
menuContext.setMenuCollapsed(!subNavActive);
}
}, [subNavActive]);
const childrenWithProps = React.Children.map(children, (child: ReactElement) =>
React.cloneElement(child, { collapsed: isCollapsed })
);
const arrowIcon = isCollapsed ? <i className="fas fa-caret-down" /> : <i className="fas fa-caret-right" />;
return (
<SectionContainer className="menu" collapsed={isCollapsed}>
<div>
<MenuLabel
className="menu-label"
collapsed={isCollapsed}
onClick={onCollapse && !subNavActive ? () => onCollapse(!isCollapsed) : undefined}
>
{onCollapse && !subNavActive && (
<Icon color="info" className="is-medium" collapsed={isCollapsed}>
{arrowIcon}
</Icon>
)}
{isCollapsed ? "" : label}
</MenuLabel>
<ul className="menu-list">{childrenWithProps}</ul>
</div>
</SectionContainer>
);
};
const createParentPath = (to: string) => {
const parents = to.split("/");
parents.splice(-1, 1);
@@ -72,47 +107,4 @@ const isSubNavigationActive = (children: ReactNode, url: string): boolean => {
return match != null;
};
const Section: FC<Props> = ({ label, children, collapsed = false, onCollapse, scrollTransitionAt }) => {
const [scrollPositionY, setScrollPositionY] = useState(0);
const location = useLocation();
useEffect(() => {
window.addEventListener("scroll", () => setScrollPositionY(window.pageYOffset));
return () => {
window.removeEventListener("scroll", () => setScrollPositionY(window.pageYOffset));
};
}, []);
const subNavActive = isSubNavigationActive(children, location.pathname);
const isCollapsed = collapsed && !subNavActive;
const childrenWithProps = React.Children.map(children, (child: ReactElement) =>
React.cloneElement(child, { collapsed: isCollapsed })
);
const arrowIcon = isCollapsed ? <i className="fas fa-caret-down" /> : <i className="fas fa-caret-right" />;
return (
<SectionContainer
collapsed={isCollapsed}
scrollPositionY={onCollapse ? scrollPositionY : 0}
scrollTransitionAt={scrollTransitionAt ? scrollTransitionAt : 250}
>
<MenuLabel
className="menu-label"
collapsed={isCollapsed}
onClick={onCollapse ? () => onCollapse(!isCollapsed) : undefined}
>
{onCollapse && !subNavActive && (
<Icon color="info" className="is-medium" collapsed={isCollapsed}>
{arrowIcon}
</Icon>
)}
{isCollapsed ? "" : label}
</MenuLabel>
<ul className="menu-list">{childrenWithProps}</ul>
</SectionContainer>
);
};
export default Section;