studio-variable/designtopack
4
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

Update Menu component: make menu sticky, fix menu button and add href to menu links

Browse source
This commit is contained in:
Timothée Goguely 2024-09-09 20:05:47 +02:00
parent b57f896c21
commit dc4abf68a6
1 changed files with 8 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/components/Menu.vue
View file

@ -12,17 +12,17 @@
<nav class="w-full | flow"> <nav class="w-full | flow">
<ul class="flex"> <ul class="flex">
<li data-icon="home" class="active"> <li data-icon="home" class="active">
<a href="#" aria-current="page">Home</a> <a href="/" aria-current="page">Home</a>
</li> </li>
<li data-icon="megaphone" data-count="4"> <li data-icon="megaphone" data-count="4">
<a href="#">Notifications</a> <a href="/notifications">Notifications</a>
</li> </li>
<li data-icon="calendar"> <li data-icon="calendar">
<a href="#">Réunions</a> <a href="/reunions">Réunions</a>
<span class="pill pill--secondary">Dans 2h</span> <span class="pill pill--secondary">Dans 2h</span>
</li> </li>
<li data-icon="inspiration"> <li data-icon="inspiration">
<a href="#">Inspirations</a> <a href="/inspirations">Inspirations</a>
<span class="pill pill--secondary">Nouveauté</span> <span class="pill pill--secondary">Nouveauté</span>
</li> </li>
</ul> </ul>
@ -59,7 +59,7 @@
<style scoped> <style scoped>
button[aria-controls="menu"] { button[aria-controls="menu"] {
position: absolute; position: fixed;
z-index: 10; z-index: 10;
width: 2.5rem; width: 2.5rem;
height: 2.5rem; height: 2.5rem;
@ -88,6 +88,9 @@ button[aria-controls="menu"][aria-expanded="false"] {
--direction: column; --direction: column;
--items: flex-start; --items: flex-start;
--wrap: no-wrap; --wrap: no-wrap;
position: -webkit-sticky;
position: sticky;
top: var(--gutter);
width: var(--sidebar-width); width: var(--sidebar-width);
height: calc(100vh - var(--gutter) * 2); height: calc(100vh - var(--gutter) * 2);
height: calc(100dvh - var(--gutter) * 2); height: calc(100dvh - var(--gutter) * 2);