Added stash menu with remove and rename.

This commit is contained in:
2024-03-27 00:06:03 +01:00
parent e4638324f7
commit c018f54a12
22 changed files with 620 additions and 623 deletions

View File

@@ -7,66 +7,78 @@
class="sidebar"
@click.stop
>
<Link href="/updates">
<h1 class="title">
<div
class="logo"
v-html="logo"
/>
</h1>
</Link>
<div class="nav">
<Link href="/updates">
<h1 class="title">
<div
class="logo"
v-html="logo"
/>
</h1>
</Link>
<ul class="nolist menu">
<li
class="menu-item"
:class="{ active: activePage === 'updates' }"
>
<a
href="/updates"
class="menu-link nolink"
>Updates</a>
</li>
<ul class="nolist menu">
<li
class="menu-item"
:class="{ active: activePage === 'updates' }"
>
<a
href="/updates"
class="menu-link nolink"
>Updates</a>
</li>
<li
class="menu-item"
:class="{ active: activePage === 'actors' }"
>
<a
href="/actors"
class="menu-link nolink"
>Actors</a>
</li>
<li
class="menu-item"
:class="{ active: activePage === 'actors' }"
>
<a
href="/actors"
class="menu-link nolink"
>Actors</a>
</li>
<li
class="menu-item"
:class="{ active: activePage === 'channels' }"
>
<a
href="/channels"
class="menu-link nolink"
>Channels</a>
</li>
<li
class="menu-item"
:class="{ active: activePage === 'channels' }"
>
<a
href="/channels"
class="menu-link nolink"
>Channels</a>
</li>
<li
class="menu-item"
:class="{ active: activePage === 'tags' }"
>
<a
href="/tags"
class="menu-link nolink"
>Tags</a>
</li>
<li
class="menu-item"
:class="{ active: activePage === 'tags' }"
>
<a
href="/tags"
class="menu-link nolink"
>Tags</a>
</li>
<li
class="menu-item"
:class="{ active: activePage === 'movies' }"
>
<a
href="/movies"
class="menu-link nolink"
>Movies</a>
</li>
</ul>
<li
class="menu-item"
:class="{ active: activePage === 'movies' }"
>
<a
href="/movies"
class="menu-link nolink"
>Movies</a>
</li>
</ul>
</div>
<div
class="footer"
@click="emit('sidebar')"
>
<Icon
icon="cross2"
class="close"
/>
</div>
</div>
</div>
</template>
@@ -96,6 +108,8 @@ const activePage = computed(() => pageContext.urlParsed.pathname.split('/')[1]);
}
.sidebar {
display: flex;
flex-direction: column;
width: 15rem;
max-width: 100%;
height: 100%;
@@ -104,6 +118,10 @@ const activePage = computed(() => pageContext.urlParsed.pathname.split('/')[1]);
box-shadow: 0 0 3px var(--shadow-strong-30);
}
.nav {
flex-grow: 1;
}
.title {
margin: 0;
}
@@ -134,4 +152,27 @@ const activePage = computed(() => pageContext.urlParsed.pathname.split('/')[1]);
color: var(--primary);
}
}
.footer {
height: 3rem;
display: flex;
align-items: stretch;
justify-content: flex-end;
box-shadow: 0 0 3px var(--shadow-weak-30);
.close {
width: 1rem;
padding: 0 1rem;
height: auto;
fill: var(--shadow);
}
&:hover {
cursor: pointer;
.icon {
fill: var(--primary);
}
}
}
</style>