@servicetitan/navigation 10.7.0 → 11.0.0-canary.237.0a4df1d.0

package/src/components/titan-layout/layout-sidebar-links.tsx

@@ -0,0 +1,72 @@
+import { FC, ReactElement } from 'react';
+import { getCounterTag } from '../../utils/side-nav';
+import { TitanLayoutSidebarLinkProps, TitanLayoutSidebarTriggerProps } from './interface';
+import { useTitanLayoutContext } from './layout-context';
+import {
+    InternalSideNavigationLink,
+    InternalSideNavigationTrigger,
+} from './layout-sidebar-links-internal';
+import { useNotificationsContext } from './notifications-context';
+
+const WrappedLink: FC<{
+    children: ReactElement<any>;
+    wrapper: NonNullable<TitanLayoutSidebarLinkProps['wrapper']>;
+}> = ({ children, wrapper: WrapperComponent }) => {
+    const { sidebar } = useTitanLayoutContext();
+    return <WrapperComponent context={sidebar}>{children}</WrapperComponent>;
+};
+
+/** Side Navigation menu link */
+export function TitanLayoutSidebarLink({ wrapper, ...props }: TitanLayoutSidebarLinkProps) {
+    const {
+        NavigationComponent,
+        breakpoint: { isMobile },
+    } = useTitanLayoutContext();
+    const { onNotificationsUpdate } = useNotificationsContext();
+    const tag = getCounterTag(props.counter, props.tag);
+
+    onNotificationsUpdate(props.id, !!tag);
+
+    const element = (
+        <InternalSideNavigationLink
+            {...props}
+            navigationComponent={NavigationComponent}
+            submenuExpanded={undefined}
+            dataPrefix="navigation-link"
+            tag={tag}
+        />
+    );
+
+    return wrapper && !isMobile ? <WrappedLink wrapper={wrapper}>{element}</WrappedLink> : element;
+}
+
+/** Side Navigation menu trigger */
+export function TitanLayoutSidebarTrigger({
+    wrapper,
+    onMobileClick,
+    onClick,
+    ...props
+}: TitanLayoutSidebarTriggerProps) {
+    const {
+        breakpoint: { isMobile },
+    } = useTitanLayoutContext();
+    const { onNotificationsUpdate } = useNotificationsContext();
+    const tag = getCounterTag(props.counter, props.tag);
+
+    onNotificationsUpdate(props.id, !!tag);
+
+    const element = (
+        <InternalSideNavigationTrigger
+            {...props}
+            submenuExpanded={undefined}
+            dataPrefix="navigation-trigger"
+            tag={tag}
+            onClick={isMobile && !!onMobileClick ? onMobileClick : onClick}
+        />
+    );
+    return wrapper && (!isMobile || !onMobileClick) ? (
+        <WrappedLink wrapper={wrapper}>{element}</WrappedLink>
+    ) : (
+        element
+    );
+}

package/src/components/titan-layout/layout-sidebar.module.less

@@ -0,0 +1,536 @@
+/* stylelint-disable no-descending-specificity */
+@import (reference) '@servicetitan/tokens/core/tokens.less';
+
+@text-color: var(--colorsTextInverted, @color-white);
+@text-color-active: var(--colorsTextPrimarySubdued, @color-blue-300);
+@border-color: var(--colorsTextOnGrey, @color-neutral-200);
+@bg-color: #0f1d26;
+@bg-color-hover: rgba(255, 255, 255, 0.08);
+@bg-color-active: rgba(120, 187, 250, 0.2);
+
+.nav {
+    background-color: @bg-color;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+}
+
+// mobile version
+.nav-drawer {
+    // display: none;
+    position: fixed;
+    max-width: 400px;
+    width: 0;
+    height: 100vh;
+    top: 0;
+    left: -100vh;
+    z-index: 991;
+
+    -webkit-transition: width 200ms ease-in-out;
+    -moz-transition: width 200ms ease-in-out;
+    -o-transition: width 200ms ease-in-out;
+    transition: width 200ms ease-in-out;
+
+    .nav-main {
+        padding-left: @spacing-2;
+        padding-right: @spacing-2;
+    }
+    .nav-close-wrapper {
+        display: flex;
+        justify-content: flex-end;
+        margin-right: -@spacing-2;
+
+        .nav-close {
+            padding-top: @spacing-2;
+            padding-left: @spacing-2;
+            padding-right: @spacing-2;
+            cursor: pointer;
+        }
+    }
+
+    .nav-item {
+        margin-bottom: @spacing-half;
+    }
+    .nav-top {
+        margin-bottom: @spacing-half;
+    }
+    .nav-bottom {
+        .divider {
+            margin-bottom: @spacing-half;
+        }
+    }
+
+    .submenu {
+        .submenu-item {
+            margin-bottom: @spacing-half;
+        }
+    }
+}
+
+.nav-drawer-backdrop {
+    position: fixed;
+    height: 100vh;
+    width: 100vw;
+    top: 0;
+    left: 0;
+    z-index: 991;
+    background-color: rgba(0, 0, 0, 0.5);
+}
+
+// mobile version opened
+.nav-drawer-opened {
+    display: flex;
+    width: 90vw;
+    left: 0;
+}
+
+@media only screen and (min-width: 361px) {
+    width: 85vw;
+}
+@media only screen and (min-width: 481px) {
+    width: 80vw;
+}
+
+// desktop version collapsed
+.nav-slim {
+    width: 64px;
+
+    .toggle {
+        width: 64px;
+        margin-top: @spacing-1;
+        margin-bottom: 12px;
+        display: flex;
+        justify-content: center;
+
+        .toggle-icon-wrapper {
+            padding-left: @spacing-half;
+            padding-right: @spacing-half;
+        }
+    }
+
+    .nav-item {
+        flex-direction: column;
+        width: 64px;
+        overflow-x: hidden;
+        padding-top: @spacing-1;
+
+        &:not(:first-child) {
+            margin-top: @spacing-half;
+        }
+
+        .nav-item-counter[data-anv][data-anv] {
+            position: absolute;
+            right: 0;
+            top: 4px;
+            z-index: auto;
+
+            &.nav-item-counter-long {
+                right: 2px;
+            }
+        }
+
+        .nav-item-icon-wrapper {
+            flex: 1;
+            padding: @spacing-half;
+        }
+
+        .nav-item-text-expanded {
+            display: none;
+        }
+        .nav-item-text-collapsed {
+            font-family: @base-font-family;
+            font-size: 11px;
+            line-height: 11px;
+            margin: 2px @spacing-half @spacing-0;
+            text-align: center;
+        }
+
+        .nav-item-text-collapsed.nav-item-text-small {
+            font-size: 10.5px;
+        }
+    }
+
+    .nav-top .divider {
+        margin-top: @spacing-1;
+    }
+}
+
+// desktop version expanded
+.nav-wide {
+    width: var(--nav-offset-left);
+
+    .nav-item {
+        margin-left: @spacing-1;
+        margin-right: @spacing-1;
+    }
+
+    .toggle {
+        .toggle-content {
+            margin: @spacing-2;
+
+            .toggle-icon-wrapper {
+                padding-left: @spacing-half;
+                padding-right: @spacing-half;
+            }
+
+            .toggle-text {
+                padding-left: @spacing-0 !important;
+            }
+        }
+    }
+
+    .nav-top .divider {
+        margin-top: @spacing-1;
+        margin-bottom: @spacing-1;
+    }
+
+    .nav-main {
+        padding-top: @spacing-1;
+    }
+}
+
+.nav-drawer,
+.nav-wide {
+    .nav-item {
+        flex-direction: row;
+
+        .nav-item-icon-wrapper {
+            flex: 1;
+            padding: @spacing-1 @spacing-half;
+        }
+
+        .nav-item-text-expanded {
+            font-family: @base-font-family;
+            font-size: @typescale-3;
+            padding-left: @spacing-1;
+            flex: 1;
+        }
+
+        .nav-item-text-collapsed {
+            display: none;
+        }
+
+        .nav-item-counter[data-anv][data-anv] {
+            margin-right: @spacing-1;
+            position: relative;
+            transform: unset;
+        }
+    }
+}
+.divider {
+    border-top: 1px solid @border-color;
+}
+
+.nav-main {
+    position: relative;
+    overflow-y: auto;
+    padding-bottom: @spacing-1;
+    flex-grow: 1;
+    flex-basis: 0;
+
+    &::-webkit-scrollbar {
+        width: 0;
+        height: 0;
+    }
+}
+
+.nav-top {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+}
+
+.nav-bottom {
+    display: flex;
+    flex-direction: column;
+}
+
+.nav-footer {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    background-color: @bg-color;
+
+    .toggle-wrapper {
+        display: block;
+
+        .toggle {
+            font-family: @base-font-family;
+            color: @text-color;
+            position: relative;
+            cursor: pointer;
+            outline: none;
+
+            &:hover {
+                .toggle-content {
+                    background-color: @bg-color-hover;
+                }
+            }
+
+            .toggle-content {
+                display: flex;
+                justify-content: flex-start;
+                align-items: center;
+                flex-wrap: nowrap;
+                text-wrap: nowrap;
+                height: 32px;
+
+                border-radius: @border-radius-2;
+            }
+
+            .toggle-icon-wrapper {
+                height: 24px;
+                width: 24px;
+
+                .toggle-icon[data-anv][data-anv] > svg {
+                    height: 24px;
+                    width: 24px;
+                    color: @text-color;
+                }
+            }
+
+            .toggle-text {
+                font-family: @base-font-family;
+                font-size: @typescale-3;
+                flex: 1;
+            }
+        }
+    }
+}
+
+.nav-item {
+    font-family: @base-font-family;
+    color: @text-color;
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    outline: none;
+    overflow: hidden;
+
+    .nav-item-icon-wrapper {
+        border-radius: @border-radius-2;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        flex-wrap: nowrap;
+        text-wrap: nowrap;
+        position: relative;
+    }
+
+    &.nav-item-active {
+        color: @text-color-active;
+
+        .nav-item-icon-wrapper {
+            background-color: @bg-color-active;
+        }
+    }
+
+    &.nav-item-icon-switch {
+        &.nav-item-active {
+            .nav-icon-inactive[data-anv][data-anv] {
+                display: none;
+            }
+            .nav-icon-active[data-anv][data-anv] {
+                display: block;
+            }
+        }
+        &:not(.nav-item-active) {
+            .nav-icon-inactive[data-anv][data-anv] {
+                display: block;
+            }
+            .nav-icon-active[data-anv][data-anv] {
+                display: none;
+            }
+        }
+    }
+
+    .nav-item-counter {
+        min-width: 12px !important;
+        min-height: 12px !important;
+    }
+
+    .nav-item-group-toggle-wrapper {
+        position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        .nav-item-group-toggle[data-anv][data-anv] {
+            color: inherit;
+            font-weight: @font-weight-semibold;
+        }
+
+        .nav-item-group-toggle-click {
+            position: absolute;
+            left: -@spacing-2;
+            right: -@spacing-half;
+            top: -@spacing-1;
+            bottom: -@spacing-1;
+        }
+    }
+
+    .nav-icon[data-anv][data-anv] {
+        height: 24px;
+        width: 24px;
+        color: inherit;
+
+        & > svg {
+            height: 24px;
+            width: 24px;
+        }
+    }
+}
+
+.nav-link {
+    cursor: pointer;
+
+    &:hover:not(.nav-item-active) .nav-item-icon-wrapper {
+        background-color: @bg-color-hover;
+    }
+}
+.nav-group-wrapper {
+    .nav-group-item {
+        position: relative;
+    }
+
+    .submenu-wrapper:not(.submenu-wrapper-collapsed) {
+        max-height: 2000px;
+        transition: max-height 0.7s ease-in-out;
+    }
+}
+
+.submenu-wrapper {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height unset;
+}
+
+.submenu {
+    margin-left: @spacing-3;
+
+    padding-left: @spacing-1;
+    padding-right: @spacing-1;
+    margin-bottom: @spacing-1;
+    position: relative;
+    font-family: @base-font-family;
+
+    .submenu-group-header[data-anv][data-anv] {
+        padding-top: @spacing-2;
+        padding-bottom: @spacing-half;
+    }
+    .submenu-group-header.submenu-group-header-empty[data-anv][data-anv] {
+        padding-top: @spacing-1;
+    }
+
+    .submenu-item {
+        padding: @spacing-1;
+    }
+
+    .submenu-link-active {
+        position: relative;
+    }
+
+    .submenu-link-active:before {
+        content: '';
+        position: absolute;
+        background-color: @text-color-active;
+        width: 3px;
+        top: @spacing-1;
+        bottom: @spacing-1;
+        left: -12px;
+    }
+
+    .submenu-item:before:not(.submenu-link-active) {
+        background-color: @bg-color-hover;
+    }
+
+    .divider + .divider {
+        display: none;
+    }
+
+    .divider:last-child {
+        display: none;
+    }
+
+    > *,
+    > *[data-anv][data-anv] {
+        border-left: 3px solid transparent;
+        padding-left: @spacing-1;
+    }
+
+    > *:last-child {
+        margin-bottom: @spacing-0;
+    }
+}
+
+.submenu-popover {
+    margin-left: -@spacing-1;
+    margin-right: -@spacing-1;
+    min-width: 240px;
+
+    .submenu-group-header[data-anv][data-anv] {
+        margin-top: @spacing-2;
+        padding-bottom: @spacing-half;
+    }
+
+    .submenu-group-header.submenu-group-header-empty[data-anv][data-anv] {
+        margin-top: @spacing-1;
+    }
+
+    .submenu-item {
+        padding-top: @spacing-1;
+        padding-bottom: @spacing-1;
+    }
+
+    .submenu-link-active {
+        background-color: @bg-color-active;
+    }
+    .submenu-link:hover:not(.submenu-link-active) {
+        background-color: @bg-color-hover;
+    }
+
+    > *,
+    > *[data-anv][data-anv] {
+        padding-left: @spacing-1;
+        padding-right: @spacing-1;
+    }
+}
+
+.submenu,
+.submenu-popover {
+    display: flex;
+    flex-direction: column;
+
+    .submenu-group-header[data-anv][data-anv] {
+        color: @color-neutral-70;
+    }
+
+    .submenu-item {
+        color: @text-color;
+        font-size: @typescale-2;
+        border-radius: @border-radius-2;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .submenu-link {
+        cursor: pointer;
+    }
+
+    .submenu-link-active {
+        color: @text-color-active;
+    }
+
+    .submenu-link-counter {
+        position: relative !important;
+        transform: unset !important;
+    }
+
+    .submenu-link:hover:not(.submenu-link-active) {
+        background-color: @bg-color-hover;
+    }
+}

package/src/components/titan-layout/layout-sidebar.module.less.d.ts

@@ -0,0 +1,49 @@
+export const __esModule: true;
+export const divider: string;
+export const nav: string;
+export const navBottom: string;
+export const navClose: string;
+export const navCloseWrapper: string;
+export const navDrawer: string;
+export const navDrawerBackdrop: string;
+export const navDrawerOpened: string;
+export const navFooter: string;
+export const navGroupItem: string;
+export const navGroupWrapper: string;
+export const navIcon: string;
+export const navIconActive: string;
+export const navIconInactive: string;
+export const navItem: string;
+export const navItemActive: string;
+export const navItemCounter: string;
+export const navItemCounterLong: string;
+export const navItemGroupToggle: string;
+export const navItemGroupToggleClick: string;
+export const navItemGroupToggleWrapper: string;
+export const navItemIconSwitch: string;
+export const navItemIconWrapper: string;
+export const navItemTextCollapsed: string;
+export const navItemTextExpanded: string;
+export const navItemTextSmall: string;
+export const navLink: string;
+export const navMain: string;
+export const navSlim: string;
+export const navTop: string;
+export const navWide: string;
+export const submenu: string;
+export const submenuGroupHeader: string;
+export const submenuGroupHeaderEmpty: string;
+export const submenuItem: string;
+export const submenuLink: string;
+export const submenuLinkActive: string;
+export const submenuLinkCounter: string;
+export const submenuPopover: string;
+export const submenuWrapper: string;
+export const submenuWrapperCollapsed: string;
+export const toggle: string;
+export const toggleContent: string;
+export const toggleIcon: string;
+export const toggleIconWrapper: string;
+export const toggleText: string;
+export const toggleWrapper: string;
+