+
+ {sessionUser.email}
+
+
+
+ {t('Account Settings')}
+
+ {showSubscriptionLink ? (
+
+ {t('subscription')}
+
+ ) : null}
+
+
+ {
+ // The button is outside the form but still belongs to it via the
+ // form attribute. The reason to do this is that if the button is
+ // inside the form, screen readers will not count it in the total
+ // number of menu items
+ }
+
+ {t('log_out')}
+
+
+
+ >
+ )
+}
diff --git a/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/logged-in-items.tsx b/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/logged-in-items.tsx
index b1990b22a8..17f29591f0 100644
--- a/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/logged-in-items.tsx
+++ b/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/logged-in-items.tsx
@@ -1,12 +1,8 @@
import { useTranslation } from 'react-i18next'
-import { Dropdown } from 'react-bootstrap-5'
-import NavDropdownDivider from '@/features/ui/components/bootstrap-5/navbar/nav-dropdown-divider'
-import getMeta from '@/utils/meta'
import NavDropdownMenu from '@/features/ui/components/bootstrap-5/navbar/nav-dropdown-menu'
-import NavDropdownLinkItem from '@/features/ui/components/bootstrap-5/navbar/nav-dropdown-link-item'
-import DropdownListItem from '@/features/ui/components/bootstrap-5/dropdown-list-item'
import type { NavbarSessionUser } from '@/features/ui/components/types/navbar'
import NavLinkItem from '@/features/ui/components/bootstrap-5/navbar/nav-link-item'
+import { AccountMenuItems } from './account-menu-items'
export default function LoggedInItems({
sessionUser,
@@ -16,44 +12,14 @@ export default function LoggedInItems({
showSubscriptionLink: boolean
}) {
const { t } = useTranslation()
- const logOutFormId = 'logOutForm'
-
return (
<>
{t('projects')}
-
- {sessionUser.email}
-
-
-
- {t('Account Settings')}
-
- {showSubscriptionLink ? (
-
- {t('subscription')}
-
- ) : null}
-
-
- {
- // The button is outside the form but still belongs to it via the
- // form attribute. The reason to do this is that if the button is
- // inside the form, screen readers will not count it in the total
- // number of menu items
- }
-
- {t('log_out')}
-
-
-
+
>
)
diff --git a/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/nav-dropdown-from-data.tsx b/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/nav-dropdown-from-data.tsx
index 0fc1a211e2..030220abb4 100644
--- a/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/nav-dropdown-from-data.tsx
+++ b/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/nav-dropdown-from-data.tsx
@@ -1,4 +1,7 @@
-import type { NavbarDropdownItemData } from '@/features/ui/components/types/navbar'
+import type {
+ NavbarDropdownItemData,
+ NavbarItemDropdownData,
+} from '@/features/ui/components/types/navbar'
import NavDropdownDivider from '@/features/ui/components/bootstrap-5/navbar/nav-dropdown-divider'
import { sendMB } from '@/infrastructure/event-tracking'
import { isDropdownLinkItem } from '@/features/ui/components/bootstrap-5/navbar/util'
@@ -16,7 +19,24 @@ export default function NavDropdownFromData({
}) {
return (
- {item.dropdown.map((child, index) => {
+
+
+ )
+}
+
+export function NavDropdownMenuItems({
+ dropdown,
+ showContactUsModal,
+}: {
+ dropdown: NavbarItemDropdownData
+ showContactUsModal: (event?: Event) => void
+}) {
+ return (
+ <>
+ {dropdown.map((child, index) => {
if ('divider' in child) {
return
} else if ('isContactUs' in child) {
@@ -41,6 +61,6 @@ export default function NavDropdownFromData({
)
}
})}
-
+ >
)
}
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/project-list-ds-nav.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/project-list-ds-nav.scss
index 713dea276d..59832353de 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/project-list-ds-nav.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/project-list-ds-nav.scss
@@ -25,10 +25,6 @@
display: flex;
overflow-y: hidden;
- .new-project-button {
- margin-bottom: var(--spacing-08);
- }
-
.project-list-sidebar-wrapper-react {
position: relative;
display: flex;
@@ -41,8 +37,8 @@
.project-list-sidebar-scroll {
flex: 1 1 auto;
overflow: auto;
- margin: 0 calc(var(--spacing-07) * -1);
- padding: 0 var(--spacing-07);
+ margin: var(--spacing-05) calc(var(--spacing-07) * -1);
+ padding: var(--spacing-05) var(--spacing-07);
}
.project-list-sidebar-survey-link {
@@ -59,9 +55,15 @@
padding: 0;
}
}
+
+ .project-list-sidebar-survey-wrapper .user-notifications {
+ margin-bottom: var(--spacing-05);
+ }
}
ul.project-list-filters {
+ margin-bottom: 0;
+
hr {
margin: var(--spacing-05) 0;
}
@@ -143,8 +145,51 @@
width: 100% !important;
}
}
-}
-.project-list-sidebar-survey-wrapper {
- margin-top: var(--spacing-05);
+ .ds-nav-icon-dropdown {
+ .dropdown-toggle {
+ color: var(--content-secondary);
+ background: none;
+ height: 44px;
+ width: 44px;
+ padding: 0;
+ overflow: hidden;
+
+ &:hover {
+ background-color: var(--bg-light-secondary);
+ }
+
+ &.show {
+ background-color: var(--bg-accent-03);
+ }
+
+ &::after {
+ display: none;
+ }
+
+ > div {
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .material-symbols {
+ vertical-align: middle;
+ }
+ }
+ }
+
+ .ds-nav-ds-link {
+ margin-bottom: var(--spacing-05);
+
+ a {
+ color: var(--content-secondary) !important;
+ text-transform: uppercase;
+ font-weight: bold;
+ text-decoration: none;
+
+ @include body-xs;
+ }
+ }
}