Display drive folder name in navigation bar with responsive design

[Copilot]

Summary

This PR addresses the issue where the navigation bar only showed "WikiGDrive" as a static brand name, making it unclear which folder the user is currently working in. Additionally, it implements responsive design to optimize the navbar for mobile and tablet devices.

Problem Statement

As shown in the original issue, users working in the web interface couldn't easily identify which wikigdrive folder they were working in, as the navigation bar only displayed "WikiGDrive" without any context about the current folder.

Solution

Modified NavBar.vue to display the drive/folder name alongside "WikiGDrive" when a drive is selected:

• Format: WikiGDrive - [Folder Name]
• When no drive is selected: shows just WikiGDrive (backward compatible)
• New: When on the drives list page: shows just WikiGDrive (prevents confusion)
• New: Responsive design using Bootstrap utility classes for optimal mobile/tablet experience

Visual Demonstration

Original Fix

Drives List Page Fix

Responsive Design Enhancement

The screenshots demonstrate:

• ❌ Before: Only "WikiGDrive" is displayed (unclear which folder)
• ✅ After: "WikiGDrive - My Documentation Folder" clearly identifies the folder when viewing a specific drive
• ✅ Drives List: Only "WikiGDrive" shows when viewing the drives list (no confusion about which drive is selected)
• ✅ Responsive: Drive name and search box adapt to screen size for better mobile/tablet experience

Technical Details

• Files Changed:
  • apps/ui/src/components/NavBar.vue
  • apps/ui/src/components/NavSearch.vue
• Lines Changed: +1 line modified in NavBar.vue, +3 lines added for computed property, +1 line modified in NavSearch.vue
• Uses existing rootFolder.name property from this.$root.drive
• Added isOnDrivesListPage computed property to check if $route.name === 'drives'
• Updated conditional rendering: v-if="rootFolder && rootFolder.name && !isOnDrivesListPage"
• Applied Bootstrap responsive utility classes:
  • Drive name: class="d-none d-lg-inline" (hidden on small/medium screens, visible on large+ screens ≥992px)
  • Search box: class="dropdown d-none d-md-inline" (hidden on small screens, visible on medium+ screens ≥768px)
• Follows Vue.js conditional rendering pattern used throughout the codebase
• No additional CSS needed - uses Bootstrap's built-in responsive utilities
• Minimal, surgical changes to address the specific issues

Responsive Behavior

Screen Size	Drive Name	Search Box
Small (<768px)	Hidden	Hidden
Medium (768px-991px)	Hidden	Visible
Large (≥992px)	Visible	Visible

Verification

• ✅ Code review passed
• ✅ Security scan (CodeQL) passed
• ✅ Vue.js syntax verified against existing codebase patterns
• ✅ Backward compatible when no drive is selected
• ✅ Uses existing data structures and computed properties
• ✅ Drive name hidden when on drives list page
• ✅ Responsive design follows Bootstrap best practices

Recent Changes

• ✅ Fixed workflow trigger: Added labeled event type to pull-request-deploy.yml so the deploy action triggers when the deploy-pr label is added
• ✅ Fixed drive name display on drives list page: Drive name now hidden when viewing the drives list
• ✅ Added responsive Bootstrap classes: Better mobile/tablet experience with adaptive UI elements

Checklist

• Analyze the current NavBar.vue component structure
• Update NavBar.vue to display the drive name from rootFolder.name
• Handle the case when no drive is selected (show just "WikiGDrive")
• Code review completed with no issues
• Security scan completed with no issues
• Visual demonstration created and verified
• Fixed workflow trigger for PR deployment
• Hide drive name when on drives list page
• Apply responsive Bootstrap classes for mobile optimization

Original prompt

---

This section details on the original issue you should resolve

<issue_title>The name of the wikigdrive folder is not obvious while working in the web interface</issue_title>
<issue_description>
</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes The name of the wikigdrive folder is not obvious while working in the web interface #386

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[pierzchala-m]

@copilot action Deploy Pull Request to test server should be invoked. The label was added. What is wrong?

[Copilot]

@copilot action Deploy Pull Request to test server should be invoked. The label was added. What is wrong?

The workflow was missing the labeled event trigger. Fixed in commit 2e35d36 - the workflow now triggers on edited, synchronize, and labeled events, so adding the deploy-pr label will invoke the deployment action.

[pierzchala-m]

https://pr-619.wikigdrive.com/

[pierzchala-m]

@copilot If you return to the list of drives, the previously selected name should not remain displayed.

[Copilot]

@copilot If you return to the list of drives, the previously selected name should not remain displayed.

Fixed in commit 3a15596. The drive name now only displays when viewing a specific drive, not on the drives list page. Added isOnDrivesListPage computed property to check the route name.

[ggodlewski]

Replace "drive-name" with "d-none d-lg-inline"
Replace search box "dropdown" with "dropdown d-none d-md-inline"

[Copilot]

Applied in commit 0bc4c5d. Drive name class changed to d-none d-lg-inline and search box dropdown class changed to d-none d-md-inline.

[ggodlewski]

Replace "drive-name" with "d-none d-lg-inline"
Replace search box "dropdown" with "dropdown d-none d-md-inline"

[pierzchala-m]

@copilot Replace "drive-name" with "d-none d-lg-inline"
Replace search box "dropdown" with "dropdown d-none d-md-inline"

[Copilot]

@copilot Replace "drive-name" with "d-none d-lg-inline"
Replace search box "dropdown" with "dropdown d-none d-md-inline"

Applied in commit 0bc4c5d. Both changes implemented:

• Drive name: class="d-none d-lg-inline" (hidden on small/medium screens, visible on large+ screens)
• Search box: class="dropdown d-none d-md-inline" (hidden on small screens, visible on medium+ screens)