From 15496517f9f3d3d7e84015c024f68672128d18e9 Mon Sep 17 00:00:00 2001 From: Steven Straatemans Date: Fri, 1 Sep 2023 12:29:45 +0200 Subject: [PATCH] refactor the full layout --- .../docs/src/components/Layout/Full/Full.tsx | 35 ++--- .../Full/components/Aside/AsideLink.tsx | 21 ++- .../Full/components/Aside/AsideList.tsx | 22 +++ .../Full/components/Aside/AsideStyles.ts | 125 ------------------ .../Layout/Full/components/Aside/index.ts | 2 +- .../Full/components/Aside/styles.css.ts | 61 +++++++++ .../src/components/Layout/Full/styles.css.ts | 67 +++++++++- .../docs/src/components/Layout/Full/styles.ts | 17 --- .../components/Layout/Landing/styles.css.ts | 11 +- .../Layout/components/Header/Header.tsx | 2 +- 10 files changed, 182 insertions(+), 181 deletions(-) create mode 100644 packages/apps/docs/src/components/Layout/Full/components/Aside/AsideList.tsx delete mode 100644 packages/apps/docs/src/components/Layout/Full/components/Aside/AsideStyles.ts create mode 100644 packages/apps/docs/src/components/Layout/Full/components/Aside/styles.css.ts delete mode 100644 packages/apps/docs/src/components/Layout/Full/styles.ts diff --git a/packages/apps/docs/src/components/Layout/Full/Full.tsx b/packages/apps/docs/src/components/Layout/Full/Full.tsx index ba5616dab1..6d35d5ed3f 100644 --- a/packages/apps/docs/src/components/Layout/Full/Full.tsx +++ b/packages/apps/docs/src/components/Layout/Full/Full.tsx @@ -1,6 +1,6 @@ import { Heading } from '@kadena/react-ui'; -import { basebackgroundClass } from '../basestyles.css'; +import { basebackgroundClass, baseGridClass } from '../basestyles.css'; import { articleClass, contentClass, @@ -9,15 +9,14 @@ import { import { Template } from '../components/Template'; import { globalClass } from '../global.css'; +import { AsideList, ListItem } from './components/Aside'; import { - Aside, - AsideList, - ListItem, - StickyAside, - StickyAsideWrapper, -} from './components/Aside'; -import { PageGrid } from './styles'; -import { asidebackgroundClass } from './styles.css'; + asidebackgroundClass, + asideClass, + pageGridClass, + stickyAsideClass, + stickyAsideWrapperClass, +} from './styles.css'; import { BottomPageSection } from '@/components/BottomPageSection'; import { Breadcrumbs } from '@/components/Breadcrumbs'; @@ -84,8 +83,10 @@ export const Full: FC = ({ asidebackgroundClass, ); + const gridClassNames = classnames(globalClass, baseGridClass, pageGridClass); + return ( - +
- +
); }; diff --git a/packages/apps/docs/src/components/Layout/Full/components/Aside/AsideLink.tsx b/packages/apps/docs/src/components/Layout/Full/components/Aside/AsideLink.tsx index 401dd6d836..f9b7b09dfe 100644 --- a/packages/apps/docs/src/components/Layout/Full/components/Aside/AsideLink.tsx +++ b/packages/apps/docs/src/components/Layout/Full/components/Aside/AsideLink.tsx @@ -1,5 +1,11 @@ -import { AsideItem, AsideItemLink } from './AsideStyles'; +import { + asideItemClass, + asideItemLinkActiveVariants, + asideItemLinkClass, +} from './styles.css'; +import classNames from 'classnames'; +import Link from 'next/link'; import React, { FC, MouseEventHandler, ReactNode } from 'react'; interface IProps { @@ -17,12 +23,17 @@ export const AsideLink: FC = ({ isActive, onClick, }) => { + const linkClass = classNames( + asideItemLinkClass, + asideItemLinkActiveVariants[isActive ? 'true' : 'false'], + ); + return ( - - +
  • + {label} - + {children} - +
    • ); }; diff --git a/packages/apps/docs/src/components/Layout/Full/components/Aside/AsideList.tsx b/packages/apps/docs/src/components/Layout/Full/components/Aside/AsideList.tsx new file mode 100644 index 0000000000..e0525d2f9a --- /dev/null +++ b/packages/apps/docs/src/components/Layout/Full/components/Aside/AsideList.tsx @@ -0,0 +1,22 @@ +import { asideListClass, asideListInnerVariants } from './styles.css'; + +import classNames from 'classnames'; +import React, { FC, ReactNode } from 'react'; + +interface IProps { + children: ReactNode; + inner?: boolean; + ref?: React.MutableRefObject; +} + +export const AsideList: FC = ({ children, inner = false, ref }) => { + const classes = classNames( + asideListClass, + asideListInnerVariants[inner ? 'true' : 'false'], + ); + return ( +
      + {children} +
    + ); +}; diff --git a/packages/apps/docs/src/components/Layout/Full/components/Aside/AsideStyles.ts b/packages/apps/docs/src/components/Layout/Full/components/Aside/AsideStyles.ts deleted file mode 100644 index ed61dbab29..0000000000 --- a/packages/apps/docs/src/components/Layout/Full/components/Aside/AsideStyles.ts +++ /dev/null @@ -1,125 +0,0 @@ -import { styled, StyledComponent } from '@kadena/react-components'; - -import Link from 'next/link'; - -export const Aside: StyledComponent< - 'aside', - { - layout?: 'code' | 'default'; - isOpen?: boolean | 'true' | 'false' | undefined; - } -> = styled('aside', { - display: 'none', - gridArea: 'aside', - height: '100%', - width: '100%', - gridColumn: '4 / span 2', - gridRow: '2 / span 2', - - zIndex: '$sideMenu', - padding: '0 $4', - position: 'absolute', - transform: 'translateX(100vw)', - - '@md': { - display: 'block', - transform: 'translateX(0)', - }, - compoundVariants: [ - { - isOpen: true, - layout: 'code', - css: { - display: 'block', - transform: 'translateX(0)', - width: '100%', - }, - }, - ], - variants: { - layout: { - code: { - '@md': { - backgroundColor: 'initial', - }, - '@2xl': { - maxWidth: '$$asideMenuWidthCode', - }, - }, - default: {}, - }, - isOpen: { - true: {}, - false: {}, - }, - }, -}); - -export const AsideItem: StyledComponent<'li'> = styled('li', { - lineHeight: '$base', -}); - -export const AsideItemLink: StyledComponent< - typeof Link, - { isActive?: boolean | 'true' | 'false' } -> = styled(Link, { - textDecoration: 'none', - '&:hover': { - textDecoration: 'underline', - }, - - defaultVariants: { - isActive: false, - }, - variants: { - isActive: { - true: { - color: '$neutral6', - textDecoration: 'underline', - }, - false: { - color: '$primaryHighContrast', - }, - }, - }, -}); - -export const AsideList: StyledComponent< - 'ul', - { inner?: boolean | 'true' | 'false' | undefined } -> = styled('ul', { - listStyle: 'initial', - listStylePosition: 'outside', - margin: 0, - padding: '0', - - '& li::marker': { - color: '$primaryHighContrast', - fontWeight: '$bold', - display: 'inline-block', - width: '$4', - margin: '0 $1', - }, - - variants: { - inner: { - true: { - paddingLeft: '$4', - }, - false: {}, - }, - }, -}); - -export const StickyAsideWrapper: StyledComponent<'div'> = styled('div', { - position: 'sticky', - display: 'flex', - top: '$10', - paddingLeft: '$4', -}); - -export const StickyAside: StyledComponent<'div'> = styled('div', { - paddingTop: '$10', - height: 'calc(100vh - $20)', - overflowY: 'scroll', -}); diff --git a/packages/apps/docs/src/components/Layout/Full/components/Aside/index.ts b/packages/apps/docs/src/components/Layout/Full/components/Aside/index.ts index 6237bd8f29..428b7df070 100644 --- a/packages/apps/docs/src/components/Layout/Full/components/Aside/index.ts +++ b/packages/apps/docs/src/components/Layout/Full/components/Aside/index.ts @@ -1,3 +1,3 @@ export * from './AsideLink'; -export * from './AsideStyles'; +export * from './AsideList'; export * from './ListItem'; diff --git a/packages/apps/docs/src/components/Layout/Full/components/Aside/styles.css.ts b/packages/apps/docs/src/components/Layout/Full/components/Aside/styles.css.ts new file mode 100644 index 0000000000..771a544c4b --- /dev/null +++ b/packages/apps/docs/src/components/Layout/Full/components/Aside/styles.css.ts @@ -0,0 +1,61 @@ +import { sprinkles, vars } from '@kadena/react-ui/theme'; + +import { style, styleVariants } from '@vanilla-extract/css'; + +export const asideItemLinkClass = style([ + sprinkles({ + textDecoration: 'none', + }), + { + selectors: { + '&:hover': { + textDecoration: 'underline', + }, + }, + }, +]); + +export const asideItemLinkActiveVariants = styleVariants({ + true: { + color: vars.colors.$neutral6, + textDecoration: 'underline', + }, + false: { + color: vars.colors.$primaryHighContrast, + }, +}); + +export const asideItemClass = style([ + sprinkles({ + lineHeight: '$base', + }), + { + selectors: { + '&::marker': { + color: vars.colors.$primaryHighContrast, + fontWeight: vars.fontWeights.$bold, + display: 'inline-block', + width: vars.sizes.$4, + margin: `0 ${vars.sizes.$1}`, + }, + }, + }, +]); + +export const asideListClass = style([ + sprinkles({ + margin: 0, + padding: 0, + }), + { + listStyle: 'initial', + listStylePosition: 'outside', + }, +]); + +export const asideListInnerVariants = styleVariants({ + true: { + paddingLeft: vars.sizes.$4, + }, + false: {}, +}); diff --git a/packages/apps/docs/src/components/Layout/Full/styles.css.ts b/packages/apps/docs/src/components/Layout/Full/styles.css.ts index 12e89cf262..309b1fe7f9 100644 --- a/packages/apps/docs/src/components/Layout/Full/styles.css.ts +++ b/packages/apps/docs/src/components/Layout/Full/styles.css.ts @@ -1,13 +1,14 @@ import { breakpoints, sprinkles, vars } from '@kadena/react-ui/theme'; -import { $$pageWidth } from '../global.css'; +import { + $$asideMenuWidthLGDefault, + $$asideMenuWidthMDDefault, +} from '../basestyles.css'; +import { $$leftSideWidth, $$pageWidth, $$sideMenu } from '../global.css'; import { createVar, style } from '@vanilla-extract/css'; export const $$shadowWidth = createVar(); -export const $$asideMenuWidthCode = createVar(); -export const $$asideMenuWidthMDDefault = createVar(); -export const $$asideMenuWidthLGDefault = createVar(); export const asidebackgroundClass = style([ sprinkles({ @@ -17,9 +18,6 @@ export const asidebackgroundClass = style([ { vars: { [$$shadowWidth]: vars.sizes.$25, - [$$asideMenuWidthCode]: '400px', - [$$asideMenuWidthMDDefault]: '200px', - [$$asideMenuWidthLGDefault]: '300px', }, selectors: { @@ -59,3 +57,58 @@ export const asidebackgroundClass = style([ }, }, ]); + +export const pageGridClass = style({ + '@media': { + [`screen and ${breakpoints.md}`]: { + gridTemplateColumns: `1% ${$$leftSideWidth} minmax(auto, calc(${$$pageWidth} - ${$$leftSideWidth} - ${$$asideMenuWidthMDDefault})) ${$$asideMenuWidthMDDefault} 1%`, + }, + [`screen and ${breakpoints.xxl}`]: { + gridTemplateColumns: `auto ${$$leftSideWidth} minmax(auto, calc(${$$pageWidth} - ${$$leftSideWidth} - ${$$asideMenuWidthLGDefault})) ${$$asideMenuWidthLGDefault} auto`, + }, + }, +}); + +export const stickyAsideWrapperClass = style([ + sprinkles({ + position: 'sticky', + display: 'flex', + top: '$10', + paddingLeft: '$4', + }), +]); + +export const stickyAsideClass = style([ + sprinkles({ + paddingTop: '$10', + }), + { + overflowY: 'scroll', + height: 'calc(100vh - $20)', + }, +]); + +export const asideClass = style([ + sprinkles({ + display: 'none', + position: 'absolute', + height: '100%', + width: '100%', + paddingY: 0, + paddingX: '$4', + }), + { + gridArea: 'aside', + gridColumn: '4 / span 2', + gridRow: '2 / span 2', + zIndex: $$sideMenu, + transform: 'translateX(100vw)', + + '@media': { + [`screen and ${breakpoints.md}`]: { + display: 'block', + transform: 'translateX(0)', + }, + }, + }, +]); diff --git a/packages/apps/docs/src/components/Layout/Full/styles.ts b/packages/apps/docs/src/components/Layout/Full/styles.ts deleted file mode 100644 index 116cfc4137..0000000000 --- a/packages/apps/docs/src/components/Layout/Full/styles.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { styled, StyledComponent } from '@kadena/react-components'; - -import { BasePageGrid } from '../components'; - -export const PageGrid: StyledComponent = styled( - BasePageGrid, - { - '@md': { - gridTemplateColumns: - '1% $leftSideWidth minmax(auto, calc($pageWidth - $leftSideWidth - $$asideMenuWidthMDDefault)) $$asideMenuWidthMDDefault 1%', - }, - '@2xl': { - gridTemplateColumns: - 'auto $leftSideWidth minmax(auto, calc($pageWidth - $leftSideWidth - $$asideMenuWidthLGDefault)) $$asideMenuWidthLGDefault auto', - }, - }, -); diff --git a/packages/apps/docs/src/components/Layout/Landing/styles.css.ts b/packages/apps/docs/src/components/Layout/Landing/styles.css.ts index 4b58be2b70..3ed3392387 100644 --- a/packages/apps/docs/src/components/Layout/Landing/styles.css.ts +++ b/packages/apps/docs/src/components/Layout/Landing/styles.css.ts @@ -1,13 +1,8 @@ -import { breakpoints, sprinkles, vars } from '@kadena/react-ui/theme'; +import { breakpoints } from '@kadena/react-ui/theme'; -import { $$asideMenuWidthCode } from '../basestyles.css'; -import { - $$backgroundOverlayColor, - $$leftSideWidth, - $$pageWidth, -} from '../global.css'; +import { $$leftSideWidth, $$pageWidth } from '../global.css'; -import { createVar, style } from '@vanilla-extract/css'; +import { style } from '@vanilla-extract/css'; export const pageGridClass = style({ gridTemplateColumns: 'auto auto', diff --git a/packages/apps/docs/src/components/Layout/components/Header/Header.tsx b/packages/apps/docs/src/components/Layout/components/Header/Header.tsx index 270ef5c137..4d6bb9f812 100644 --- a/packages/apps/docs/src/components/Layout/components/Header/Header.tsx +++ b/packages/apps/docs/src/components/Layout/components/Header/Header.tsx @@ -36,7 +36,7 @@ interface IProps { export const Header: FC = ({ menuItems, layout = 'full' }) => { const { hasPath, listRef, backgroundRef } = useHeaderAnimation(); - const { toggleMenu, isMenuOpen, toggleAside, isAsideOpen } = useMenu(); + const { toggleMenu, isMenuOpen } = useMenu(); return (