@servicetitan/navigation 3.0.0 → 3.2.0

package/dist/components/side-navigation/side-navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"side-navigation.js","sourceRoot":"","sources":["../../../src/components/side-navigation/side-navigation.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"side-navigation.js","sourceRoot":"","sources":["../../../src/components/side-navigation/side-navigation.tsx"],"names":[],"mappings":"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"}

package/dist/components/side-navigation/side-navigation.module.less

@@ -1,8 +1,11 @@
 /* stylelint-disable no-descending-specificity */
 @import (reference) '@servicetitan/tokens/core/tokens.less';
 
-@text-color: #383838;
-@border-color: #c5c5cb;
+@text-color: var(--colorsTextInverted, @color-white);
+@text-color-active: var(--colorsTextPrimarySubdued, @color-blue-300);
+@border-color: var(--colorsTextOnGrey, @color-neutral-200);
+@bg-color: var(--colorsSurfaceInvertedStrong, @color-neutral-400);
+@bg-color-hover: rgba(255, 255, 255, 0.12);
 
 .side-nav {
     display: flex;
@@ -14,20 +17,16 @@
     -o-transition: width 100ms ease-in-out;
     transition: width 100ms ease-in-out;
 
-    background-color: #ebebeb;
-    border-right: 1px solid @border-color;
+    background-color: @bg-color;
 
     .side-nav-bottom {
-        padding-left: 12px;
-        padding-right: 12px;
+        padding-left: @spacing-1;
+        padding-right: @spacing-1;
+        border-top: 1px solid @border-color;
 
         display: flex;
         flex-direction: column;
         justify-content: center;
-
-        .sideNavBottomDivider {
-            border-top: 1px solid @border-color;
-        }
     }
 
     &.side-nav-slim {
@@ -42,7 +41,7 @@
     }
 
     &.side-nav-expanded {
-        width: 240px;
+        width: 204px;
     }
 
     .side-nav-content {
@@ -50,16 +49,24 @@
         flex-direction: column;
         align-items: stretch;
         overflow-y: auto;
-        margin-top: @spacing-1;
-        margin-bottom: @spacing-1;
+        padding-top: @spacing-1;
+        padding-bottom: @spacing-1;
         flex-grow: 1;
         flex-basis: 0;
     }
+
+    .side-nav-top {
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        padding-top: @spacing-1;
+        padding-bottom: @spacing-1;
+    }
 }
 
 .navigation-item {
     font-family: @base-font-family;
-    color: #383838;
+    color: @text-color;
     position: relative;
     display: flex;
     justify-content: flex-start;
@@ -73,11 +80,12 @@
     border-radius: 12px;
 
     &.navigation-item-active {
-        background-color: @color-white;
+        background-color: rgba(2, 101, 220, 0.3);
+        color: @text-color-active;
     }
 
     &:hover:not(.navigation-item-active) {
-        opacity: 0.7;
+        background-color: @bg-color-hover;
     }
 
     .navigation-item-counter {
@@ -109,27 +117,28 @@
     flex-wrap: nowrap;
     text-wrap: nowrap;
     cursor: pointer;
-    height: 32px;
+    height: 40px;
 
     margin-top: @spacing-1;
     margin-bottom: @spacing-1;
     border-radius: 8px;
 
     &:hover {
-        background-color: @color-white;
+        background-color: @bg-color-hover;
     }
 
     .options-icon {
-        height: 18px;
-        width: 18px;
-        font-size: 18px;
-        padding-left: 7px;
+        height: 24px;
+        width: 24px;
+        font-size: 24px;
+        padding-left: @spacing-1;
+        padding-right: @spacing-1;
     }
 
     .options-item-text {
         font-family: @base-font-family;
         font-size: @typescale-3;
-        padding-left: @spacing-2;
+        padding-left: @spacing-1;
         flex: 1;
     }
 }
@@ -151,3 +160,9 @@
 .options-popover-item-active {
     border-radius: @border-radius-1;
 }
+
+.divider {
+    border-top: 1px solid @border-color;
+    margin-left: 12px;
+    margin-right: 12px;
+}

package/dist/components/side-navigation/side-navigation.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"side-navigation.stories.d.ts","sourceRoot":"","sources":["../../../src/components/side-navigation/side-navigation.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;;;;;;;AAYpD,wBAKE;AAkDF,eAAO,MAAM,qBAAqB,+CAyBjC,CAAC"}
+{"version":3,"file":"side-navigation.stories.d.ts","sourceRoot":"","sources":["../../../src/components/side-navigation/side-navigation.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;;;;;;;AAYpD,wBAKE;AAmDF,eAAO,MAAM,qBAAqB,+CA0BjC,CAAC"}

package/dist/components/side-navigation/side-navigation.stories.js

@@ -27,6 +27,7 @@ const items = {
     pointOfSale: getItem('pointOfSale', { iconName: 'cash-register' }),
     projects: getItem('projects', { iconName: 'folder_special' }),
     reports: getItem('reports', { iconName: 'poll' }),
+    tasks: getItem('tasks', { iconName: 'format_list_bulleted' }),
 };
 const NavLinkMock = props => (_jsx("a", { href: props.to, target: props.target, onClick: e => {
         e.preventDefault();
@@ -46,6 +47,6 @@ export const DefaultSideNavigation = () => {
             items.priceBook,
             items.pointOfSale,
             items.reports,
-        ] }));
+        ], itemsTop: [items.tasks] }));
 };
 //# sourceMappingURL=side-navigation.stories.js.map

package/dist/components/side-navigation/side-navigation.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"side-navigation.stories.js","sourceRoot":"","sources":["../../../src/components/side-navigation/side-navigation.stories.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"side-navigation.stories.js","sourceRoot":"","sources":["../../../src/components/side-navigation/side-navigation.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAE,cAAc,EAAE,MAAM,IAAI,CAAC;AAEpC,MAAM,MAAM,GAAG,CAAC,KAAoB,EAAE,EAAE;IACpC,OAAO,CACH,eAAK,SAAS,EAAC,YAAY,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,aAClD,KAAC,KAAK,KAAG,EACT,cAAK,SAAS,EAAC,0BAA0B,GAAG,IAC1C,CACT,CAAC;AACN,CAAC,CAAC;AACF,eAAe;IACX,KAAK,EAAE,2BAA2B;IAClC,SAAS,EAAE,cAAc;IACzB,UAAU,EAAE,CAAC,MAAM,CAAC;IACpB,UAAU,EAAE,EAAE;CACjB,CAAC;AAEF,MAAM,OAAO,GAAG,CACZ,EAAU,EACV,IAAuC,EACf,EAAE,CAAC,iBAC3B,EAAE,EACF,EAAE,EAAE,GAAG,EACP,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,EAC5C,IAAI,EAAE,EAAE,IACL,CAAC,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,EAAE,CAAC,EACjB,CAAC;AAEH,MAAM,aAAa,GAAG,GAAG,EAAE,CAAC,CACxB,eAAK,KAAK,EAAC,IAAI,EAAC,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,gBAAgB,EAAC,IAAI,EAAC,cAAc,aAC3F,mBAAU,MAAM,EAAC,yDAAyD,GAAG,EAC7E,eAAM,CAAC,EAAC,8TAA8T,GAAG,IACvU,CACT,CAAC;AAEF,MAAM,KAAK,GAAG;IACV,QAAQ,EAAE,OAAO,CAAC,UAAU,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpD,KAAK,EAAE,OAAO,CAAC,OAAO,EAAE,EAAE,QAAQ,EAAE,aAAa,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC;IACjF,SAAS,EAAE,OAAO,CAAC,WAAW,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC;IACzD,QAAQ,EAAE,OAAO,CAAC,UAAU,EAAE,EAAE,QAAQ,EAAE,mBAAmB,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;IAC5E,KAAK,EAAE,OAAO,CAAC,OAAO,EAAE,EAAE,QAAQ,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE,CAAC;IACtE,SAAS,EAAE,OAAO,CAAC,WAAW,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC;IAC1E,SAAS,EAAE,OAAO,CAAC,WAAW,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC;IACrD,UAAU,EAAE,OAAO,CAAC,YAAY,EAAE,EAAE,aAAa,EAAE,aAAa,EAAE,CAAC;IACnE,UAAU,EAAE,OAAO,CAAC,YAAY,EAAE,EAAE,QAAQ,EAAE,YAAY,EAAE,CAAC;IAC7D,SAAS,EAAE,OAAO,CAAC,WAAW,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC;IACzD,SAAS,EAAE,OAAO,CAAC,WAAW,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC;IACrD,WAAW,EAAE,OAAO,CAAC,aAAa,EAAE,EAAE,QAAQ,EAAE,eAAe,EAAE,CAAC;IAClE,QAAQ,EAAE,OAAO,CAAC,UAAU,EAAE,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAC;IAC7D,OAAO,EAAE,OAAO,CAAC,SAAS,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC;IACjD,KAAK,EAAE,OAAO,CAAC,OAAO,EAAE,EAAE,QAAQ,EAAE,sBAAsB,EAAE,CAAC;CAChE,CAAC;AAEF,MAAM,WAAW,GAA8B,KAAK,CAAC,EAAE,CAAC,CACpD,YACI,IAAI,EAAE,KAAK,CAAC,EAAE,EACd,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,OAAO,EAAE,CAAC,CAAC,EAAE;QACT,CAAC,CAAC,cAAc,EAAE,CAAC;IACvB,CAAC,EACD,SAAS,EAAE,KAAK,CAAC,SAAS,YAEzB,KAAK,CAAC,QAAQ,GACf,CACP,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,EAAE;IACtC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,OAAO,CACH,KAAC,cAAc,IACX,mBAAmB,EAAE,WAAW,EAChC,QAAQ,EAAE,QAAQ,EAClB,gBAAgB,EAAE,WAAW,EAC7B,KAAK,EAAE;YACH,KAAK,CAAC,SAAS;YACf,KAAK,CAAC,QAAQ;YACd,KAAK,CAAC,KAAK;YACX,KAAK,CAAC,UAAU;YAChB,KAAK,CAAC,QAAQ;YAEd,KAAK,CAAC,KAAK;YACX,KAAK,CAAC,SAAS;YACf,KAAK,CAAC,SAAS;YAEf,KAAK,CAAC,SAAS;YACf,KAAK,CAAC,SAAS;YACf,KAAK,CAAC,WAAW;YACjB,KAAK,CAAC,OAAO;SAChB,EACD,QAAQ,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,GACzB,CACL,CAAC;AACN,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/navigation",
-    "version": "3.0.0",
+    "version": "3.2.0",
     "description": "Navigation components",
     "repository": {
         "type": "git",
@@ -43,5 +43,5 @@
         "less": true,
         "webpack": false
     },
-    "gitHead": "7093c94176a1cf164fbb81e186123625abd87795"
+    "gitHead": "c6611950f796446028e741a2da684d98805dc8c1"
 }

package/src/components/header-navigation/header-navigation-tiny.stories.tsx

@@ -11,6 +11,13 @@ export default {
     title: 'Navigation/HeaderNavigationTiny',
     component: HeaderNavigationTiny,
     parameters: {},
+    decorators: [
+        (Story: any) => (
+            <div className="border" style={{ height: '500px' }}>
+                <Story />
+            </div>
+        ),
+    ],
 };
 
 const SearchIcon = () => (
@@ -24,7 +31,7 @@ const SearchIcon = () => (
         <g transform="translate(0,4)">
             <path
                 d="M0 15.7992V13.9992H12V15.7992H0ZM0 9.49922V7.69922H6V9.49922H0ZM0 3.19922V1.39922H6V3.19922H0ZM22.74 15.7992L17.94 10.9992C17.42 11.3992 16.86 11.6992 16.26 11.8992C15.66 12.0992 15.04 12.1992 14.4 12.1992C12.74 12.1992 11.325 11.6142 10.155 10.4442C8.985 9.27422 8.4 7.85922 8.4 6.19922C8.4 4.53922 8.985 3.12422 10.155 1.95422C11.325 0.784219 12.74 0.199219 14.4 0.199219C16.06 0.199219 17.475 0.784219 18.645 1.95422C19.815 3.12422 20.4 4.53922 20.4 6.19922C20.4 6.83922 20.3 7.45922 20.1 8.05922C19.9 8.65922 19.6 9.21922 19.2 9.73922L24 14.5392L22.74 15.7992ZM14.393 10.3992C15.5577 10.3992 16.55 9.99157 17.37 9.17627C18.19 8.36099 18.6 7.37099 18.6 6.20627C18.6 5.04157 18.1923 4.04922 17.377 3.22922C16.5618 2.40922 15.5718 1.99922 14.407 1.99922C13.2423 1.99922 12.25 2.40687 11.43 3.22217C10.61 4.03745 10.2 5.02745 10.2 6.19217C10.2 7.35687 10.6077 8.34922 11.423 9.16922C12.2382 9.98922 13.2282 10.3992 14.393 10.3992Z"
-                fill="white"
+                fill="currentColor"
             />
         </g>
     </svg>
@@ -45,33 +52,84 @@ const NavLinkMock: FC<NavLinkComponentProps> = props => (
 
 export const defaultNavigation = () => (
     <HeaderNavigationTiny
-        left={<LogoCompanyTitle className="m-l-1" fill="#fff" size="150" />}
+        className="border-bottom"
+        left={<LogoCompanyTitle className="m-l-1" size="150" />}
         leftClassName="d-f align-items-center"
         navigationComponent={NavLinkMock}
     />
 );
 
-export const withLogoTextAndOverflow = () => (
-    <HeaderNavigationTiny
-        left={
-            <Stack alignItems="center">
-                <LogoTitan mantleFill="#2270EE" size={48} />
-                <LogoTitanTitle className="c-white m-l-1">Commercial</LogoTitanTitle>
-            </Stack>
-        }
-        navigationComponent={NavLinkMock}
-    />
-);
-
 const TimeZoneOffset: FC = () => (
-    <div className="fs-2 ff-default p-r-2">
+    <div className="fs-2 ff-default p-r-1">
         <span>EST (-9 hrs)</span>
     </div>
 );
 
-export const withAllMonolithData = () => (
+export const WithAllMonolithData = () => (
+    <HeaderNavigationTiny
+        className="border-bottom"
+        left={<LogoCompanyTitle className="m-l-1" size="150" />}
+        leftClassName="d-f align-items-center"
+        navigationComponent={NavLinkMock}
+        right={
+            <Fragment>
+                <TimeZoneOffset />
+
+                <HeaderNavigationLink
+                    id="search"
+                    to="https://google.com"
+                    target="_blank"
+                    iconComponent={SearchIcon}
+                    hint="Search: for all the questions"
+                />
+
+                <HeaderNavigationTrigger id="dialpad" iconName="phone" counter={2} />
+
+                <HeaderNavigationTrigger
+                    id="titanAdvisor"
+                    iconName="rocket"
+                    iconClassName={Styles.rocketIcon}
+                />
+
+                <HeaderNavigationLink
+                    id="settings"
+                    to="https://google.com"
+                    target="_blank"
+                    iconName="settings"
+                    aria-label="search"
+                    hint="Settings"
+                    isActive
+                />
+
+                <ProfileDropdown>
+                    <ProfileDropdown.Link id="tasks" to="https://googgle.com" counter={10}>
+                        Task Management
+                    </ProfileDropdown.Link>
+                    <ProfileDropdown.Divider />
+                    <ProfileDropdown.Link id="sign-out" to="https://googgle.com">
+                        Sign Out{' '}
+                        <span className="c-neutral-100 m-l-half t-truncate">James Bond</span>
+                    </ProfileDropdown.Link>
+                    <ProfileDropdown.Section id="userid" className="c-neutral-100 fs-1">
+                        User ID: 007
+                    </ProfileDropdown.Section>
+                </ProfileDropdown>
+            </Fragment>
+        }
+        center={<Input placeholder="Search smth" size="xsmall" className="w-100" />}
+        centerClassName="d-f align-items-center"
+    />
+);
+
+export const WithAllMonolithDataCommercial = () => (
     <HeaderNavigationTiny
-        left={<LogoCompanyTitle className="m-l-1" fill="#fff" size="150" />}
+        className="border-bottom"
+        left={
+            <Stack alignItems="center">
+                <LogoTitan mantleFill="#2270EE" className="p-x-half" size={48} />
+                <LogoTitanTitle>Commercial</LogoTitanTitle>
+            </Stack>
+        }
         leftClassName="d-f align-items-center"
         navigationComponent={NavLinkMock}
         right={

package/src/components/header-navigation/header-navigation.module.less

@@ -34,11 +34,6 @@
         }
     }
 
-    .navigation-item-main {
-        // styles specific to main nav links
-        padding: 18px 12px;
-    }
-
     &.calculating {
         .center {
             opacity: 0;
@@ -52,11 +47,7 @@
 
     :global(.profile-dropdown-trigger) {
         height: 40px;
-    }
-
-    :global(.profile-dropdown-svg) {
-        height: 28px;
-        width: 28px;
+        font-size: 24px;
     }
 
     .navigation-item-counter {
@@ -72,9 +63,27 @@
         }
     }
 
-    .navigation-link .navigation-item-counter {
-        top: 8px;
-        right: -4px;
+    .navigation-link {
+        padding: @spacing-2 @spacing-1;
+
+        .navigation-item-counter {
+            top: 8px;
+            right: -4px;
+        }
+    }
+
+    .navigation-item-main {
+        // styles specific to main nav links
+        padding: 18px 10px;
+    }
+
+    .navigation-item {
+        &.navigation-item-active:not(.navigation-item-overflow) {
+            color: @color-blue-200 !important;
+        }
+        &:hover:not(.navigation-item-active):not(.navigation-item-overflow) {
+            opacity: 0.7;
+        }
     }
 }
 
@@ -144,11 +153,7 @@
 
     :global(.profile-dropdown-trigger) {
         height: 30px;
-    }
-
-    :global(.profile-dropdown-svg) {
-        height: 20px;
-        width: 20px;
+        font-size: @typescale-4;
     }
 
     .navigation-item-counter {
@@ -164,18 +169,39 @@
         }
     }
 
-    .navigation-link .navigation-item-counter {
-        top: 12px;
-        right: 0;
+    .navigation-link {
+        padding: 12px @spacing-1;
+
+        .navigation-item-counter {
+            top: 8px;
+            right: 0;
+        }
+    }
+
+    .navigation-item-main {
+        // styles specific to main nav links
+        padding: 7px 10px;
+    }
+
+    .navigation-item {
+        &.navigation-item-active:not(.navigation-item-overflow) {
+            color: @color-blue-200 !important;
+        }
+        &:hover:not(.navigation-item-active):not(.navigation-item-overflow) {
+            opacity: 0.7;
+        }
     }
 }
 
+@size-links-tiny: 24px;
+
 .header-tiny {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-template-rows: 48px;
 
-    background-color: @color-neutral-500;
+    background-color: @color-white;
+    color: @color-black;
 
     & > * {
         overflow-y: hidden;
@@ -193,13 +219,13 @@
         grid-column: span 1;
 
         .navigation-icon {
-            height: 20px;
-            width: 20px;
-            font-size: @typescale-4;
+            height: @size-links-tiny;
+            width: @size-links-tiny;
+            font-size: @size-links-tiny;
         }
 
         & > * {
-            color: @color-white;
+            color: @color-black;
         }
     }
 
@@ -210,20 +236,30 @@
 
     :global(.profile-dropdown-trigger) {
         height: 32px;
-    }
-
-    :global(.profile-dropdown-svg) {
-        height: 20px;
-        width: 20px;
+        font-size: @size-links-tiny;
     }
 
     .navigation-item-counter {
         font-size: 8px !important;
     }
 
-    .navigation-link .navigation-item-counter {
-        top: 12px;
-        right: 0;
+    .navigation-link {
+        margin: 6px 2px;
+        padding: 6px 6px;
+        border-radius: 12px;
+
+        &.navigation-item-active:not(.navigation-item-overflow) {
+            background-color: @color-blue-100 !important;
+            color: @color-blue-500 !important;
+        }
+        &:hover:not(.navigation-item-active):not(.navigation-item-overflow) {
+            background-color: rgba(0, 0, 0, 0.12) !important;
+        }
+
+        .navigation-item-counter {
+            top: 4px;
+            right: -2px;
+        }
     }
 }
 
@@ -241,17 +277,10 @@
     flex-wrap: nowrap;
     text-wrap: nowrap;
 
-    &.navigation-item-active:not(.navigation-item-overflow) {
-        color: @color-blue-200 !important;
-    }
-
-    &:hover:not(.navigation-item-active):not(.navigation-item-overflow) {
-        opacity: 0.7;
-    }
-
     .navigation-item-counter {
         color: @color-white;
         font-weight: @font-weight-semibold;
+        min-width: 12px;
     }
 
     &:not(.navigation-item-overflow) .navigation-item-counter {
@@ -265,11 +294,6 @@
     }
 }
 
-.navigation-item-main {
-    // styles specific to main nav links
-    padding: 6px 10px;
-}
-
 .navigation-item-overflow {
     // styles specific to overflow links
     display: inline-flex;
@@ -290,7 +314,3 @@
         margin-top: -@spacing-1;
     }
 }
-
-.navigation-link {
-    padding: 18px @spacing-1;
-}

package/src/components/layout.stories.tsx

@@ -0,0 +1,34 @@
+import {
+    WithAllMonolithData,
+    WithAllMonolithDataCommercial,
+} from './header-navigation/header-navigation-tiny.stories';
+import { DefaultSideNavigation } from './side-navigation/side-navigation.stories';
+
+export default {
+    title: 'Navigation/Layout',
+    parameters: {},
+};
+
+export const LeftNavLayout = () => {
+    return (
+        <div className="d-f border flex-column" style={{ height: '800px' }}>
+            <WithAllMonolithData />
+            <div className="flex-grow-1 flex-basis-0 d-f">
+                <DefaultSideNavigation />
+                <div className="flex-grow-1 flex-basis-0" />
+            </div>
+        </div>
+    );
+};
+
+export const LeftNavLayoutCommercial = () => {
+    return (
+        <div className="d-f border flex-column" style={{ height: '800px' }}>
+            <WithAllMonolithDataCommercial />
+            <div className="flex-grow-1 flex-basis-0 d-f">
+                <DefaultSideNavigation />
+                <div className="flex-grow-1 flex-basis-0" />
+            </div>
+        </div>
+    );
+};

package/src/components/logo/logo-company-title.tsx

@@ -3,7 +3,7 @@ import { FC } from 'react';
 /* tslint:disable: max-line-length */
 export const LogoCompanyTitle: FC<{ className?: string; fill?: string; size?: string }> = ({
     className,
-    fill,
+    fill = 'currentColor',
     size = '162',
 }) => {
     return (

package/src/components/profile-dropdown/profile-dropdown.tsx

@@ -24,7 +24,6 @@ export interface ProfileDropdownTriggerProps {
     avatarBadge?: boolean | string;
     badge?: { content?: number | string; className: string };
     hintArrow?: boolean;
-    size?: number;
     onClick?(e: MouseEvent): void;
 }
 
@@ -36,7 +35,6 @@ const ProfileDropdownTrigger: FC<ProfileDropdownTriggerProps> = ({
     imageSrc,
     info,
     onClick,
-    size,
 }) => {
     const [avatarSource, setAvatarSource] = useState(imageSrc ?? '');
     const [avatarSourceError, setAvatarSourceError] = useState(false);
@@ -77,7 +75,7 @@ const ProfileDropdownTrigger: FC<ProfileDropdownTriggerProps> = ({
                     alt="user dropdown menu"
                 />
             ) : (
-                <ProfileLogo size={size} />
+                <ProfileLogo />
             )}
 
             {!!info && (
@@ -95,7 +93,7 @@ const ProfileDropdownTrigger: FC<ProfileDropdownTriggerProps> = ({
                 </div>
             )}
 
-            <Icon className="m-l-half" name="expand_more" size={12} />
+            <Icon className="m-l-half d-f align-items-center" name="expand_more" size={12} />
 
             {!!avatarBadge && (
                 <div

package/src/components/profile-dropdown/profile-icon.tsx

@@ -1,12 +1,12 @@
 import { FC } from 'react';
 
-export const ProfileLogo: FC<{ size?: number }> = ({ size }) => (
+export const ProfileLogo: FC = () => (
     <svg
         className="profile-dropdown-svg"
         xmlns="http://www.w3.org/2000/svg"
         version="1.1"
-        width={size}
-        height={size}
+        width="1em"
+        height="1em"
         viewBox="0 0 256 256"
     >
         <g
@@ -29,7 +29,7 @@ export const ProfileLogo: FC<{ size?: number }> = ({ size }) => (
                 strokeLinecap="round"
                 strokeLinejoin="miter"
                 strokeMiterlimit="10"
-                fill="rgb(255,255,255)"
+                // fill="currentColor"
                 fillRule="nonzero"
                 opacity="1"
                 transform=" matrix(1 0 0 1 0 0) "
@@ -43,7 +43,7 @@ export const ProfileLogo: FC<{ size?: number }> = ({ size }) => (
                 strokeLinecap="round"
                 strokeLinejoin="miter"
                 strokeMiterlimit="10"
-                fill="rgb(255,255,255)"
+                fill="currentColor"
                 fillRule="nonzero"
                 opacity="1"
                 transform=" matrix(1 0 0 1 0 0) "