viewfinder/packages/base/src/layouts/LeftSidebarWithMenu.ts

import { css } from '@tesseract-design/goofy-goober';
import {LayoutArgs} from '../common';

export const ContentBase = () => css.cx(
  css`
    box-sizing: border-box;
    padding-bottom: var(--size-menu, 4rem);
  `,
  css.media('(min-width: 1080px)')(
    css`
      padding-left: calc(50% - var(--base-width) * 0.5);
      padding-bottom: 0;
    `,
  ),
)

export const SidebarBase = () => css.cx(
  css`
    box-sizing: border-box;
    overflow: hidden;
    display: contents;
    left: calc(var(--base-width) * -1);
  `,
  css.media('(min-width: 1080px)')(
    css`
      position: fixed;
      top: 0;
      left: 0;
      width: calc(50% - var(--base-width) * 0.5);
      height: 100%;
      display: block;
    `,
  ),
)

export const SidebarMain = ({
  mainSidebarOpen,
}: LayoutArgs) => css.cx(
  css`
    box-sizing: border-box;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    padding-top: inherit;
    padding-bottom: var(--size-menu, 4rem);
    z-index: 2;
    background-color: var(--color-background, white);
    > * {
      display: block;
      width: 100%;
      height: 100%;
      background-color: var(--color-background, white);
    }
  `,
  css.dynamic({
    right: mainSidebarOpen ? 0 : '100%',
  }),
  css.media('(min-width: 1080px)')(
    css`
      position: absolute;
      right: 0;
      width: calc(var(--base-width) - var(--size-menu, 4rem));
      margin-left: 0;
      padding-bottom: 0;
    `,
  ),
)

export const SidebarMainOverflow = () => css.cx(
  css`
    width: 100%;
    height: 100%;
    overflow: auto; /* overflow: overlay */
    scrollbar-width: none;
    position: relative;
    z-index: 1;
    ::-webkit-scrollbar {
      display: none;
    }
  `
)

export const SidebarMenu = () => css.cx(
  css`
    box-sizing: border-box;
    overflow: auto; /* overflow: overlay */
    scrollbar-width: none;
    ::-webkit-scrollbar {
      display: none;
    }
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--size-menu, 4rem);
    z-index: 1;
    background-color: var(--color-background, white);
    > * {
      display: block;
      width: 100%;
      height: 100%;
      background-color: var(--color-background, white);
    }
  `,
  css.media('(min-width: 1080px)')(
    css`
      top: 0;
      margin-left: auto;
      position: absolute;
      height: 100%;
      padding-top: inherit;
      overflow: auto;
      z-index: auto;
    `,
  ),
);

export const SidebarMenuSize = () => css.cx(
  css`
    display: flex;
    width: 100%;
    height: 100%;
    max-width: calc(var(--base-width) * 2);
    margin: 0 auto;
    position: relative;
    z-index: 1;
  `,
  css.media('(min-width: 1080px)')(
    css`
      max-width: none;
      margin-right: 0;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-end;
    `,
  ),
);

export const SidebarMenuGroup = () => css.cx(
  css`
    display: contents;
  `,
  css.media('(min-width: 1080px)')(
    css`
      width: 100%;
      display: block;
    `,
  ),
);

export const MoreItems = ({
  mainSidebarOpen,
}: LayoutArgs) => css.cx(
  css`
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    padding-top: var(--height-topbar, 4rem);
    padding-bottom: var(--size-menu, 4rem);
    z-index: -1;
    box-sizing: border-box;
  `,
  css.dynamic({
    left: mainSidebarOpen ? 0 : '-100%',
  }),
  css.media('(min-width: 1080px)')(
    css`
      display: contents;
    `,
  ),
);

export const MoreItemsScroll = () => css.cx(
  css`
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: var(--color-background, white);
  `,
  css.media('(min-width: 1080px)')(
    css`
      display: contents;
    `,
  ),
);

export const MorePrimarySidebarMenuGroup = () => css.cx(
  css.media('(min-width: 1080px)')(
    css`
      flex: auto;
    `,
  ),
);

export const MoreSecondarySidebarMenuGroup = () => css.cx(
  css.media('(min-width: 1080px)')(
    css`
      order: 4;
    `,
  ),
);

export const SidebarMenuItem = () => css.cx(
  css`
    width: 0;
    flex: auto;
    height: var(--size-menu, 4rem);
    > * {
      height: 100%;
      display: flex;
      align-items: center;
      text-decoration: none;
      width: 100%;
    }
  `,
  css.media('(min-width: 1080px)')(
    css`
      width: auto !important;
      flex: 0 1 auto;
      > * {
        height: auto;
      }
    `
  ),
);

export const MoreSidebarMenuItem = () => css.cx(
  css`
    height: var(--size-menu, 4rem);
    display: block;
    > * {
      height: 100%;
      display: flex;
      align-items: center;
      text-decoration: none;
      width: 100%;
    }
  `,
  css.media('(min-width: 1080px)')(
    css`
      width: auto !important;
      flex: 0 1 auto;
    `,
  ),
);

export const MoreToggleSidebarMenuItem = () => css.cx(
  css`
    width: 0;
    flex: auto;
    height: var(--size-menu, 4rem);
    > * {
      height: 100%;
      display: flex;
      align-items: center;
      text-decoration: none;
      width: 100%;
    }
  `,
  css.media('(min-width: 1080px)')(
    css`
      display: none;
    `,
  ),
);

export const SidebarMenuItemIcon = () => css.cx(
  css`
    display: block;
  `,
  css.media('(min-width: 1080px)')(
    css`
      width: var(--size-menu, 4rem);
      height: var(--size-menu, 4rem);
      display: grid;
      place-content: center;
    `,
  ),
);

export const MoreSidebarMenuItemIcon = () => css.cx(
  css`
    margin-right: 1rem;
    display: block;
  `,
  css.media('(min-width: 1080px)')(
    css`
      width: var(--size-menu, 4rem);
      height: var(--size-menu, 4rem);
      display: grid;
      place-content: center;
      margin-right: 0;
    `,
  ),
);

export const SidebarMenuContainer = () => css.cx(
  css`
    box-sizing: border-box;
    display: grid;
    place-content: center;
    width: 100%;
    text-align: center;
  `,
  css.media('(min-width: 1080px)')(
    css`
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-left: auto;
      padding-right: 1rem;
      text-align: left;
      box-sizing: border-box;
      width: var(--base-width);
    `,
  ),
)

export const MoreSidebarMenuContainer = () => css.cx(
  css`
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: calc(var(--base-width) * 2);
    margin: 0 auto;
    padding: 0 1rem;
    text-align: left;
    box-sizing: border-box;
  `,
  css.media('(min-width: 1080px)')(
    css`
      margin-right: 0;
      width: var(--base-width);
      padding-left: 0;
    `,
  ),
);

export const ContentContainer = () => css.cx(
  css`
    padding: 0 1rem;
    box-sizing: border-box;
    width: 100%;
    max-width: calc(var(--base-width) * 2);
    margin-right: auto;
    margin-left: auto;
  `,
  css.media('(min-width: 1080px)')(
    css`
      margin-left: 0;
    `,
  ),
);

export const SidebarMainContainer = () => css.cx(
  css`
    padding: 0 1rem;
    box-sizing: border-box;
    width: 100%;
    max-width: calc(var(--base-width) * 2);
    margin: 0 auto;
  `,
  css.media('(min-width: 1080px)')(
    css`
      max-width: none;
    `,
  ),
);