Website/app/frontend/styles/components/BurgerMenu.scss
Snoweuph 89de0121a3
Some checks failed
Quality Check / QS Frontend (push) Failing after 12s
Quality Check / QS Mixed (push) Failing after 11s
Quality Check / QS Backend (push) Successful in 14s
Use Symfony UX Twig
2024-07-20 09:45:22 +02:00

79 lines
1.4 KiB
SCSS

#burger-menu {
@apply fixed top-0 right-0 h-screen overflow-y-auto z-40;
@apply flex flex-col p-2 gap-2 w-64;
@apply bg-gray-100 dark:bg-gray-700;
&__button-open {
@apply ml-auto h-full aspect-square;
}
&__button-close {
@apply h-8 w-8 absolute right-2 aspect-square;
}
&__user-section {
@apply flex flex-col items-center;
@apply text-black dark:text-white;
}
&__user-picture-wrapper {
@apply w-1/3 aspect-square mx-auto;
}
&__user-name {
@apply app__text-bold text-xl;
@apply h-6;
}
&__user-email {
@apply app__text-light text-base;
@apply h-6;
}
&__user-info {
@apply app__text-light text-base;
@apply h-6;
}
&__user-actions {
@apply inline-flex mt-2;
button {
@apply inline-flex p-1;
@apply bg-transparent;
@apply app__text text-sm;
@apply border border-r-0 border-gray-900 dark:border-white;
&:first-of-type {
@apply rounded-s-lg;
}
&:last-of-type {
@apply rounded-e-lg border-r;
}
}
}
&__login {
@apply flex p-2 gap-2 items-center justify-center;
@apply rounded-lg bg-blue-500 app__text;
}
&__nav {
@apply text-lg app__text;
&-list {
@apply flex flex-col gap-2;
}
&-item {
@apply h-8;
}
&-link {
@apply flex p-1 gap-2 items-center;
@apply rounded-md hover:bg-gray-200 dark:hover:bg-gray-600;
}
}
}