Combine Rules and Admin corner links into one upper-right menu
Replace the fixed Rules link (upper-left) and the creator-only Admin link (upper-right) with a single collapsible ☰ Menu in the upper right, leaving the event log alone in its corner. CornerMenu always lists the Rules link; pages can contribute context-specific entries through the extraMenuLinks store, which Dashboard uses for the creator-only Admin link. This gives future misc sub-pages a home without eating more screen corners. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
87
frontend/src/components/CornerMenu.svelte
Normal file
87
frontend/src/components/CornerMenu.svelte
Normal file
@@ -0,0 +1,87 @@
|
||||
<script>
|
||||
import { extraMenuLinks } from '../lib/menu';
|
||||
|
||||
let open = false;
|
||||
|
||||
const baseLinks = [
|
||||
{ label: '📖 Rules', href: '/rules', external: true, title: 'Open the rulebook in a new tab' },
|
||||
];
|
||||
|
||||
$: links = [...$extraMenuLinks, ...baseLinks];
|
||||
|
||||
function handleWindowClick(event) {
|
||||
if (open && !event.target.closest('.corner-menu')) {
|
||||
open = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window on:click={handleWindowClick} />
|
||||
|
||||
<div class="corner-menu">
|
||||
<button class="menu-toggle" class:open on:click={() => (open = !open)} title="Menu">
|
||||
☰ Menu
|
||||
</button>
|
||||
{#if open}
|
||||
<nav class="menu-dropdown">
|
||||
{#each links as link}
|
||||
<a
|
||||
href={link.href}
|
||||
target={link.external ? '_blank' : undefined}
|
||||
rel={link.external ? 'noopener' : undefined}
|
||||
title={link.title}
|
||||
on:click={() => (open = false)}
|
||||
>{link.label}</a>
|
||||
{/each}
|
||||
</nav>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.corner-menu {
|
||||
position: fixed;
|
||||
top: 12px;
|
||||
right: 16px;
|
||||
z-index: 1001;
|
||||
text-align: right;
|
||||
}
|
||||
.menu-toggle {
|
||||
padding: 6px 14px;
|
||||
border-radius: 16px;
|
||||
background: rgba(10, 15, 25, 0.9);
|
||||
border: 1px solid var(--glass-border-focus);
|
||||
color: var(--neon-cyan);
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
font-family: var(--font-heading);
|
||||
cursor: pointer;
|
||||
}
|
||||
.menu-toggle:hover, .menu-toggle.open {
|
||||
background: rgba(0, 242, 254, 0.1);
|
||||
}
|
||||
.menu-dropdown {
|
||||
margin-top: 6px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: rgba(10, 15, 25, 0.95);
|
||||
border: 1px solid var(--glass-border-focus);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.menu-dropdown a {
|
||||
padding: 8px 16px;
|
||||
color: var(--neon-cyan);
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
font-family: var(--font-heading);
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.menu-dropdown a:hover {
|
||||
background: rgba(0, 242, 254, 0.1);
|
||||
}
|
||||
.menu-dropdown a + a {
|
||||
border-top: 1px solid rgba(0, 242, 254, 0.15);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user