diff --git a/frontend/__snapshots__/scenes-app-notebooks--recordings-playlist.png b/frontend/__snapshots__/scenes-app-notebooks--recordings-playlist.png index 73e674b602ceb..a2e37322148e6 100644 Binary files a/frontend/__snapshots__/scenes-app-notebooks--recordings-playlist.png and b/frontend/__snapshots__/scenes-app-notebooks--recordings-playlist.png differ diff --git a/frontend/src/layout/navigation/TopBar/TopBar.tsx b/frontend/src/layout/navigation/TopBar/TopBar.tsx index 4c51c2453ae40..b81bbed16648e 100644 --- a/frontend/src/layout/navigation/TopBar/TopBar.tsx +++ b/frontend/src/layout/navigation/TopBar/TopBar.tsx @@ -22,8 +22,14 @@ import ActivationSidebarToggle from 'lib/components/ActivationSidebar/Activation import { NotebookButton } from '~/layout/navigation/TopBar/NotebookButton' export function TopBar(): JSX.Element { - const { isSideBarShown, bareNav, mobileLayout, isCreateOrganizationModalShown, isCreateProjectModalShown } = - useValues(navigationLogic) + const { + isSideBarShown, + noSidebar, + minimalTopBar, + mobileLayout, + isCreateOrganizationModalShown, + isCreateProjectModalShown, + } = useValues(navigationLogic) const { toggleSideBarBase, toggleSideBarMobile, hideCreateOrganizationModal, hideCreateProjectModal } = useActions(navigationLogic) const { isInviteModalShown } = useValues(inviteLogic) @@ -55,7 +61,7 @@ export function TopBar(): JSX.Element {
- {!bareNav && ( + {!noSidebar && (
(mobileLayout ? toggleSideBarMobile() : toggleSideBarBase())} @@ -66,15 +72,25 @@ export function TopBar(): JSX.Element { - -
- -
- + {!minimalTopBar && ( + <> +
+ +
+ + + )}
- {hasNotebooks && } - + {!minimalTopBar && ( + <> + {hasNotebooks && } + + + )}
diff --git a/frontend/src/layout/navigation/navigationLogic.ts b/frontend/src/layout/navigation/navigationLogic.ts index 6974ac22d4c7f..6042b54565561 100644 --- a/frontend/src/layout/navigation/navigationLogic.ts +++ b/frontend/src/layout/navigation/navigationLogic.ts @@ -8,6 +8,7 @@ import { userLogic } from 'scenes/userLogic' import type { navigationLogicType } from './navigationLogicType' import { membersLogic } from 'scenes/organization/Settings/membersLogic' import { eventUsageLogic } from 'lib/utils/eventUsageLogic' +import { Scene } from 'scenes/sceneTypes' export type ProjectNoticeVariant = | 'demo_project' @@ -19,7 +20,7 @@ export type ProjectNoticeVariant = export const navigationLogic = kea({ path: ['layout', 'navigation', 'navigationLogic'], connect: { - values: [sceneLogic, ['sceneConfig'], membersLogic, ['members', 'membersLoading']], + values: [sceneLogic, ['sceneConfig', 'activeScene'], membersLogic, ['members', 'membersLoading']], actions: [eventUsageLogic, ['reportProjectNoticeDismissed']], }, actions: { @@ -117,20 +118,27 @@ export const navigationLogic = kea({ mobileLayout: (window) => window.innerWidth < 992, // Sync width threshold with Sass variable $lg! }), selectors: { - /** `bareNav` whether the current scene should display a sidebar at all */ - bareNav: [ + /** `noSidebar` whether the current scene should display a sidebar at all */ + noSidebar: [ (s) => [s.fullscreen, s.sceneConfig], (fullscreen, sceneConfig) => fullscreen || sceneConfig?.layout === 'plain', ], + minimalTopBar: [ + (s) => [s.activeScene], + (activeScene) => { + const minimalTopBarScenes = [Scene.Products, Scene.Onboarding] + return activeScene && minimalTopBarScenes.includes(activeScene) + }, + ], isSideBarShown: [ - (s) => [s.mobileLayout, s.isSideBarShownBase, s.isSideBarShownMobile, s.bareNav], - (mobileLayout, isSideBarShownBase, isSideBarShownMobile, bareNav) => - !bareNav && (mobileLayout ? isSideBarShownMobile : isSideBarShownBase), + (s) => [s.mobileLayout, s.isSideBarShownBase, s.isSideBarShownMobile, s.noSidebar], + (mobileLayout, isSideBarShownBase, isSideBarShownMobile, noSidebar) => + !noSidebar && (mobileLayout ? isSideBarShownMobile : isSideBarShownBase), ], isActivationSideBarShown: [ - (s) => [s.mobileLayout, s.isActivationSideBarShownBase, s.isSideBarShownMobile, s.bareNav], - (mobileLayout, isActivationSideBarShownBase, isSideBarShownMobile, bareNav) => - !bareNav && + (s) => [s.mobileLayout, s.isActivationSideBarShownBase, s.isSideBarShownMobile, s.noSidebar], + (mobileLayout, isActivationSideBarShownBase, isSideBarShownMobile, noSidebar) => + !noSidebar && (mobileLayout ? isActivationSideBarShownBase && !isSideBarShownMobile : isActivationSideBarShownBase), ], systemStatus: [