{% include "@Components/aside/user-panel-aside/user-panel-aside.twig" with {props: user_sidebar_sample} %}
<div class="a-user-panel u-rounded-3">
<div class="i-user-panel d-flex flex-column gap-2 p-3 u-rounded-3 u-bg-tertiary-300">
<div class="i-support u-posr d-flex align-items-center gap-2">
<div class="i-support__img u-rounded-full u-posr flex-shrink-0 d-flex align-items-center justify-content-center">
<div class="img u-posr overflow-hidden --ratio-1-1 u-rounded-full">
<picture>
<img src="" data-src="https://placehold.co/56x56" alt="Vilém Zahrádka" width="56" height="56" draggable="false" srcset="" data-srcset="https://placehold.co/56x56 1x, https://placehold.co/112x112 2x">
</picture>
</div>
</div>
<div class="i-support__text d-flex flex-column">
<div class="i-support__title u-fw-600 u-fz-lg">Vilém Zahrádka</div>
<div class="i-support__perex u-fw-600 u-fz-sm u-color-text-400">email@seznam.cz</div>
</div>
</div>
<div class="i-user-panel__link-wrapper d-flex flex-column">
<a class="link d-inline-flex u-fw-600 align-items-center --text --icon-before --hover-icon i-user-panel__link u-posr --active" href="#" title="Můj účet">
<span class="link__title">Můj účet</span>
<span class="link__icon d-flex align-items-center justify-content-center flex-shrink-0">
<span class="icon d-flex align-items-center justify-content-center --colored --conversion --lg">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#23846F" d="M19.5 22h-1.667v-4.202a2.467 2.467 0 0 0-2.464-2.465H8.631a2.467 2.467 0 0 0-2.464 2.465V22H4.5v-4.202a4.136 4.136 0 0 1 4.13-4.131h6.74a4.136 4.136 0 0 1 4.13 4.13V22ZM12 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10Zm0-8.333a3.333 3.333 0 1 0 0 6.666 3.333 3.333 0 0 0 0-6.666Z"/></svg> </span>
</span>
<span class="link__icon --hover d-none align-items-center justify-content-center flex-shrink-0">
<span class="icon d-flex align-items-center justify-content-center --colored --conversion --lg">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#23846F" d="M19.5 22h-1.667v-4.202a2.467 2.467 0 0 0-2.464-2.465H8.631a2.467 2.467 0 0 0-2.464 2.465V22H4.5v-4.202a4.136 4.136 0 0 1 4.13-4.131h6.74a4.136 4.136 0 0 1 4.13 4.13V22ZM12 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10Z"/></svg> </span>
</span>
</a>
<a class="link d-inline-flex u-fw-600 align-items-center --text --icon-before --hover-icon i-user-panel__link u-posr" href="#" title="Moje objednávky">
<span class="link__title">Moje objednávky</span>
<span class="link__icon d-flex align-items-center justify-content-center flex-shrink-0">
<span class="icon d-flex align-items-center justify-content-center --colored --conversion --lg">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#23846F" d="m19.063 22-3.065-2.101-2.23 1.527-2.23-1.528-2.232 1.526-2.235-1.528L4 22V4.51A2.51 2.51 0 0 1 6.51 2h10.042a2.51 2.51 0 0 1 2.51 2.51V22ZM7.07 17.868l2.234 1.528 2.232-1.528 2.231 1.528 2.23-1.53 1.391.954V4.51a.837.837 0 0 0-.837-.836H6.51a.837.837 0 0 0-.836.836v14.31l1.397-.952Z"/><path fill="#23846F" d="M7.347 8.695h8.368v1.673H7.347V8.695ZM7.347 12.041h6.695v1.674H7.347v-1.674Z"/></svg> </span>
</span>
<span class="link__icon --hover d-none align-items-center justify-content-center flex-shrink-0">
<span class="icon d-flex align-items-center justify-content-center --colored --conversion --lg">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#23846F" fill-rule="evenodd" d="m19.063 22-3.066-2.101-2.229 1.527-2.231-1.528-2.231 1.526-2.235-1.528L4 22V4.51A2.51 2.51 0 0 1 6.51 2h10.042a2.511 2.511 0 0 1 2.511 2.51V22ZM7.347 12.042v1.674h6.695v-1.674H7.347Zm0-3.348v1.674h8.369V8.694H7.347Z" clip-rule="evenodd"/></svg> </span>
</span>
</a>
<a class="link d-inline-flex u-fw-600 align-items-center --text --icon-before --hover-icon i-user-panel__link u-posr" href="#" title="Moje konfigurace">
<span class="link__title">Moje konfigurace</span>
<span class="link__icon d-flex align-items-center justify-content-center flex-shrink-0">
<span class="icon d-flex align-items-center justify-content-center --colored --conversion --lg">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#23846F" d="M18.842 3.667h-6.009V2h-1.666v1.667H5.158L2 12.692v.558A3.755 3.755 0 0 0 5.75 17a3.755 3.755 0 0 0 3.75-3.75v-.558L6.924 5.333h4.243v15H5.333V22h13.334v-1.667h-5.834v-15h4.243L14.5 12.692v.558A3.755 3.755 0 0 0 18.25 17 3.755 3.755 0 0 0 22 13.25v-.558l-3.158-9.025ZM5.75 15.333a2.085 2.085 0 0 1-2.04-1.666h4.08a2.086 2.086 0 0 1-2.04 1.666ZM7.492 12H4.008L5.75 7.022 7.492 12ZM18.25 7.022 19.992 12h-3.484l1.742-4.978Zm0 8.311a2.085 2.085 0 0 1-2.04-1.666h4.082a2.087 2.087 0 0 1-2.042 1.666Z"/></svg> </span>
</span>
<span class="link__icon --hover d-none align-items-center justify-content-center flex-shrink-0">
<span class="icon d-flex align-items-center justify-content-center --colored --conversion --lg">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><g clip-path="url(#clip0_3554_66015)"><path fill="#23846F" d="M18.842 3.667h-6.009V2h-1.666v1.667H5.158L2 12.692v.558A3.755 3.755 0 0 0 5.75 17a3.754 3.754 0 0 0 3.75-3.75v-.558L6.924 5.333h4.243v15H5.333V22h13.334v-1.667h-5.834v-15h4.243L14.5 12.692v.558A3.754 3.754 0 0 0 18.25 17 3.754 3.754 0 0 0 22 13.25v-.558l-3.158-9.025ZM7.493 12H4.007L5.75 7.023 7.493 12ZM18.25 7.023 19.993 12h-3.485l1.742-4.977Z"/></g><defs><clipPath id="clip0_3554_66015"><path fill="#fff" d="M2 2h20v20H2z"/></clipPath></defs></svg> </span>
</span>
</a>
<a class="link d-inline-flex u-fw-600 align-items-center --text --icon-before --hover-icon i-user-panel__link u-posr" href="#" title="Zakoupené zboží">
<span class="link__title">Zakoupené zboží</span>
<span class="link__icon d-flex align-items-center justify-content-center flex-shrink-0">
<span class="icon d-flex align-items-center justify-content-center --colored --conversion --lg">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#23846F" d="M17.669 6.688C17.27 4.04 14.88 2 12 2 9.12 2 6.73 4.04 6.331 6.688H3v12.968C3 20.95 4.101 22 5.455 22h13.09C19.9 22 21 20.949 21 19.656V6.688h-3.331ZM12 3.563c1.976 0 3.629 1.344 4.009 3.124H7.99c.38-1.78 2.033-3.125 4.009-3.125Zm7.364 16.093c0 .431-.367.782-.819.782H5.456c-.452 0-.819-.351-.819-.782V8.25h14.728v11.406ZM12 17.625c3.09 0 5.727-2.713 5.727-6.25v-.781h-1.636v.781c0 2.585-1.835 4.688-4.091 4.688-2.256 0-4.09-2.103-4.09-4.688v-.781H6.272v.781c0 3.551 2.648 6.25 5.727 6.25Z"/></svg> </span>
</span>
<span class="link__icon --hover d-none align-items-center justify-content-center flex-shrink-0">
<span class="icon d-flex align-items-center justify-content-center --colored --conversion --lg">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#23846F" fill-rule="evenodd" d="M17.669 6.688H21v12.968C21 20.95 19.899 22 18.546 22H5.455C4.1 22 3 20.949 3 19.656V6.688h3.331C6.73 4.04 9.12 2 12 2c2.88 0 5.27 2.04 5.669 4.688ZM12 3.563c-1.976 0-3.629 1.344-4.009 3.124h8.018c-.38-1.78-2.033-3.125-4.009-3.125Zm0 14.062c3.09 0 5.727-2.713 5.727-6.25v-.781h-1.636v.781c0 2.585-1.835 4.688-4.091 4.688-2.256 0-4.09-2.103-4.09-4.688v-.781H6.272v.781c0 3.551 2.648 6.25 5.727 6.25Z" clip-rule="evenodd"/></svg> </span>
</span>
</a>
<a class="link d-inline-flex u-fw-600 align-items-center --text --icon-before --hover-icon i-user-panel__link u-posr" href="#" title="Adresy">
<span class="link__title">Adresy</span>
<span class="link__icon d-flex align-items-center justify-content-center flex-shrink-0">
<span class="icon d-flex align-items-center justify-content-center --colored --conversion --lg">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#23846F" d="m12.375 22-.581-.498C10.993 20.832 4 14.792 4 10.375a8.375 8.375 0 0 1 16.75 0c0 4.417-6.994 10.456-7.791 11.13l-.584.495Zm0-18.19a6.571 6.571 0 0 0-6.564 6.565c0 2.775 4.302 7.208 6.564 9.237 2.261-2.03 6.563-6.466 6.563-9.237a6.571 6.571 0 0 0-6.563-6.564Z"/><path fill="#23846F" d="M12.375 13.694a3.32 3.32 0 1 1 0-6.64 3.32 3.32 0 0 1 0 6.64Zm0-4.98a1.66 1.66 0 1 0 0 3.32 1.66 1.66 0 0 0 0-3.32Z"/></svg> </span>
</span>
<span class="link__icon --hover d-none align-items-center justify-content-center flex-shrink-0">
<span class="icon d-flex align-items-center justify-content-center --colored --conversion --lg">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#23846F" fill-rule="evenodd" d="m12.374 22-.58-.498C10.993 20.832 4 14.792 4 10.375A8.374 8.374 0 0 1 12.374 2a8.374 8.374 0 0 1 8.375 8.375c0 4.417-6.993 10.457-7.79 11.13l-.585.495Zm.001-13.286a1.66 1.66 0 1 0 0 3.32 1.66 1.66 0 0 0 0-3.32Z" clip-rule="evenodd"/></svg> </span>
</span>
</a>
<a class="link d-inline-flex u-fw-600 align-items-center --text --icon-before --hover-icon i-user-panel__link u-posr" href="#" title="Wishlist">
<span class="link__title">Wishlist</span>
<span class="link__icon d-flex align-items-center justify-content-center flex-shrink-0">
<span class="icon d-flex align-items-center justify-content-center --colored --conversion --lg">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#23846F" d="M16.581 3A5.325 5.325 0 0 0 12 5.795 5.325 5.325 0 0 0 7.419 3c-3.093.137-5.532 2.826-5.415 5.97 0 5.739 9.126 12.366 9.514 12.647l.482.347.482-.347c.388-.28 9.514-6.908 9.514-12.646.117-3.145-2.322-5.834-5.415-5.971ZM12 19.879C9.29 17.82 3.67 12.764 3.67 8.97c-.118-2.216 1.57-4.142 3.749-4.277 2.178.135 3.866 2.06 3.748 4.277h1.666c-.118-2.216 1.57-4.142 3.748-4.277 2.18.135 3.867 2.06 3.749 4.277 0 3.795-5.62 8.85-8.33 10.908Z"/></svg> </span>
</span>
<span class="link__icon --hover d-none align-items-center justify-content-center flex-shrink-0">
<span class="icon d-flex align-items-center justify-content-center --colored --conversion --lg">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#23846F" d="M16.581 3A5.325 5.325 0 0 0 12 5.795 5.325 5.325 0 0 0 7.419 3c-3.093.137-5.532 2.826-5.415 5.97 0 5.739 9.126 12.366 9.514 12.647l.482.347.482-.347c.388-.28 9.514-6.908 9.514-12.646.117-3.145-2.322-5.834-5.415-5.971Z"/></svg> </span>
</span>
</a>
<a class="link d-inline-flex u-fw-600 align-items-center --text --icon-before --hover-icon i-user-panel__link u-posr" href="#" title="Hlídací pes">
<span class="link__title">Hlídací pes</span>
<span class="link__icon d-flex align-items-center justify-content-center flex-shrink-0">
<span class="icon d-flex align-items-center justify-content-center --colored --conversion --lg">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#23846F" fill-rule="evenodd" d="M4.306 14.585c-2.017-.4-3.313-2.309-3.313-4.42C.993 5.733 4.207 2 8.548 2c.517 0 .993.16 1.39.428A5.07 5.07 0 0 1 12 2a5.07 5.07 0 0 1 2.063.428A2.46 2.46 0 0 1 15.452 2c4.34 0 7.555 3.733 7.555 8.165 0 2.111-1.297 4.02-3.313 4.42.023.387.034.751.034 1.085 0 2.268-.883 3.91-2.375 4.95C15.908 21.625 13.989 22 12 22c-1.99 0-3.909-.375-5.353-1.38-1.493-1.04-2.375-2.682-2.375-4.95 0-.334.01-.698.034-1.085Zm3.862-10.92c-3.103.208-5.524 2.969-5.524 6.5 0 1.406.775 2.454 1.821 2.755.228-1.745.666-3.721 1.375-5.498.552-1.383 1.311-2.745 2.328-3.758Zm7.663 0c1.018 1.012 1.777 2.374 2.328 3.757.71 1.777 1.147 3.753 1.375 5.498 1.047-.301 1.822-1.35 1.822-2.755 0-3.531-2.422-6.292-5.525-6.5Zm-3.006 16.659c1.461-.093 2.694-.44 3.584-1.06 1.005-.7 1.668-1.81 1.668-3.594 0-1.943-.418-5.047-1.452-7.637C15.567 5.379 14.036 3.651 12 3.651S8.432 5.38 7.374 8.033c-1.033 2.59-1.451 5.694-1.451 7.637 0 1.784.662 2.895 1.667 3.595.89.62 2.124.966 3.584 1.059v-2.116a2.497 2.497 0 0 1-.96-.64c-.987-1.049-.987-2.748 0-3.797a2.42 2.42 0 0 1 3.571 0c.986 1.049.986 2.748 0 3.797-.28.299-.608.511-.96.64v2.116Zm-1.48-5.35a1.03 1.03 0 0 0 0 1.391.888.888 0 0 0 1.31 0 1.03 1.03 0 0 0 0-1.39.887.887 0 0 0-1.31 0Zm-2.76-3.89V9.25h1.651v1.835h-1.65Zm5.178 0V9.25h1.651v1.835h-1.65Z" clip-rule="evenodd"/></svg> </span>
</span>
<span class="link__icon --hover d-none align-items-center justify-content-center flex-shrink-0">
<span class="icon d-flex align-items-center justify-content-center --colored --conversion --lg">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#23846F" fill-rule="evenodd" d="M4.306 14.585c-2.017-.4-3.313-2.309-3.313-4.42C.993 5.733 4.207 2 8.548 2c.517 0 .993.16 1.39.428A5.07 5.07 0 0 1 12 2a5.07 5.07 0 0 1 2.063.428A2.46 2.46 0 0 1 15.452 2c4.34 0 7.555 3.733 7.555 8.165 0 2.111-1.297 4.02-3.313 4.42.023.387.034.751.034 1.085 0 2.268-.883 3.91-2.375 4.95C15.908 21.625 13.989 22 12 22c-1.99 0-3.909-.375-5.353-1.38-1.493-1.04-2.375-2.682-2.375-4.95 0-.334.01-.698.034-1.085Zm3.862-10.92c-3.103.208-5.524 2.969-5.524 6.5 0 1.406.775 2.454 1.821 2.755.228-1.745.666-3.721 1.375-5.498.552-1.383 1.311-2.745 2.328-3.758Zm7.663 0c1.018 1.012 1.777 2.374 2.328 3.757.71 1.777 1.147 3.753 1.375 5.498 1.047-.301 1.822-1.35 1.822-2.755 0-3.531-2.422-6.292-5.525-6.5Zm-3.006 16.659c1.461-.093 2.694-.44 3.584-1.06 1.005-.7 1.668-1.81 1.668-3.594 0-1.943-.418-5.047-1.452-7.637C15.567 5.379 14.036 3.651 12 3.651S8.432 5.38 7.374 8.033c-1.033 2.59-1.451 5.694-1.451 7.637 0 1.784.662 2.895 1.667 3.595.89.62 2.124.966 3.584 1.059v-2.116a2.497 2.497 0 0 1-.96-.64c-.987-1.049-.987-2.748 0-3.797a2.42 2.42 0 0 1 3.571 0c.986 1.049.986 2.748 0 3.797-.28.299-.608.511-.96.64v2.116Zm-1.48-5.35a1.03 1.03 0 0 0 0 1.391.888.888 0 0 0 1.31 0 1.03 1.03 0 0 0 0-1.39.887.887 0 0 0-1.31 0Zm-2.76-3.89V9.25h1.651v1.835h-1.65Zm5.178 0V9.25h1.651v1.835h-1.65Z" clip-rule="evenodd"/><path fill="#23846F" fill-rule="evenodd" d="M15.832 3.664c1.017 1.013 1.776 2.374 2.328 3.758.708 1.776 1.146 3.752 1.374 5.498 1.047-.302 1.822-1.35 1.822-2.755 0-3.531-2.422-6.292-5.525-6.5ZM8.168 3.664c-3.103.21-5.524 2.97-5.524 6.5 0 1.406.774 2.454 1.821 2.756.228-1.746.666-3.722 1.375-5.498.551-1.384 1.311-2.745 2.328-3.758Z" clip-rule="evenodd"/></svg> </span>
</span>
</a>
<a class="link d-inline-flex u-fw-600 align-items-center --text --icon-before --hover-icon i-user-panel__link u-posr" href="#" title="Změna hesla">
<span class="link__title">Změna hesla</span>
<span class="link__icon d-flex align-items-center justify-content-center flex-shrink-0">
<span class="icon d-flex align-items-center justify-content-center --colored --conversion --lg">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#23846F" d="M20.338 2h-1.804a2.474 2.474 0 0 0-1.762.73L9.826 9.676a6.262 6.262 0 1 0 4.498 4.498l1.03-1.03V11.14h2.492V8.646h2.006l1.418-1.418A2.477 2.477 0 0 0 22 5.465V3.662A1.662 1.662 0 0 0 20.338 2Zm0 3.465a.83.83 0 0 1-.243.588l-.931.932h-2.98v2.492h-2.492v2.978L12.41 13.74c.292.615.447 1.287.452 1.969a4.57 4.57 0 1 1-4.569-4.57 3.52 3.52 0 0 1 1.968.452l7.687-7.685a.838.838 0 0 1 .587-.243h1.804v1.803ZM6.215 16.954a.83.83 0 1 0 1.661 0 .83.83 0 0 0-1.66 0Z"/></svg> </span>
</span>
<span class="link__icon --hover d-none align-items-center justify-content-center flex-shrink-0">
<span class="icon d-flex align-items-center justify-content-center --colored --conversion --lg">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#23846F" fill-rule="evenodd" d="M20.338 2A1.659 1.659 0 0 1 22 3.662v1.803a2.479 2.479 0 0 1-.73 1.763l-1.418 1.418h-2.006v2.493h-2.492v2.006l-1.03 1.029a6.259 6.259 0 0 1-6.894 7.771 6.267 6.267 0 0 1-5.375-5.375 6.264 6.264 0 0 1 3.77-6.6 6.259 6.259 0 0 1 4.001-.294l6.946-6.946A2.487 2.487 0 0 1 18.534 2h1.804ZM6.215 16.954a.83.83 0 1 0 1.661 0 .83.83 0 0 0-1.66 0Z" clip-rule="evenodd"/></svg> </span>
</span>
</a>
</div>
<a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --sm --full-width w-100 i-user-panel__logout" href='#'>
<span class="btn__title u-z-index-1">
Odhlásit se
</span>
<span class="btn__icon d-flex align-items-center justify-content-center">
<span class="icon d-flex align-items-center justify-content-center --sm">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" fill-rule="evenodd" d="M2.05 0A2.146 2.146 0 0 0-.096 2.146v11.708A2.147 2.147 0 0 0 2.05 16h4.212a2.146 2.146 0 0 0 2.147-2.146V10.19H6.717v3.664a.455.455 0 0 1-.455.455H2.05a.455.455 0 0 1-.455-.455V2.146a.455.455 0 0 1 .455-.455h4.212a.455.455 0 0 1 .455.455V5.81H8.41V2.146A2.146 2.146 0 0 0 6.262 0H2.05Zm12.748 6.469-3.114-3.114-1.194 1.198 2.601 2.602H4.207v1.69h8.884l-2.601 2.602 1.195 1.196 3.358-3.357a1.823 1.823 0 0 0 0-2.576l-.244-.244v.003Z" clip-rule="evenodd"/></svg> </span>
</span>
</a>
</div>
</div>