diff --git a/app/frontend/styles/app.scss b/app/frontend/styles/app.scss index b5c61c9..4553c1f 100644 --- a/app/frontend/styles/app.scss +++ b/app/frontend/styles/app.scss @@ -1,3 +1,24 @@ +@import "components/header"; +@import "components/burger-menu"; @tailwind base; @tailwind components; @tailwind utilities; + +hr { + @apply h-px my-2 border-0; + @apply bg-gray-300 dark:bg-gray-500; +} + +.app { + &__text { + @apply text-gray-900 dark:text-gray-100 + } + + &__text-bold { + @apply app__text font-bold + } + + &__text-light { + @apply text-gray-500 dark:text-gray-300 font-light + } +} diff --git a/app/frontend/styles/components/burger-menu.scss b/app/frontend/styles/components/burger-menu.scss new file mode 100644 index 0000000..a53be92 --- /dev/null +++ b/app/frontend/styles/components/burger-menu.scss @@ -0,0 +1,79 @@ +#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; + } + } +} diff --git a/app/frontend/templates/base.html.twig b/app/frontend/templates/base.html.twig index 7a3b9d0..12c356b 100644 --- a/app/frontend/templates/base.html.twig +++ b/app/frontend/templates/base.html.twig @@ -1,4 +1,6 @@ +{% set logged_in = true %} + diff --git a/app/frontend/templates/components/burger-menu.html.twig b/app/frontend/templates/components/burger-menu.html.twig new file mode 100644 index 0000000..83d6e3e --- /dev/null +++ b/app/frontend/templates/components/burger-menu.html.twig @@ -0,0 +1,71 @@ + +
+ +
+
+ {% include 'icons/user-placeholder.svg.twig' with {'class': 'h-full w-full'} %} +
+ {% if logged_in %} + Username + username@email.com +
+ {{ _self.user_action('Profile', 'user') }} + {{ _self.user_action('Settings', 'settings') }} + {{ _self.user_action('Logout', 'logout') }} +
+ {% else %} + not logged in + {% endif %} +
+ {% if not logged_in %} +
+ + {% include 'icons/euphcloud.svg.twig' with {'class': 'w-6 h-6'} %} + Login with Euphcloud + + {% endif %} +
+ +
+ +{% macro user_action(name, icon) %} + +{% endmacro %} + +{% macro nav_item(name, href, icon) %} +
  • + + {% include 'icons/' ~ icon ~ '.svg.twig' with {'class': 'h-6 w-6'} %} + {{ name }} + +
    • +{% endmacro %} diff --git a/app/frontend/templates/icons/close.svg.twig b/app/frontend/templates/icons/close.svg.twig index 1778554..da43584 100644 --- a/app/frontend/templates/icons/close.svg.twig +++ b/app/frontend/templates/icons/close.svg.twig @@ -1,5 +1,17 @@ -