Skip to content

feat(core): update nav to work better on mobile and when collapsed #66313

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 24 commits into from
Apr 18, 2024
Merged

feat(core): update nav to work better on mobile and when collapsed #66313

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
425ac25
wip
DominikB2014 Mar 5, 2024
7d39207
wip
DominikB2014 Mar 13, 2024
a8d9145
wip
DominikB2014 Mar 22, 2024
11c8d51
add animation
DominikB2014 Mar 25, 2024
cda27c8
Merge remote-tracking branch 'origin/master' into DominikB2014/update…
DominikB2014 Mar 25, 2024
dfcee61
fix title menu thing
DominikB2014 Mar 25, 2024
f2bfe95
add box shadow in mobile
DominikB2014 Mar 25, 2024
f8c96cc
update api
DominikB2014 Apr 5, 2024
a630e98
Merge remote-tracking branch 'origin/master' into DominikB2014/update…
DominikB2014 Apr 5, 2024
2939bbc
code review
DominikB2014 Apr 5, 2024
eab43d8
fix button retriggers annimation
DominikB2014 Apr 8, 2024
06480fb
add basic tests
DominikB2014 Apr 8, 2024
8eee893
Merge branch 'master' into DominikB2014/update-nav-bar
DominikB2014 Apr 9, 2024
b86af15
:hammer_and_wrench: apply pre-commit fixes
getsantry[bot] Apr 9, 2024
1e564d0
Merge remote-tracking branch 'origin/master' into DominikB2014/update…
DominikB2014 Apr 12, 2024
7572f1e
update
DominikB2014 Apr 12, 2024
d4ab2c1
:hammer_and_wrench: apply eslint style fixes
getsantry[bot] Apr 12, 2024
468af96
Merge remote-tracking branch 'origin/master' into DominikB2014/update…
DominikB2014 Apr 16, 2024
aecf9be
update to new mocks
DominikB2014 Apr 16, 2024
9ed0399
updated to use overlay component
DominikB2014 Apr 16, 2024
972fffd
remove unneded css
DominikB2014 Apr 16, 2024
ac2e56b
change padding to match other areas of sentry
DominikB2014 Apr 17, 2024
7e2257c
match height
DominikB2014 Apr 17, 2024
802a53d
update hover
DominikB2014 Apr 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
264 changes: 140 additions & 124 deletions static/app/components/sidebar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ import Broadcasts from './broadcasts';
import SidebarHelp from './help';
import OnboardingStatus from './onboardingStatus';
import ServiceIncidents from './serviceIncidents';
import {SidebarAccordion} from './sidebarAccordion';
import {ExpandedContextProvider, SidebarAccordion} from './sidebarAccordion';
import SidebarDropdown from './sidebarDropdown';
import SidebarItem from './sidebarItem';
import type {SidebarOrientation} from './types';
Expand Down Expand Up @@ -182,6 +182,15 @@ function Sidebar() {
organization,
};

const isFloatingSidebar = horizontal || collapsed;

const nestedSidebarItemProps = {
...sidebarItemProps,
isNested: true,
isFloatingSidebar,
orientation: 'left' as SidebarOrientation,
};

const sidebarAnchor = isDemoWalkthrough() ? (
<GuideAnchor target="projects" disabled={!DemoWalkthroughStore.get('sidebar')}>
{t('Projects')}
Expand Down Expand Up @@ -249,10 +258,11 @@ function Sidebar() {
label={<GuideAnchor target="performance">{t('Performance')}</GuideAnchor>}
to={`/organizations/${organization.slug}/performance/`}
id="performance"
exact={!isFloatingSidebar}
>
<Feature features="performance-database-view" organization={organization}>
<SidebarItem
{...sidebarItemProps}
{...nestedSidebarItemProps}
label={
<GuideAnchor target="performance-database">
{t('Queries')}
Expand All @@ -267,7 +277,7 @@ function Sidebar() {
</Feature>
<Feature features="performance-http-view" organization={organization}>
<SidebarItem
{...sidebarItemProps}
{...nestedSidebarItemProps}
label={<GuideAnchor target="performance-http">{t('HTTP')}</GuideAnchor>}
to={`/organizations/${organization.slug}/performance/http/`}
id="performance-http"
Expand All @@ -277,7 +287,7 @@ function Sidebar() {
</Feature>
<Feature features="starfish-browser-webvitals" organization={organization}>
<SidebarItem
{...sidebarItemProps}
{...nestedSidebarItemProps}
label={
<GuideAnchor target="performance-webvitals">
{t('Web Vitals')}
Expand All @@ -290,7 +300,7 @@ function Sidebar() {
</Feature>
<Feature features="performance-screens-view" organization={organization}>
<SidebarItem
{...sidebarItemProps}
{...nestedSidebarItemProps}
label={t('Screen Loads')}
to={`/organizations/${organization.slug}/performance/mobile/screens/`}
id="performance-mobile-screens"
Expand All @@ -299,7 +309,7 @@ function Sidebar() {
</Feature>
<Feature features="starfish-mobile-appstart" organization={organization}>
<SidebarItem
{...sidebarItemProps}
{...nestedSidebarItemProps}
label={t('App Starts')}
to={`/organizations/${organization.slug}/performance/mobile/app-startup`}
id="performance-mobile-app-startup"
Expand All @@ -309,7 +319,7 @@ function Sidebar() {
</Feature>
<Feature features="starfish-browser-resource-module-ui">
<SidebarItem
{...sidebarItemProps}
{...nestedSidebarItemProps}
label={<GuideAnchor target="starfish">{t('Resources')}</GuideAnchor>}
to={`/organizations/${organization.slug}/performance/browser/resources`}
id="performance-browser-resources"
Expand Down Expand Up @@ -347,10 +357,10 @@ function Sidebar() {
label={<GuideAnchor target="starfish">{t('Starfish')}</GuideAnchor>}
to={`/organizations/${organization.slug}/starfish/`}
id="starfish"
exact
exact={!isFloatingSidebar}
>
<SidebarItem
{...sidebarItemProps}
{...nestedSidebarItemProps}
label={<GuideAnchor target="starfish">{t('Interactions')}</GuideAnchor>}
to={`/organizations/${organization.slug}/performance/browser/interactions`}
id="performance-browser-interactions"
Expand Down Expand Up @@ -512,137 +522,143 @@ function Sidebar() {

return (
<SidebarWrapper aria-label={t('Primary Navigation')} collapsed={collapsed}>
<SidebarSectionGroupPrimary>
<DropdownSidebarSection isSuperuser={showSuperuserWarning() && !isExcludedOrg()}>
<SidebarDropdown orientation={orientation} collapsed={collapsed} />

{showSuperuserWarning() && !isExcludedOrg() && (
<Hook name="component:superuser-warning" organization={organization} />
)}
</DropdownSidebarSection>

<PrimaryItems>
{hasOrganization && (
<Fragment>
<SidebarSection>
{issues}
{projects}
</SidebarSection>

<SidebarSection>
{performance}
{starfish}
{profiling}
{metrics}
{replays}
{feedback}
{monitors}
{alerts}
</SidebarSection>

<SidebarSection>
{discover2}
{dashboards}
{releases}
{userFeedback}
</SidebarSection>

<SidebarSection>
{stats}
{settings}
</SidebarSection>
</Fragment>
)}
</PrimaryItems>
</SidebarSectionGroupPrimary>

{hasOrganization && (
<SidebarSectionGroup>
<PerformanceOnboardingSidebar
currentPanel={activePanel}
onShowPanel={() => togglePanel(SidebarPanelKey.PERFORMANCE_ONBOARDING)}
hidePanel={() => hidePanel('performance-sidequest')}
{...sidebarItemProps}
/>
<FeedbackOnboardingSidebar
currentPanel={activePanel}
onShowPanel={() => togglePanel(SidebarPanelKey.FEEDBACK_ONBOARDING)}
hidePanel={hidePanel}
{...sidebarItemProps}
/>
<ReplaysOnboardingSidebar
currentPanel={activePanel}
onShowPanel={() => togglePanel(SidebarPanelKey.REPLAYS_ONBOARDING)}
hidePanel={hidePanel}
{...sidebarItemProps}
/>
<ProfilingOnboardingSidebar
currentPanel={activePanel}
onShowPanel={() => togglePanel(SidebarPanelKey.PROFILING_ONBOARDING)}
hidePanel={hidePanel}
{...sidebarItemProps}
/>
<MetricsOnboardingSidebar
currentPanel={activePanel}
onShowPanel={() => togglePanel(SidebarPanelKey.METRICS_ONBOARDING)}
hidePanel={hidePanel}
{...sidebarItemProps}
/>
<SidebarSection noMargin noPadding>
<OnboardingStatus
org={organization}
<ExpandedContextProvider>
<SidebarSectionGroupPrimary>
<DropdownSidebarSection
isSuperuser={showSuperuserWarning() && !isExcludedOrg()}
>
<SidebarDropdown orientation={orientation} collapsed={collapsed} />

{showSuperuserWarning() && !isExcludedOrg() && (
<Hook name="component:superuser-warning" organization={organization} />
)}
</DropdownSidebarSection>

<PrimaryItems>
{hasOrganization && (
<Fragment>
<SidebarSection>
{issues}
{projects}
</SidebarSection>

<SidebarSection>
{performance}
{starfish}
{profiling}
{metrics}
{replays}
{feedback}
{monitors}
{alerts}
</SidebarSection>

<SidebarSection>
{discover2}
{dashboards}
{releases}
{userFeedback}
</SidebarSection>

<SidebarSection>
{stats}
{settings}
</SidebarSection>
</Fragment>
)}
</PrimaryItems>
</SidebarSectionGroupPrimary>

{hasOrganization && (
<SidebarSectionGroup>
<PerformanceOnboardingSidebar
currentPanel={activePanel}
onShowPanel={() => togglePanel(SidebarPanelKey.PERFORMANCE_ONBOARDING)}
hidePanel={() => hidePanel('performance-sidequest')}
{...sidebarItemProps}
/>
<FeedbackOnboardingSidebar
currentPanel={activePanel}
onShowPanel={() => togglePanel(SidebarPanelKey.ONBOARDING_WIZARD)}
onShowPanel={() => togglePanel(SidebarPanelKey.FEEDBACK_ONBOARDING)}
hidePanel={hidePanel}
{...sidebarItemProps}
/>
</SidebarSection>

<SidebarSection>
{HookStore.get('sidebar:bottom-items').length > 0 &&
HookStore.get('sidebar:bottom-items')[0]({
orientation,
collapsed,
hasPanel,
organization,
})}
<SidebarHelp
orientation={orientation}
collapsed={collapsed}
<ReplaysOnboardingSidebar
currentPanel={activePanel}
onShowPanel={() => togglePanel(SidebarPanelKey.REPLAYS_ONBOARDING)}
hidePanel={hidePanel}
organization={organization}
{...sidebarItemProps}
/>
<Broadcasts
orientation={orientation}
collapsed={collapsed}
<ProfilingOnboardingSidebar
currentPanel={activePanel}
onShowPanel={() => togglePanel(SidebarPanelKey.BROADCASTS)}
onShowPanel={() => togglePanel(SidebarPanelKey.PROFILING_ONBOARDING)}
hidePanel={hidePanel}
organization={organization}
{...sidebarItemProps}
/>
<ServiceIncidents
orientation={orientation}
collapsed={collapsed}
<MetricsOnboardingSidebar
currentPanel={activePanel}
onShowPanel={() => togglePanel(SidebarPanelKey.SERVICE_INCIDENTS)}
onShowPanel={() => togglePanel(SidebarPanelKey.METRICS_ONBOARDING)}
hidePanel={hidePanel}
{...sidebarItemProps}
/>
</SidebarSection>
<SidebarSection noMargin noPadding>
<OnboardingStatus
org={organization}
currentPanel={activePanel}
onShowPanel={() => togglePanel(SidebarPanelKey.ONBOARDING_WIZARD)}
hidePanel={hidePanel}
{...sidebarItemProps}
/>
</SidebarSection>

{!horizontal && (
<SidebarSection>
<SidebarCollapseItem
id="collapse"
data-test-id="sidebar-collapse"
{...sidebarItemProps}
icon={<IconChevron direction={collapsed ? 'right' : 'left'} size="sm" />}
label={collapsed ? t('Expand') : t('Collapse')}
onClick={toggleCollapse}
{HookStore.get('sidebar:bottom-items').length > 0 &&
HookStore.get('sidebar:bottom-items')[0]({
orientation,
collapsed,
hasPanel,
organization,
})}
<SidebarHelp
orientation={orientation}
collapsed={collapsed}
hidePanel={hidePanel}
organization={organization}
/>
<Broadcasts
orientation={orientation}
collapsed={collapsed}
currentPanel={activePanel}
onShowPanel={() => togglePanel(SidebarPanelKey.BROADCASTS)}
hidePanel={hidePanel}
organization={organization}
/>
<ServiceIncidents
orientation={orientation}
collapsed={collapsed}
currentPanel={activePanel}
onShowPanel={() => togglePanel(SidebarPanelKey.SERVICE_INCIDENTS)}
hidePanel={hidePanel}
/>
</SidebarSection>
)}
</SidebarSectionGroup>
)}

{!horizontal && (
<SidebarSection>
<SidebarCollapseItem
id="collapse"
data-test-id="sidebar-collapse"
{...sidebarItemProps}
icon={
<IconChevron direction={collapsed ? 'right' : 'left'} size="sm" />
}
label={collapsed ? t('Expand') : t('Collapse')}
onClick={toggleCollapse}
/>
</SidebarSection>
)}
</SidebarSectionGroup>
)}
</ExpandedContextProvider>
</SidebarWrapper>
);
}
Expand Down
Loading