Redesign sidebar with hierarchical navigation - #74
Conversation
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 96f74dc624
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| assert "setGroupExpanded" in text | ||
| assert "jt-nav-primary-row" in text | ||
| assert "jt-nav-group-toggle" in text | ||
| assert "jt-nav-chevron" in text |
There was a problem hiding this comment.
Running python -m pytest -q tests/test_jobs_workspace_ui.py tests/test_v16_responsive_ui.py now fails because test_v16_shell_has_searchable_flat_group_navigation_and_workspace_context still requires the removed const title=document.createElement('div') implementation. Update that existing test alongside these new hierarchy assertions so the repository test suite does not fail on the intentional redesign.
Useful? React with 👍 / 👎.
| .jt-nav-group{display:grid;gap:2px}.jt-nav-primary-row{display:flex;align-items:center;gap:2px}.jt-nav-primary-row>button[data-tab]{min-width:0;flex:1;font-weight:680}.jt-nav-group-toggle{font-weight:680!important}.jt-nav-expander{width:30px!important;min-width:30px!important;padding:0!important;justify-content:center!important;color:#77869d!important}.jt-nav-chevron{display:block;font-size:13px;transition:transform .16s ease}.jt-nav-group.is-open .jt-nav-chevron{transform:rotate(90deg)} | ||
| .jt-nav-group-panel{display:none;gap:1px;margin:1px 0 5px 30px;padding-left:9px;border-left:1px solid rgba(148,163,184,.16)}.jt-nav-group.is-open>.jt-nav-group-panel{display:grid}.jt-nav-group-panel>button{min-height:34px;padding:6px 9px;font-size:12px;font-weight:520;border-radius:8px}.jt-nav-group-panel .jt-nav-icon{width:17px;font-size:11px} | ||
| .app.jt-collapsed .brand .jt-brand-text,.app.jt-collapsed .brand small,.app.jt-collapsed .jt-nav-label,.app.jt-collapsed .jt-group-label{display:none}.app.jt-collapsed .brand{padding-left:9px}.app.jt-collapsed .jt-brand-row{justify-content:center}.app.jt-collapsed .nav button{justify-content:center;padding-inline:8px}.app.jt-collapsed .jt-nav-icon,.app.jt-collapsed .jt-group-icon{font-size:15px}.app.jt-collapsed .jt-collapse{transform:rotate(180deg)} | ||
| .app.jt-collapsed .jt-nav-expander,.app.jt-collapsed .jt-nav-group-panel{display:none!important}.app.jt-collapsed .nav{gap:5px}.app.jt-collapsed .jt-nav-group{gap:1px} |
There was a problem hiding this comment.
When a user previously collapsed the desktop sidebar, jobtrack-sidebar-collapsed=1 reapplies jt-collapsed on a later mobile-sized visit, but this !important rule hides every submenu and primary-row expander while the mobile layout also hides the collapse control. As a result, destinations such as Applications, Intelligence, and Learning cannot be opened from their groups on mobile; clear the collapsed state for mobile navigation or override these visibility rules in the mobile media query.
Useful? React with 👍 / 👎.
| const groupLabel=(GROUPS.find(item=>item.key===group.dataset.group)?.label||'').toLowerCase();let visible=0; | ||
| group.querySelectorAll('button[data-tab]').forEach(button=>{const show=!query||groupLabel.includes(query)||button.textContent.toLowerCase().includes(query);button.hidden=!show;if(show){visible++;matches++}}); |
There was a problem hiding this comment.
With the interface set to Turkish, translateInterface() changes visible group names such as Settings and Administration to “Ayarlar” and “Yönetim,” but navigation search now compares only the English labels stored in GROUPS. Searching for either visible Turkish group name therefore reports no matching pages because none of its child labels contains that term; derive the searchable group label from the rendered/localized text instead.
Useful? React with 👍 / 👎.
1 participant
Summary
Validation
main(30edfe6)