fix (dashboard): scroll to active element in navbar when navigating (#3431)
### **PR Type**
Bug fix, Enhancement
___
### **Description**
- Scroll to active element in navbar when navigating
- Update react-complex-tree package to version 2.6.0
- Fix database slug in ProjectPagesComboBox component
- Improve NavTree component styling and focus handling
___
### Diagram Walkthrough
```mermaid
flowchart LR
A["Navbar Navigation"] --> B["Scroll to Active"]
A --> C["Update react-complex-tree"]
D["Database Slug"] --> E["Fix in ProjectPagesComboBox"]
F["NavTree Component"] --> G["Improve Styling"]
F --> H["Enhance Focus Handling"]
```
<details> <summary><h3> File Walkthrough</h3></summary>
<table><thead><tr><th></th><th align="left">Relevant
files</th></tr></thead><tbody><tr><td><strong>Bug
fix</strong></td><td><table>
<tr>
<td>
<details>
<summary><strong>ProjectPagesComboBox.tsx</strong><dd><code>Fix database
slug in ProjectPagesComboBox</code>
</dd></summary>
<hr>
dashboard/src/components/layout/Header/ProjectPagesComboBox.tsx
- Fixed database slug by removing leading slash
</details>
</td>
<td><a
href="https://github.com/nhost/nhost/pull/3431/files#diff-70b3af41358f0a22b83e502409a70a0df15e8946d958dbaee4c32b6ebdb38cf6">+1/-1</a>
</td>
</tr>
</table></td></tr><tr><td><strong>Enhancement</strong></td><td><table>
<tr>
<td>
<details>
<summary><strong>NavTree.tsx</strong><dd><code>Enhance NavTree styling
and focus handling</code>
</dd></summary>
<hr>
dashboard/src/components/layout/MainNav/NavTree.tsx
<ul><li>Improved styling for focused items using object syntax<br> <li>
Enhanced readability and maintainability of className conditional</ul>
</details>
</td>
<td><a
href="https://github.com/nhost/nhost/pull/3431/files#diff-84209ba4cfca6eccb21d8aaaad77bf1af5a18675e6ba077b36acd8977e4c2569">+4/-2</a>
</td>
</tr>
<tr>
<td>
<details>
<summary><strong>PinnedMainNav.tsx</strong><dd><code>Implement scroll to
active element in navbar</code>
</dd></summary>
<hr>
dashboard/src/components/layout/MainNav/PinnedMainNav.tsx
<ul><li>Added attribute filter to MutationObserver for class changes<br>
<li> Improved scrolling to active element when navigating</ul>
</details>
</td>
<td><a
href="https://github.com/nhost/nhost/pull/3431/files#diff-0fbc67c16a16e263b51e46ada3fbaccc041074f31f541bf663ae3b4b5f2a2a17">+2/-0</a>
</td>
</tr>
</table></td></tr><tr><td><strong>Documentation</strong></td><td><table>
<tr>
<td>
<details>
<summary><strong>rude-carrots-unite.md</strong><dd><code>Add changeset
for navbar navigation fix</code>
</dd></summary>
<hr>
.changeset/rude-carrots-unite.md
<ul><li>Added changeset file for patch update<br> <li> Described fix for
scrolling to active element in navbar</ul>
</details>
</td>
<td><a
href="https://github.com/nhost/nhost/pull/3431/files#diff-c1f5c9ca73815ce214e78fa0a5fc675cc4b33f5dc31a136b067e36aa097cd83c">+5/-0</a>
</td>
</tr>
</table></td></tr><tr><td><strong>Dependencies</strong></td><td><table>
<tr>
<td>
<details>
<summary><strong>package.json</strong><dd><code>Update
react-complex-tree dependency</code>
</dd></summary>
<hr>
dashboard/package.json
- Updated react-complex-tree package from 2.4.5 to 2.6.0
</details>
</td>
<td><a
href="https://github.com/nhost/nhost/pull/3431/files#diff-2d8d55c799cd71f1b35e831f075f8178ed1734c4820a2ad548b4dd24d6938d7c">+1/-1</a>
</td>
</tr>
</table></td></tr></tr></tbody></table>
</details>
___
This commit is contained in:
robertkasza
GitHub
5
.changeset/rude-carrots-unite.md
Normal file
5
.changeset/rude-carrots-unite.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
'@nhost/dashboard': patch
|
||||
---
|
||||
|
||||
fix (dashboard): scroll to active element in navbar when navigating
|
||||
@@ -99,7 +99,7 @@
|
||||
"pluralize": "^8.0.0",
|
||||
"react": "18.2.0",
|
||||
"react-children-utilities": "^2.10.0",
|
||||
"react-complex-tree": "^2.4.5",
|
||||
"react-complex-tree": "^2.6.0",
|
||||
"react-day-picker": "9.6.3",
|
||||
"react-dom": "18.2.0",
|
||||
"react-error-boundary": "^4.0.13",
|
||||
|
||||
@@ -71,7 +71,7 @@ export default function ProjectPagesComboBox() {
|
||||
label: 'Database',
|
||||
value: 'database',
|
||||
icon: <DatabaseIcon className="h-4 w-4" />,
|
||||
slug: '/database/browser/default',
|
||||
slug: 'database/browser/default',
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
|
||||
@@ -442,8 +442,10 @@ export default function NavTree() {
|
||||
}}
|
||||
className={cn(
|
||||
'flex h-8 w-full flex-row justify-start gap-1 bg-background px-1 text-foreground hover:bg-accent dark:hover:bg-muted',
|
||||
context.isFocused &&
|
||||
'bg-[#ebf3ff] hover:bg-[#ebf3ff] dark:bg-muted',
|
||||
{
|
||||
'bg-[#ebf3ff] hover:bg-[#ebf3ff] dark:bg-muted':
|
||||
context.isFocused,
|
||||
},
|
||||
item.data.disabled && 'pointer-events-none opacity-50',
|
||||
)}
|
||||
>
|
||||
|
||||
@@ -33,6 +33,8 @@ export default function PinnedMainNav() {
|
||||
observer.observe(scrollContainerRef.current, {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
// run scrollToElement when the class changes because of focus
|
||||
attributeFilter: ['class'],
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
10
pnpm-lock.yaml
generated
10
pnpm-lock.yaml
generated
@@ -431,8 +431,8 @@ importers:
|
||||
specifier: ^2.10.0
|
||||
version: 2.10.0(react@18.2.0)
|
||||
react-complex-tree:
|
||||
specifier: ^2.4.5
|
||||
version: 2.4.6(react@18.2.0)
|
||||
specifier: ^2.6.0
|
||||
version: 2.6.0(react@18.2.0)
|
||||
react-day-picker:
|
||||
specifier: 9.6.3
|
||||
version: 9.6.3(react@18.2.0)
|
||||
@@ -14147,8 +14147,8 @@ packages:
|
||||
react: 18.2.0
|
||||
react-dom: 18.2.0
|
||||
|
||||
react-complex-tree@2.4.6:
|
||||
resolution: {integrity: sha512-Akt55R8sI2r66ngxwU7lSgh0YxoBsQHjaVnLzRVCL3Xe+7vbrYfkRpdCK9i/Awga2vYkkdAh9z8etnO3PF/lAg==}
|
||||
react-complex-tree@2.6.0:
|
||||
resolution: {integrity: sha512-kDDuWih5VUz9cXgTKGnDBnMMoM4lvbn3/yCPs2D0jI9Z724BNeraeA5yBqyKqbIRhESQOlCyAyYW9WUqljFP1Q==}
|
||||
peerDependencies:
|
||||
react: 18.2.0
|
||||
|
||||
@@ -34964,7 +34964,7 @@ snapshots:
|
||||
react: 18.2.0
|
||||
react-dom: 18.2.0(react@18.2.0)
|
||||
|
||||
react-complex-tree@2.4.6(react@18.2.0):
|
||||
react-complex-tree@2.6.0(react@18.2.0):
|
||||
dependencies:
|
||||
react: 18.2.0
|
||||
|
||||
|
||||
Reference in New Issue
Block a user