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

Fix main header display when menu is not expanded and toggle button active style

Browse source
This commit is contained in:
Timothée Goguely 2024-11-20 15:24:34 +01:00
parent 92c9dcb013
commit e29738c4ab
2 changed files with 6 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/assets/css/src/2.blocks.button.css
View file

@ -35,7 +35,6 @@
} }
.btn.active, .btn.active,
.btn:active,
.btn[aria-pressed="true"], .btn[aria-pressed="true"],
input[type="checkbox"]:checked + .btn--primary { input[type="checkbox"]:checked + .btn--primary {
--btn-background: var(--color-primary-100); --btn-background: var(--color-primary-100);

8
src/components/Menu.vue
View file

@ -28,7 +28,8 @@
</button> </button>
<div v-if="isExpanded" id="menu" class="flex | rounded-xl"> <div v-if="isExpanded" id="menu" class="flex | rounded-xl">
<header class="w-full | flex"> <header class="w-full | flex">
<p>Nom du service</p> <!-- TODO: à dynamiser en récupérant le $site->title() -->
<p>Design to Light</p>
</header> </header>
<nav class="w-full | flow"> <nav class="w-full | flow">
<ul class="flex"> <ul class="flex">
@ -138,7 +139,7 @@ function isCurrent(navItem) {
} }
</script> </script>
<style scoped> <style>
button[aria-controls="menu"] { button[aria-controls="menu"] {
position: fixed; position: fixed;
z-index: 10; z-index: 10;
@ -161,6 +162,9 @@ button[aria-controls="menu"][aria-expanded="false"] {
padding: 1.125rem; padding: 1.125rem;
transform: rotate(180deg); transform: rotate(180deg);
} }
button[aria-controls="menu"][aria-expanded="false"] + main > header {
margin-left: 4rem;
}
/* Menu */ /* Menu */