diff --git a/public/assets/tools/README.md b/public/assets/tools/README.md
index 73ce119a..b59f1dcd 100644
--- a/public/assets/tools/README.md
+++ b/public/assets/tools/README.md
@@ -15,3 +15,27 @@ eg:
```
+
+## App drawer icons
+The app drawer icons are 32x32 tiles: a tinted rounded square (`rx="4"`) with a centered glyph, colored per drawer group. Most glyphs use a 24x24 canvas; the Figma exports listed below use their original 20x20 canvas, centered with `translate(6 6)`:
+
+| Groups | Tile | Glyph |
+| --- | --- | --- |
+| Earn, Delivery & Payments | `#DEFBE6` | `#198038` |
+| Compete | `#FFF2E8` | `#BA4E00` |
+| AI, Insights | `#FFE5EC` | `#C1294F` |
+| Learn | `#E5F3FF` | `#2C5771` |
+| Connect, Community & Content | `#F6F2FF` | `#8A3FFC` |
+| Sales & Customers | `#FCF4D6` | `#8E6A00` |
+| Team & Platform | `#D9FBFB` | `#007D79` |
+
+`mm`, `archive` and `work-app` use the exact glyph paths and colors exported from the [PM-6555 Figma design](https://www.figma.com/design/AMGGzlrbi8PaMw6aQbbxuL/Marketing-Design-System?node-id=270-7650):
+
+| Icon | Figma item node | Glyph |
+| --- | --- | --- |
+| `mm` | `270:7703` | `icon/shoe` |
+| `archive` | `270:7715` | `icon/files` |
+| `work-app` | `270:7729` | `icon/tools` |
+
+The remaining glyphs come from [Material Symbols Rounded](https://github.com/google/material-design-icons) (weight 600, Apache-2.0), except `copilot-portal`, `sales-pipeline` and `discord`, which use [Tabler Icons](https://tabler.io/icons) (MIT).
+Each icon also exists as `./{file-name}.svg`; keep its `` in `./sprite.svg` in sync, and avoid inner `id`s so symbols don't clash inside the shared sprite.
diff --git a/public/assets/tools/ai-hub.svg b/public/assets/tools/ai-hub.svg
index d6b65143..00470065 100644
--- a/public/assets/tools/ai-hub.svg
+++ b/public/assets/tools/ai-hub.svg
@@ -1,27 +1 @@
-
+
diff --git a/public/assets/tools/analytics.svg b/public/assets/tools/analytics.svg
new file mode 100644
index 00000000..b3d9cc51
--- /dev/null
+++ b/public/assets/tools/analytics.svg
@@ -0,0 +1 @@
+
diff --git a/public/assets/tools/archive.svg b/public/assets/tools/archive.svg
new file mode 100644
index 00000000..d3e1ba73
--- /dev/null
+++ b/public/assets/tools/archive.svg
@@ -0,0 +1,6 @@
+
diff --git a/public/assets/tools/articles.svg b/public/assets/tools/articles.svg
index f38ae9e7..fb57fe1a 100644
--- a/public/assets/tools/articles.svg
+++ b/public/assets/tools/articles.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
diff --git a/public/assets/tools/campus.svg b/public/assets/tools/campus.svg
new file mode 100644
index 00000000..32ac314c
--- /dev/null
+++ b/public/assets/tools/campus.svg
@@ -0,0 +1 @@
+
diff --git a/public/assets/tools/challenges.svg b/public/assets/tools/challenges.svg
index 162bb4a6..2a55a448 100644
--- a/public/assets/tools/challenges.svg
+++ b/public/assets/tools/challenges.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
diff --git a/public/assets/tools/connect.svg b/public/assets/tools/connect.svg
deleted file mode 100644
index d82908d6..00000000
--- a/public/assets/tools/connect.svg
+++ /dev/null
@@ -1,22 +0,0 @@
-
diff --git a/public/assets/tools/copilot-portal.svg b/public/assets/tools/copilot-portal.svg
index 421ec81b..1dee056e 100644
--- a/public/assets/tools/copilot-portal.svg
+++ b/public/assets/tools/copilot-portal.svg
@@ -1,18 +1 @@
-
+
diff --git a/public/assets/tools/customer-portal.svg b/public/assets/tools/customer-portal.svg
new file mode 100644
index 00000000..7b23e4d9
--- /dev/null
+++ b/public/assets/tools/customer-portal.svg
@@ -0,0 +1 @@
+
diff --git a/public/assets/tools/discord.svg b/public/assets/tools/discord.svg
index 4ceb835c..0ba6cb1e 100644
--- a/public/assets/tools/discord.svg
+++ b/public/assets/tools/discord.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
diff --git a/public/assets/tools/forums.svg b/public/assets/tools/forums.svg
index 2981f072..a9b20fe8 100644
--- a/public/assets/tools/forums.svg
+++ b/public/assets/tools/forums.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
diff --git a/public/assets/tools/gigs.svg b/public/assets/tools/gigs.svg
index ade9b2b6..347cba30 100644
--- a/public/assets/tools/gigs.svg
+++ b/public/assets/tools/gigs.svg
@@ -1 +1 @@
-
+
diff --git a/public/assets/tools/leave-tracker.svg b/public/assets/tools/leave-tracker.svg
new file mode 100644
index 00000000..94a19187
--- /dev/null
+++ b/public/assets/tools/leave-tracker.svg
@@ -0,0 +1 @@
+
diff --git a/public/assets/tools/mass-email.svg b/public/assets/tools/mass-email.svg
new file mode 100644
index 00000000..c7d64d80
--- /dev/null
+++ b/public/assets/tools/mass-email.svg
@@ -0,0 +1 @@
+
diff --git a/public/assets/tools/mm-tournament.svg b/public/assets/tools/mm-tournament.svg
index 7eb48396..81b2b997 100644
--- a/public/assets/tools/mm-tournament.svg
+++ b/public/assets/tools/mm-tournament.svg
@@ -1,22 +1 @@
-
+
diff --git a/public/assets/tools/mm.svg b/public/assets/tools/mm.svg
index 1af6911d..83797efe 100644
--- a/public/assets/tools/mm.svg
+++ b/public/assets/tools/mm.svg
@@ -1 +1,6 @@
-
\ No newline at end of file
+
diff --git a/public/assets/tools/payload-cms.svg b/public/assets/tools/payload-cms.svg
new file mode 100644
index 00000000..8f72cfff
--- /dev/null
+++ b/public/assets/tools/payload-cms.svg
@@ -0,0 +1 @@
+
diff --git a/public/assets/tools/payments.svg b/public/assets/tools/payments.svg
index fcdc23ba..76b7b130 100644
--- a/public/assets/tools/payments.svg
+++ b/public/assets/tools/payments.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
diff --git a/public/assets/tools/practice.svg b/public/assets/tools/practice.svg
deleted file mode 100644
index ec03a261..00000000
--- a/public/assets/tools/practice.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/public/assets/tools/procurement.svg b/public/assets/tools/procurement.svg
new file mode 100644
index 00000000..0fff3b67
--- /dev/null
+++ b/public/assets/tools/procurement.svg
@@ -0,0 +1 @@
+
diff --git a/public/assets/tools/reports.svg b/public/assets/tools/reports.svg
new file mode 100644
index 00000000..44ebc528
--- /dev/null
+++ b/public/assets/tools/reports.svg
@@ -0,0 +1 @@
+
diff --git a/public/assets/tools/review.svg b/public/assets/tools/review.svg
index 21041f9a..1f2da4cc 100644
--- a/public/assets/tools/review.svg
+++ b/public/assets/tools/review.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
diff --git a/public/assets/tools/sales-pipeline.svg b/public/assets/tools/sales-pipeline.svg
new file mode 100644
index 00000000..f2c7285f
--- /dev/null
+++ b/public/assets/tools/sales-pipeline.svg
@@ -0,0 +1 @@
+
diff --git a/public/assets/tools/salesforce.svg b/public/assets/tools/salesforce.svg
new file mode 100644
index 00000000..40718a15
--- /dev/null
+++ b/public/assets/tools/salesforce.svg
@@ -0,0 +1 @@
+
diff --git a/public/assets/tools/sprite.svg b/public/assets/tools/sprite.svg
index dcd72689..8d032645 100644
--- a/public/assets/tools/sprite.svg
+++ b/public/assets/tools/sprite.svg
@@ -1,104 +1,21 @@
diff --git a/public/assets/tools/support.svg b/public/assets/tools/support.svg
new file mode 100644
index 00000000..d3fe516f
--- /dev/null
+++ b/public/assets/tools/support.svg
@@ -0,0 +1 @@
+
diff --git a/public/assets/tools/system-admin.svg b/public/assets/tools/system-admin.svg
new file mode 100644
index 00000000..1b5712b5
--- /dev/null
+++ b/public/assets/tools/system-admin.svg
@@ -0,0 +1 @@
+
diff --git a/public/assets/tools/talent-search.svg b/public/assets/tools/talent-search.svg
deleted file mode 100644
index 36706d43..00000000
--- a/public/assets/tools/talent-search.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/public/assets/tools/tcacademy.svg b/public/assets/tools/tcacademy.svg
index f42595be..a735cc9d 100644
--- a/public/assets/tools/tcacademy.svg
+++ b/public/assets/tools/tcacademy.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
diff --git a/public/assets/tools/topcrowd.svg b/public/assets/tools/topcrowd.svg
deleted file mode 100644
index 79e0d9a3..00000000
--- a/public/assets/tools/topcrowd.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/public/assets/tools/wallet-admin.svg b/public/assets/tools/wallet-admin.svg
new file mode 100644
index 00000000..68e5c04d
--- /dev/null
+++ b/public/assets/tools/wallet-admin.svg
@@ -0,0 +1 @@
+
diff --git a/public/assets/tools/work-app.svg b/public/assets/tools/work-app.svg
new file mode 100644
index 00000000..ad09b706
--- /dev/null
+++ b/public/assets/tools/work-app.svg
@@ -0,0 +1,6 @@
+
diff --git a/public/assets/tools/work-manager.svg b/public/assets/tools/work-manager.svg
deleted file mode 100644
index ef1c5b25..00000000
--- a/public/assets/tools/work-manager.svg
+++ /dev/null
@@ -1,22 +0,0 @@
-
diff --git a/src/README.md b/src/README.md
index b8a30e3e..77f9959a 100644
--- a/src/README.md
+++ b/src/README.md
@@ -11,6 +11,7 @@ For information re how to integrate the UniNav into a web property, see the main
- [Serve the local app](#serve-the-local-app)
- [Demo Apps](#demo-apps)
- [Instructions for using the Demo Apps](#instructions-for-using-the-demo-apps)
+- [App Drawer Roles](#app-drawer-roles)
- [Production Distribution](#production-distribution)
- [Recommended IDE Setup](#recommended-ide-setup)
- [Typescript Type Declaration Generation](#typescript-type-declaration-generation)
@@ -82,6 +83,20 @@ There are 2 sample integrations in the [/demo](./demo/) folder:
- Marketing Nav: http://local.topcoder-dev.com:8081
- Tool Nav: http://local.topcoder-dev.com:8082
+## App Drawer Roles
+
+The signed-in user's app drawer is filtered using the roles in the `tcjwt`
+cookie by `getUserAppRoles` and the guards in `src/lib/config/auth.ts`.
+`Topcoder Staff` and `administrator` users see both Talent and Staff sections,
+including administrators who also have `Topcoder Customer` or `Topcoder Talent`.
+The administrator role is matched case-insensitively, so legacy `Administrator`
+claims receive the same navigation. Other role names retain their exact matching.
+
+Members with `Topcoder Talent`, or without a recognized navigation role, see
+Talent only. Customer-only users have no drawer items, so the drawer trigger is
+hidden. Application-specific roles such as `Payment Admin` do not grant the Staff
+section. Each linked application still enforces its own access permissions.
+
## Production Distribution
Run `npm run build` to build the files for production. The output is to be found in the `dist` folder.
diff --git a/src/lib/components/tool-selector/ToolMenu.module.scss b/src/lib/components/tool-selector/ToolMenu.module.scss
index e8f19bdc..83d11347 100644
--- a/src/lib/components/tool-selector/ToolMenu.module.scss
+++ b/src/lib/components/tool-selector/ToolMenu.module.scss
@@ -1,17 +1,19 @@
@use 'lib/styles/mixins.scss' as *;
@use 'lib/styles/fonts.scss' as *;
-@use 'lib/styles/colors.scss' as *;
.toolMenuWrap {
- width: 472px;
+ width: 496px;
+ // completes the popup's vertical padding to 32px
+ padding: 8px 0;
- font-family: $roboto;
+ font-family: $nunito;
font-style: normal;
font-size: 14px;
- color: #767676;
+ color: #6F6F6F;
@include mobile {
width: auto;
+ padding: 0;
}
> svg {
@@ -20,19 +22,20 @@
}
.title {
- font-family: $roboto;
+ font-family: $nunito;
font-style: normal;
font-weight: 700;
- font-size: 12px;
- line-height: 16px;
- letter-spacing: 1px;
+ font-size: 14px;
+ line-height: 20px;
text-transform: uppercase;
+ color: #161616;
}
.toolSection {
&Title {
@extend .title;
- margin-bottom: 16px;
+ line-height: 24px;
+ margin-bottom: 12px;
}
// hides the menu title when the section is alone in the whole menu
@@ -55,19 +58,24 @@
}
}
-.toolGroups {
+.toolColumns {
display: flex;
- gap: 24px;
- flex-wrap: wrap;
+ gap: 48px;
- .toolSection.talent & {
+ @include mobile {
flex-direction: column;
- max-height: 420px;
+ gap: 0;
}
+}
+
+.toolGroups {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+ flex: 1 1 0;
+ min-width: 0;
@include mobile {
- flex-direction: column;
- flex-wrap: nowrap;
gap: 0;
}
}
@@ -77,34 +85,26 @@
flex-direction: column;
align-items: flex-start;
- flex: 1 1 calc(50% - 24px);
-
&Title {
@extend .title;
- font-weight: 400;
+ font-weight: 600;
+ font-size: 12px;
+ line-height: 16px;
+ color: #6F6F6F;
- margin-bottom: 12px;
+ margin-bottom: 8px;
}
@include mobile {
padding: 16px;
- order: var(--order);
-
- &.hasCtas {
- border-top: 1px solid #D4D4D4;
- }
}
}
.toolNavItems {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
width: 100%;
- line-height: 1;
-
- @include mobile {
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- }
}
.toolNavItem {
@@ -112,57 +112,21 @@
align-items: center;
gap: 8px;
width: 100%;
- overflow: hidden;
- &.toolNavItem {
- font-weight: 500;
- color: color(hoverMenuLink);
- }
-
- & + & {
- margin-top: 12px;
- }
-
- &:global(.navButton) {
- display: inline-flex;
- font-weight: 700;
- font-size: 12px;
- line-height: 24px;
- letter-spacing: 0.008em;
- text-transform: uppercase;
-
- color: #16679A;
- border: 2px solid #16679A;
- border-radius: 24px;
-
- padding: 0 16px;
- width: auto;
-
- &:hover {
- color: #219174;
- border-color: #219174;
- }
-
- .navItemLabel {
- margin-top: 0;
- margin-bottom: 0;
- }
- }
-
- &:hover {
- font-weight: 700;
- color: #0c0c0c;
- color: color(hoverMenuLink, hover);
+ height: 32px;
+ // the description is revealed for the hovered (or keyboard focused) tool only
+ &:hover,
+ &:focus-visible {
.navItemDescription {
+ max-height: 14px;
opacity: 1;
- pointer-events:unset;
- font-weight: 400;
- color: #767676;
}
}
}
.toolIcon {
+ flex: 0 0 auto;
+
img, svg {
display: block;
width: 32px;
@@ -173,23 +137,32 @@
.navItemContent {
display: flex;
flex-direction: column;
- margin: -3px 0 -4px;
+ min-width: 0;
}
.navItemLabel {
display: block;
- line-height: 22px;
- margin-bottom: -4px;
- margin-top: 4px;
+ font-size: 14px;
+ line-height: 18px;
+ color: #161616;
+ white-space: nowrap;
}
.navItemDescription {
+ display: block;
font-style: italic;
- font-size: 10px;
- line-height: 18px;
+ font-size: 12px;
+ line-height: 14px;
+ color: #6F6F6F;
+ white-space: nowrap;
+
+ max-height: 0;
+ // collapse vertically only, long descriptions may run into the columns gap
+ overflow-x: visible;
+ overflow-y: clip;
opacity: 0;
pointer-events: none;
- transition: 0.2s ease-in-out;
+ transition: max-height 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
.toolMenuSpacer {
diff --git a/src/lib/components/tool-selector/ToolMenu.svelte b/src/lib/components/tool-selector/ToolMenu.svelte
index e19efad6..9632b95c 100644
--- a/src/lib/components/tool-selector/ToolMenu.svelte
+++ b/src/lib/components/tool-selector/ToolMenu.svelte
@@ -1,73 +1,68 @@