GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-16 04:25:54 +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;
}
}
.nav-wrapper {
height: calc(100% - 52px);
.secondary-nav-items {
border-top: 1px solid var(--bg-slate-400);
padding: 8px 0;
max-width: 100%;
position: fixed;
bottom: 0;
left: 0;
width: 240px;
.primary-nav-items {
max-height: 65%;
overflow-y: auto;
overflow-x: hidden;
transition: all 0.3s, background 0s, border 0s;
// 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);
&::-webkit-scrollbar {
width: 0.1rem;
}
}
.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 {
@ -157,13 +186,15 @@
}
}
.secondary-nav-items {
border-top: 1px solid var(--bg-vanilla-400);
.nav-wrapper {
.secondary-nav-items {
border-top: 1px solid var(--bg-vanilla-400);
.collapse-expand-handlers {
svg {
color: var(--bg-slate-300);
fill: var(--bg-vanilla-400);
.collapse-expand-handlers {
svg {
color: var(--bg-slate-300);
fill: var(--bg-vanilla-400);
}
}
}
}

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

@ -375,90 +375,92 @@ function SideNav({
</div>
)}
<div className="primary-nav-items">
{menuItems.map((item, index) => (
<NavItem
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 => (
<div className={cx(`nav-wrapper`, isCloudUserVal && 'nav-wrapper-cloud')}>
<div className="primary-nav-items">
{menuItems.map((item, index) => (
<NavItem
isCollapsed={collapsed}
key={item?.key || index}
key={item.key || index}
item={item}
isActive={activeMenuKey === item?.key}
onClick={(event: MouseEvent): void => {
handleUserManagentMenuItemClick(item?.key as string, event);
isActive={activeMenuKey === item.key}
onClick={(event): void => {
handleMenuItemClick(event, item);
}}
/>
),
)}
))}
</div>
{inviteMembers && (
<div className="secondary-nav-items">
<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}`);
}
}}
key="keyboardShortcuts"
item={shortcutMenuItem}
isActive={false}
onClick={onClickShortcuts}
/>
)}
{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} />
{licenseData && !isLicenseActive && (
<NavItem
isCollapsed={collapsed}
key="trySignozCloud"
item={trySignozCloudMenuItem}
isActive={false}
onClick={onClickSignozCloud}
/>
)}
{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>