#5: Basic Burger menu
This commit is contained in:
parent
e776683a18
commit
2fa02a3214
GPG key ID:
A494330694B208EF
10 changed files with 263 additions and 4 deletions
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
|
|
|||
79
app/frontend/styles/components/burger-menu.scss
Normal file
79
app/frontend/styles/components/burger-menu.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
{% set logged_in = true %}
|
||||
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
|
|
|
|||
71
app/frontend/templates/components/burger-menu.html.twig
Normal file
71
app/frontend/templates/components/burger-menu.html.twig
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
<button
|
||||
id="burger-menu__button-open"
|
||||
type="button"
|
||||
data-drawer-target="burger-menu"
|
||||
data-drawer-show="burger-menu"
|
||||
data-drawer-placement="right"
|
||||
aria-controls="burger-menu"
|
||||
>
|
||||
{% include 'icons/bars.svg.twig' with {'class': 'h-full w-full'} %}
|
||||
</button>
|
||||
<div
|
||||
id="burger-menu"
|
||||
class="transition-transform translate-x-full"
|
||||
tabindex="-1"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
id="burger-menu__button-close"
|
||||
data-drawer-hide="burger-menu"
|
||||
aria-controls="burger-menu"
|
||||
>
|
||||
{% include 'icons/close.svg.twig' with {'class': 'h-full w-full'} %}
|
||||
</button>
|
||||
<div id="burger-menu__user-section">
|
||||
<div id="burger-menu__user-picture-wrapper">
|
||||
{% include 'icons/user-placeholder.svg.twig' with {'class': 'h-full w-full'} %}
|
||||
</div>
|
||||
{% if logged_in %}
|
||||
<span id="burger-menu__user-name">Username</span>
|
||||
<span id="burger-menu__user-email">username@email.com</span>
|
||||
<div id="burger-menu__user-actions">
|
||||
{{ _self.user_action('Profile', 'user') }}
|
||||
{{ _self.user_action('Settings', 'settings') }}
|
||||
{{ _self.user_action('Logout', 'logout') }}
|
||||
</div>
|
||||
{% else %}
|
||||
<span id="burger-menu__user-info">not logged in</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if not logged_in %}
|
||||
<hr/>
|
||||
<a id="burger-menu__login">
|
||||
{% include 'icons/euphcloud.svg.twig' with {'class': 'w-6 h-6'} %}
|
||||
<span>Login with Euphcloud</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
<hr/>
|
||||
<nav id="burger-menu__nav">
|
||||
<ul id="burger-menu__nav-list">
|
||||
{{ _self.nav_item('Test1', '#test1', 'bars') }}
|
||||
{{ _self.nav_item('Test2', '#test2', 'bars') }}
|
||||
{{ _self.nav_item('Test3', '#test3', 'bars') }}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{% macro user_action(name, icon) %}
|
||||
<button>
|
||||
{% include 'icons/' ~ icon ~ '.svg.twig' with {'class': 'h-6 w-6'} %}
|
||||
<span>{{ name }}</span>
|
||||
</button>
|
||||
{% endmacro %}
|
||||
|
||||
{% macro nav_item(name, href, icon) %}
|
||||
<li id="burger-menu__nav-item">
|
||||
<a id="burger-menu__nav-link" href="{{ href }}">
|
||||
{% include 'icons/' ~ icon ~ '.svg.twig' with {'class': 'h-6 w-6'} %}
|
||||
<span class="flex-1">{{ name }}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endmacro %}
|
||||
|
|
@ -1,5 +1,17 @@
|
|||
<svg class="text-gray-800 dark:text-white {{ class|default('') }}" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
|
||||
width="24" height="24" fill="none" viewBox="0 0 24 24">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M6 18 17.94 6M18 18 6.06 6"/>
|
||||
<svg
|
||||
class="text-gray-800 dark:text-white {{ class|default('') }}"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M6 18 17.94 6M18 18 6.06 6"
|
||||
/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 328 B After Width: | Height: | Size: 387 B |
14
app/frontend/templates/icons/euphcloud.svg.twig
Normal file
14
app/frontend/templates/icons/euphcloud.svg.twig
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<svg
|
||||
class="text-gray-800 dark:text-white {{ class|default('') }}"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xml:space="preserve"
|
||||
width="32mm"
|
||||
height="32mm"
|
||||
viewBox="0 0 32 32"
|
||||
>
|
||||
<path
|
||||
d="M16 0A16 16 0 0 0 0 16a16 16 0 0 0 16 16 16 16 0 0 0 16-16A16 16 0 0 0 16 0zm-.555 1.034 3.304 3.302a7.95 7.95 0 0 1 0 11.243l-2.97 2.971a4.364 4.364 0 0 0 0 6.174l7.852-7.852a8.532 8.532 0 0 0 1.868-4.747l.079-1.093c2.55 2.82 1.891 7.774.267 9.398l-10.47 10.537L6.5 22.09a8.566 8.566 0 0 1 0-12.114l8.945-8.943zm.03 5.936-6.23 6.226a3.512 3.512 0 0 0 0 4.966l.508.507 6.07-6.07a3.732 3.732 0 0 0 0-5.28l-.348-.35z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 734 B |
17
app/frontend/templates/icons/logout.svg.twig
Normal file
17
app/frontend/templates/icons/logout.svg.twig
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<svg
|
||||
class="text-gray-800 dark:text-white {{ class|default('') }}"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M20 12H8m12 0-4 4m4-4-4-4M9 4H7a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h2"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 425 B |
14
app/frontend/templates/icons/settings.svg.twig
Normal file
14
app/frontend/templates/icons/settings.svg.twig
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<svg
|
||||
class="text-gray-800 dark:text-white {{ class|default('') }}"
|
||||
aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M17 10v1.126c.367.095.714.24 1.032.428l.796-.797 1.415 1.415-.797.796c.188.318.333.665.428 1.032H21v2h-1.126c-.095.367-.24.714-.428 1.032l.797.796-1.415 1.415-.796-.797a3.979 3.979 0 0 1-1.032.428V20h-2v-1.126a3.977 3.977 0 0 1-1.032-.428l-.796.797-1.415-1.415.797-.796A3.975 3.975 0 0 1 12.126 16H11v-2h1.126c.095-.367.24-.714.428-1.032l-.797-.796 1.415-1.415.796.797A3.977 3.977 0 0 1 15 11.126V10h2Zm.406 3.578.016.016c.354.358.574.85.578 1.392v.028a2 2 0 0 1-3.409 1.406l-.01-.012a2 2 0 0 1 2.826-2.83ZM5 8a4 4 0 1 1 7.938.703 7.029 7.029 0 0 0-3.235 3.235A4 4 0 0 1 5 8Zm4.29 5H7a4 4 0 0 0-4 4v1a2 2 0 0 0 2 2h6.101A6.979 6.979 0 0 1 9 15c0-.695.101-1.366.29-2Z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 969 B |
14
app/frontend/templates/icons/user-placeholder.svg.twig
Normal file
14
app/frontend/templates/icons/user-placeholder.svg.twig
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<svg
|
||||
class="text-gray-800 dark:text-white {{ class|default('') }}"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24" height="24"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M12 20a7.966 7.966 0 0 1-5.002-1.756l.002.001v-.683c0-1.794 1.492-3.25 3.333-3.25h3.334c1.84 0 3.333 1.456 3.333 3.25v.683A7.966 7.966 0 0 1 12 20ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10c0 5.5-4.44 9.963-9.932 10h-.138C6.438 21.962 2 17.5 2 12Zm10-5c-1.84 0-3.333 1.455-3.333 3.25S10.159 13.5 12 13.5c1.84 0 3.333-1.455 3.333-3.25S13.841 7 12 7Z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 650 B |
15
app/frontend/templates/icons/user.svg.twig
Normal file
15
app/frontend/templates/icons/user.svg.twig
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<svg
|
||||
class="text-gray-800 dark:text-white {{ class|default('') }}"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M12 4a4 4 0 1 0 0 8 4 4 0 0 0 0-8Zm-2 9a4 4 0 0 0-4 4v1a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-1a4 4 0 0 0-4-4h-4Z"
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 413 B |
Loading…
Reference in a new issue