nav: context-aware New button for database routes
- Show "New character/weapon/summon" pill button on database pages - Keep existing circular + button for team creation elsewhere 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
43c291327c
commit
39b1ed9f64
1 changed files with 61 additions and 11 deletions
|
|
@ -64,6 +64,35 @@
|
||||||
// Database route detection
|
// Database route detection
|
||||||
const isDatabaseRoute = $derived($page.url.pathname.startsWith(localizeHref('/database')))
|
const isDatabaseRoute = $derived($page.url.pathname.startsWith(localizeHref('/database')))
|
||||||
|
|
||||||
|
// Detect current database entity type
|
||||||
|
const currentDatabaseEntity = $derived.by(() => {
|
||||||
|
const path = $page.url.pathname
|
||||||
|
if (path.startsWith(databaseCharactersHref)) return 'character'
|
||||||
|
if (path.startsWith(databaseWeaponsHref)) return 'weapon'
|
||||||
|
if (path.startsWith(databaseSummonsHref)) return 'summon'
|
||||||
|
return null
|
||||||
|
})
|
||||||
|
|
||||||
|
// Database "New" button config
|
||||||
|
const databaseNewButtonLabel = $derived(
|
||||||
|
currentDatabaseEntity === 'character'
|
||||||
|
? 'New character'
|
||||||
|
: currentDatabaseEntity === 'weapon'
|
||||||
|
? 'New weapon'
|
||||||
|
: currentDatabaseEntity === 'summon'
|
||||||
|
? 'New summon'
|
||||||
|
: 'New'
|
||||||
|
)
|
||||||
|
const databaseNewButtonHref = $derived(
|
||||||
|
currentDatabaseEntity === 'character'
|
||||||
|
? localizeHref('/database/characters/new')
|
||||||
|
: currentDatabaseEntity === 'weapon'
|
||||||
|
? localizeHref('/database/weapons/new')
|
||||||
|
: currentDatabaseEntity === 'summon'
|
||||||
|
? localizeHref('/database/summons/new')
|
||||||
|
: localizeHref('/database')
|
||||||
|
)
|
||||||
|
|
||||||
// Function to check if a nav item is selected
|
// Function to check if a nav item is selected
|
||||||
function isNavSelected(href: string): boolean {
|
function isNavSelected(href: string): boolean {
|
||||||
const path = $page.url.pathname
|
const path = $page.url.pathname
|
||||||
|
|
@ -232,17 +261,32 @@
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
{/if}
|
{/if}
|
||||||
<Button
|
{#if isDatabaseRoute}
|
||||||
icon="plus"
|
<Button
|
||||||
iconOnly
|
icon="plus"
|
||||||
shape="circle"
|
shape="pill"
|
||||||
variant="primary"
|
variant="primary"
|
||||||
{...(userElement ? { element: userElement } : {})}
|
size="small"
|
||||||
elementStyle={Boolean(userElement)}
|
{...(userElement ? { element: userElement } : {})}
|
||||||
class="new-team-button"
|
elementStyle={Boolean(userElement)}
|
||||||
aria-label="New team"
|
class="new-item-button"
|
||||||
href={newTeamHref}
|
href={databaseNewButtonHref}
|
||||||
/>
|
>
|
||||||
|
{databaseNewButtonLabel}
|
||||||
|
</Button>
|
||||||
|
{:else}
|
||||||
|
<Button
|
||||||
|
icon="plus"
|
||||||
|
iconOnly
|
||||||
|
shape="circle"
|
||||||
|
variant="primary"
|
||||||
|
{...(userElement ? { element: userElement } : {})}
|
||||||
|
elementStyle={Boolean(userElement)}
|
||||||
|
class="new-team-button"
|
||||||
|
aria-label="New team"
|
||||||
|
href={newTeamHref}
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<!-- Settings Modal -->
|
<!-- Settings Modal -->
|
||||||
|
|
@ -482,6 +526,12 @@
|
||||||
// The Button component already handles size, shape, colors, etc.
|
// The Button component already handles size, shape, colors, etc.
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Style the database "New item" button
|
||||||
|
:global(.new-item-button) {
|
||||||
|
padding-top: spacing.$unit-2x !important;
|
||||||
|
padding-bottom: spacing.$unit-2x !important;
|
||||||
|
}
|
||||||
|
|
||||||
// Element-specific SELECTED states for navigation links
|
// Element-specific SELECTED states for navigation links
|
||||||
// Hover states remain the default grey (defined in base styles above)
|
// Hover states remain the default grey (defined in base styles above)
|
||||||
nav.element-wind {
|
nav.element-wind {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue