GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-17 07:55:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: sidenav items overlapping in small screens (#4789)

Browse Source
This commit is contained in:
Vikrant Gupta 2024-04-02 12:38:10 +05:30 committed by GitHub
parent 3babce3ecf
commit 7a7d814288
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 138 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
frontend/src/container/SideNav/SideNav.styles.scss
View File

@ -78,36 +78,65 @@
box-shadow: none !important; box-shadow: none !important;
} }
} }
.nav-wrapper {
height: calc(100% - 52px);
.secondary-nav-items { .primary-nav-items {
border-top: 1px solid var(--bg-slate-400); max-height: 65%;
padding: 8px 0; overflow-y: auto;
max-width: 100%; overflow-x: hidden;
position: fixed;
bottom: 0;
left: 0;
width: 240px;
transition: all 0.3s, background 0s, border 0s; &::-webkit-scrollbar {
width: 0.1rem;
// position: relative;
.collapse-expand-handlers {
position: absolute;
top: -9px;
right: -9px;
cursor: pointer;
display: none;
transition: display 0.3s;
svg {
fill: var(--bg-vanilla-400);
color: var(--bg-slate-300);
} }
} }
.secondary-nav-items {
max-height: 35%;
overflow-y: auto;
overflow-x: hidden;
border-top: 1px solid var(--bg-slate-400);
padding: 8px 0;
max-width: 100%;
position: fixed;
bottom: 0;
left: 0;
width: 240px;
transition: all 0.3s, background 0s, border 0s;
&::-webkit-scrollbar {
width: 0.1rem;
}
.collapse-expand-handlers {
position: absolute;
top: -9px;
right: -9px;
cursor: pointer;
display: none;
transition: display 0.3s;
svg {
fill: var(--bg-vanilla-400);
color: var(--bg-slate-300);
}
}
}
}
.nav-wrapper-cloud {
height: calc(100% - 88px);
.secondary-nav-items {
max-height: 30%;
}
.primary-nav-items {
max-height: 70%;
}
} }
&.collapsed { &.collapsed {
@ -157,13 +186,15 @@
} }
} }
.secondary-nav-items { .nav-wrapper {
border-top: 1px solid var(--bg-vanilla-400); .secondary-nav-items {
border-top: 1px solid var(--bg-vanilla-400);
.collapse-expand-handlers { .collapse-expand-handlers {
svg { svg {
color: var(--bg-slate-300); color: var(--bg-slate-300);
fill: var(--bg-vanilla-400); fill: var(--bg-vanilla-400);
}
} }
} }
} }

148
frontend/src/container/SideNav/SideNav.tsx
View File

@ -375,90 +375,92 @@ function SideNav({
</div> </div>
)} )}
<div className="primary-nav-items"> <div className={cx(`nav-wrapper`, isCloudUserVal && 'nav-wrapper-cloud')}>
{menuItems.map((item, index) => ( <div className="primary-nav-items">
<NavItem {menuItems.map((item, index) => (
isCollapsed={collapsed}
key={item.key || index}
item={item}
isActive={activeMenuKey === item.key}
onClick={(event): void => {
handleMenuItemClick(event, item);
}}
/>
))}
</div>
<div className="secondary-nav-items">
<NavItem
isCollapsed={collapsed}
key="keyboardShortcuts"
item={shortcutMenuItem}
isActive={false}
onClick={onClickShortcuts}
/>
{licenseData && !isLicenseActive && (
<NavItem
isCollapsed={collapsed}
key="trySignozCloud"
item={trySignozCloudMenuItem}
isActive={false}
onClick={onClickSignozCloud}
/>
)}
{userManagementMenuItems.map(
(item, index): JSX.Element => (
<NavItem <NavItem
isCollapsed={collapsed} isCollapsed={collapsed}
key={item?.key || index} key={item.key || index}
item={item} item={item}
isActive={activeMenuKey === item?.key} isActive={activeMenuKey === item.key}
onClick={(event: MouseEvent): void => { onClick={(event): void => {
handleUserManagentMenuItemClick(item?.key as string, event); handleMenuItemClick(event, item);
}} }}
/> />
), ))}
)} </div>
{inviteMembers && ( <div className="secondary-nav-items">
<NavItem <NavItem
isCollapsed={collapsed} isCollapsed={collapsed}
key={inviteMemberMenuItem.key} key="keyboardShortcuts"
item={inviteMemberMenuItem} item={shortcutMenuItem}
isActive={activeMenuKey === inviteMemberMenuItem?.key} isActive={false}
onClick={(event: React.MouseEvent): void => { onClick={onClickShortcuts}
if (isCtrlMetaKey(event)) {
openInNewTab(`${inviteMemberMenuItem.key}`);
} else {
history.push(`${inviteMemberMenuItem.key}`);
}
}}
/> />
)}
{user && ( {licenseData && !isLicenseActive && (
<NavItem <NavItem
isCollapsed={collapsed} isCollapsed={collapsed}
key={ROUTES.MY_SETTINGS} key="trySignozCloud"
item={userSettingsMenuItem} item={trySignozCloudMenuItem}
isActive={activeMenuKey === userSettingsMenuItem?.key} isActive={false}
onClick={(event: MouseEvent): void => { onClick={onClickSignozCloud}
handleUserManagentMenuItemClick( />
userSettingsMenuItem?.key as string,
event,
);
}}
/>
)}
<div className="collapse-expand-handlers" onClick={onCollapse}>
{collapsed ? (
<ChevronRightCircle size={18} />
) : (
<ChevronLeftCircle size={18} />
)} )}
{userManagementMenuItems.map(
(item, index): JSX.Element => (
<NavItem
isCollapsed={collapsed}
key={item?.key || index}
item={item}
isActive={activeMenuKey === item?.key}
onClick={(event: MouseEvent): void => {
handleUserManagentMenuItemClick(item?.key as string, event);
}}
/>
),
)}
{inviteMembers && (
<NavItem
isCollapsed={collapsed}
key={inviteMemberMenuItem.key}
item={inviteMemberMenuItem}
isActive={activeMenuKey === inviteMemberMenuItem?.key}
onClick={(event: React.MouseEvent): void => {
if (isCtrlMetaKey(event)) {
openInNewTab(`${inviteMemberMenuItem.key}`);
} else {
history.push(`${inviteMemberMenuItem.key}`);
}
}}
/>
)}
{user && (
<NavItem
isCollapsed={collapsed}
key={ROUTES.MY_SETTINGS}
item={userSettingsMenuItem}
isActive={activeMenuKey === userSettingsMenuItem?.key}
onClick={(event: MouseEvent): void => {
handleUserManagentMenuItemClick(
userSettingsMenuItem?.key as string,
event,
);
}}
/>
)}
<div className="collapse-expand-handlers" onClick={onCollapse}>
{collapsed ? (
<ChevronRightCircle size={18} />
) : (
<ChevronLeftCircle size={18} />
)}
</div>
</div> </div>
</div> </div>
</div> </div>