design sidebar
This commit is contained in:
Chneemann
parent
b60d418075
commit
d71cd1ddca
9 changed files with 131 additions and 2 deletions
|
|
@ -6,6 +6,7 @@
|
||||||
app-sidebar {
|
app-sidebar {
|
||||||
width: 232px;
|
width: 232px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
background-color: var(--bgSidebar);
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
main {
|
||||||
|
|
@ -17,10 +18,12 @@ main {
|
||||||
app-header {
|
app-header {
|
||||||
height: 96px;
|
height: 96px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
background-color: var(--white);
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
width: calc(100vw - 232px);
|
width: calc(100vw - 232px - 64px);
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
padding: 64px 0 0 64px;
|
padding: 64px 0 0 64px;
|
||||||
|
background-color: var(--bgContent);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1 +1,30 @@
|
||||||
<p>sidebar works!</p>
|
<section>
|
||||||
|
<img class="logo" src="./assets/img/sidebar/logo.svg" alt="" />
|
||||||
|
|
||||||
|
<nav>
|
||||||
|
<div id="navLinkSummary" class="nav-links-inner">
|
||||||
|
<img src="./assets/img/sidebar/summary.svg" alt="sumary" /><span
|
||||||
|
>Summary</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div id="navLinkAddTask" class="nav-links-inner">
|
||||||
|
<img src="./assets/img/sidebar/add-task.svg" alt="addtask" /><span
|
||||||
|
>Add Task</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div id="navLinkBoard" class="nav-links-inner">
|
||||||
|
<img src="./assets/img/sidebar/board.svg" alt="board" /><span>Board</span>
|
||||||
|
</div>
|
||||||
|
<div id="navLinkContacts" class="nav-links-inner">
|
||||||
|
<img src="./assets/img/sidebar/contacts.svg" alt="contacts" /><span
|
||||||
|
>Contacts</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="reference">
|
||||||
|
<div>Privacy Policy</div>
|
||||||
|
<div>Legal Notice</div>
|
||||||
|
<div onclick="logout()">Log out</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,62 @@
|
||||||
|
section {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: top;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
width: 100px;
|
||||||
|
height: auto;
|
||||||
|
margin: 66px;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links-inner {
|
||||||
|
display: flex;
|
||||||
|
justify-content: left;
|
||||||
|
align-items: center;
|
||||||
|
padding: 4px 56px;
|
||||||
|
height: 46px;
|
||||||
|
width: 120px;
|
||||||
|
cursor: pointer;
|
||||||
|
img {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
padding-right: 8px;
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 400;
|
||||||
|
width: 100%;
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.reference {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
margin: 66px 0;
|
||||||
|
div {
|
||||||
|
width: 105px;
|
||||||
|
padding: 8px;
|
||||||
|
display: flex;
|
||||||
|
text-align: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: var(--white);
|
||||||
|
padding-top: 2vh;
|
||||||
|
padding-bottom: 2vh;
|
||||||
|
cursor: pointer;
|
||||||
|
&:hover {
|
||||||
|
color: var(--light-blue);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
3
src/assets/img/sidebar/add-task.svg
Normal file
3
src/assets/img/sidebar/add-task.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M2.62652 25.1682C1.95579 25.1682 1.38161 24.9294 0.903963 24.4517C0.426321 23.9741 0.1875 23.3999 0.1875 22.7292V5.65599C0.1875 4.98526 0.426321 4.41107 0.903963 3.93343C1.38161 3.45578 1.95579 3.21696 2.62652 3.21696H13.5107L11.0716 5.65599H2.62652V22.7292H19.6997V14.2535L22.1387 11.8145V22.7292C22.1387 23.3999 21.8999 23.9741 21.4223 24.4517C20.9446 24.9294 20.3704 25.1682 19.6997 25.1682H2.62652ZM16.2546 3.91818L17.9924 5.6255L9.9436 13.6743V15.4121H11.6509L19.7302 7.33282L21.468 9.04013L13.3887 17.1194C13.1651 17.343 12.906 17.5208 12.6113 17.6529C12.3166 17.7851 12.0066 17.8511 11.6814 17.8511H8.72409C8.37856 17.8511 8.08892 17.7342 7.85518 17.5005C7.62144 17.2668 7.50457 16.9771 7.50457 16.6316V13.6743C7.50457 13.3491 7.56555 13.0391 7.6875 12.7444C7.80945 12.4497 7.98222 12.1905 8.20579 11.967L16.2546 3.91818ZM21.468 9.04013L16.2546 3.91818L19.3034 0.869403C19.7912 0.381598 20.3755 0.137695 21.0564 0.137695C21.7373 0.137695 22.3115 0.381598 22.779 0.869403L24.4863 2.60721C24.9538 3.07469 25.1875 3.64379 25.1875 4.31452C25.1875 4.98526 24.9538 5.55436 24.4863 6.02184L21.468 9.04013Z" fill="#CDCDCD"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
4
src/assets/img/sidebar/board.svg
Normal file
4
src/assets/img/sidebar/board.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
<svg width="30" height="26" viewBox="0 0 30 26" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M22.9546 2.73855L22.9546 23.1929C22.954 23.7955 22.7143 24.3732 22.2882 24.7993C21.8622 25.2253 21.2844 25.465 20.6819 25.4656L16.1365 25.4656C15.5339 25.465 14.9562 25.2253 14.5301 24.7993C14.104 24.3732 13.8644 23.7955 13.8638 23.1929L13.8638 2.73855C13.8644 2.13597 14.104 1.55825 14.5301 1.13217C14.9562 0.706083 15.5339 0.466443 16.1365 0.465841L20.6819 0.46584C21.2844 0.466443 21.8622 0.706082 22.2882 1.13217C22.7143 1.55825 22.954 2.13597 22.9546 2.73855ZM16.1365 23.1929L20.6819 23.1929L20.6819 2.73855L16.1365 2.73855L16.1365 23.1929ZM16.1365 2.73855L16.1365 23.1929C16.1359 23.7955 15.8962 24.3731 15.4701 24.7992C15.0441 25.2253 14.4663 25.4649 13.8638 25.4655L9.31835 25.4655C8.71578 25.4649 8.13806 25.2253 7.71197 24.7992C7.28589 24.3731 7.04625 23.7954 7.04565 23.1928L7.04565 2.73852C7.04625 2.13595 7.28589 1.55823 7.71197 1.13214C8.13806 0.706058 8.71578 0.466423 9.31835 0.46582L13.8638 0.46582C14.4663 0.466422 15.0441 0.706058 15.4701 1.13214C15.8962 1.55823 16.1359 2.13597 16.1365 2.73855ZM9.31835 23.1928L13.8638 23.1929L13.8638 2.73855L9.31835 2.73852L9.31835 23.1928ZM9.31835 2.73852L9.31835 23.1928C9.31775 23.7954 9.07811 24.3731 8.65203 24.7992C8.22594 25.2253 7.64822 25.4649 7.04565 25.4656L2.50024 25.4656C1.89767 25.4649 1.31995 25.2253 0.893863 24.7992C0.467779 24.3731 0.228141 23.7954 0.227539 23.1928L0.227538 2.73852C0.22814 2.13595 0.467778 1.55823 0.893862 1.13214C1.31995 0.706058 1.89767 0.466423 2.50024 0.46582L7.04565 0.46582C7.64822 0.466423 8.22594 0.706058 8.65203 1.13214C9.07811 1.55823 9.31775 2.13595 9.31835 2.73852ZM2.50024 23.1928L7.04565 23.1928L7.04565 2.73852L2.50024 2.73852L2.50024 23.1928Z" fill="#CDCDCD"/>
|
||||||
|
<path d="M29.7727 2.7388L29.7727 23.1931C29.7721 23.7957 29.5324 24.3734 29.1064 24.7995C28.6803 25.2256 28.1026 25.4652 27.5 25.4658L22.9546 25.4658C22.352 25.4652 21.7743 25.2256 21.3482 24.7995C20.9221 24.3734 20.6825 23.7955 20.6819 23.1929L20.6819 2.73855C20.6825 2.13597 20.9221 1.5585 21.3482 1.13242C21.7743 0.706334 22.352 0.466697 22.9546 0.466094L27.5 0.466094C28.1026 0.466696 28.6803 0.706334 29.1064 1.13242C29.5324 1.5585 29.7721 2.13622 29.7727 2.7388ZM22.9546 23.1929L27.5 23.1931L27.5 2.7388L22.9546 2.73855L22.9546 23.1929Z" fill="#CDCDCD"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.3 KiB |
3
src/assets/img/sidebar/contacts.svg
Normal file
3
src/assets/img/sidebar/contacts.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg width="24" height="26" viewBox="0 0 24 26" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M12 20.4658C10.8333 20.4658 9.71875 20.6481 8.65625 21.0127C7.59375 21.3773 6.625 21.9242 5.75 22.6533V22.9658H18.25V22.6533C17.375 21.9242 16.4062 21.3773 15.3438 21.0127C14.2812 20.6481 13.1667 20.4658 12 20.4658ZM3.25 21.5283C4.375 20.4242 5.68229 19.5544 7.17188 18.9189C8.66146 18.2835 10.2708 17.9658 12 17.9658C13.7292 17.9658 15.3385 18.2835 16.8281 18.9189C18.3177 19.5544 19.625 20.4242 20.75 21.5283V5.46582H3.25V21.5283ZM12 15.4658C10.7917 15.4658 9.76042 15.0387 8.90625 14.1846C8.05208 13.3304 7.625 12.2992 7.625 11.0908C7.625 9.88249 8.05208 8.85124 8.90625 7.99707C9.76042 7.1429 10.7917 6.71582 12 6.71582C13.2083 6.71582 14.2396 7.1429 15.0938 7.99707C15.9479 8.85124 16.375 9.88249 16.375 11.0908C16.375 12.2992 15.9479 13.3304 15.0938 14.1846C14.2396 15.0387 13.2083 15.4658 12 15.4658ZM12 12.9658C12.5208 12.9658 12.9635 12.7835 13.3281 12.4189C13.6927 12.0544 13.875 11.6117 13.875 11.0908C13.875 10.57 13.6927 10.1273 13.3281 9.7627C12.9635 9.39811 12.5208 9.21582 12 9.21582C11.4792 9.21582 11.0365 9.39811 10.6719 9.7627C10.3073 10.1273 10.125 10.57 10.125 11.0908C10.125 11.6117 10.3073 12.0544 10.6719 12.4189C11.0365 12.7835 11.4792 12.9658 12 12.9658ZM3.25 25.4658C2.5625 25.4658 1.97396 25.221 1.48438 24.7314C0.994792 24.2419 0.75 23.6533 0.75 22.9658V5.46582C0.75 4.77832 0.994792 4.18978 1.48438 3.7002C1.97396 3.21061 2.5625 2.96582 3.25 2.96582H4.5V0.46582H7V2.96582H17V0.46582H19.5V2.96582H20.75C21.4375 2.96582 22.026 3.21061 22.5156 3.7002C23.0052 4.18978 23.25 4.77832 23.25 5.46582V22.9658C23.25 23.6533 23.0052 24.2419 22.5156 24.7314C22.026 25.221 21.4375 25.4658 20.75 25.4658H3.25Z" fill="#CDCDCD"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.7 KiB |
15
src/assets/img/sidebar/logo.svg
Normal file
15
src/assets/img/sidebar/logo.svg
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
<svg width="101" height="122" viewBox="0 0 101 122" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g clip-path="url(#clip0_301_1264)">
|
||||||
|
<path d="M71.7067 0H49.5488V25.4923H71.7067V0Z" fill="white"/>
|
||||||
|
<path d="M49.5484 46.2251H71.7062V82.1779C71.8075 90.8292 69.3453 99.3153 64.6328 106.557C59.9796 113.594 50.9972 121.966 34.3788 121.966C16.2776 121.966 5.72704 113.406 0.0341797 108.715L14.0107 91.4743C19.5672 96.0112 24.9191 99.7435 34.464 99.7435C41.6909 99.7435 44.5714 96.7988 46.2588 94.2307C48.5528 90.6637 49.7393 86.4923 49.6677 82.2464L49.5484 46.2251Z" fill="white"/>
|
||||||
|
<path d="M38.2477 30.1318H16.0898V52.3884H38.2477V30.1318Z" fill="#29ABE2"/>
|
||||||
|
<path d="M83.3136 111.522C83.3136 116.265 80.9104 118.815 77.5526 118.815C74.1948 118.815 71.9961 115.785 71.9961 111.762C71.9961 107.739 74.263 104.554 77.7401 104.554C81.2172 104.554 83.3136 107.687 83.3136 111.522ZM74.5698 111.711C74.5698 114.57 75.7118 116.675 77.6719 116.675C79.632 116.675 80.7399 114.45 80.7399 111.539C80.7399 108.988 79.7172 106.592 77.6719 106.592C75.6266 106.592 74.5698 108.903 74.5698 111.711Z" fill="white"/>
|
||||||
|
<path d="M87.7112 104.76V118.593H85.2568V104.76H87.7112Z" fill="white"/>
|
||||||
|
<path d="M90.3701 118.593V104.76H93.0972L96.0289 110.461C96.7836 111.952 97.455 113.483 98.0401 115.049C97.8867 113.337 97.8186 111.368 97.8186 109.177V104.76H100.068V118.593H97.5288L94.5631 112.772C93.7779 111.243 93.078 109.671 92.4666 108.064C92.4666 109.776 92.5859 111.711 92.5859 114.09V118.576L90.3701 118.593Z" fill="white"/>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<clipPath id="clip0_301_1264">
|
||||||
|
<rect width="100.034" height="121.966" fill="white" transform="translate(0.0341797)"/>
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.6 KiB |
3
src/assets/img/sidebar/summary.svg
Normal file
3
src/assets/img/sidebar/summary.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M23.2273 0.46582H2.77273H2.5C1.39543 0.46582 0.5 1.36155 0.5 2.46612C0.5 2.64591 0.5 2.77328 0.5 2.80579V23.2603V23.4658C0.5 24.5704 1.39572 25.4658 2.50029 25.4658C2.64377 25.4658 2.74401 25.4658 2.77272 25.4658H23.2273C23.256 25.4658 23.3562 25.4658 23.4997 25.4658C24.6043 25.4658 25.5 24.5699 25.5 23.4653C25.5 23.3585 25.5 23.2846 25.5 23.2603V2.80576C25.5 2.77326 25.5 2.6459 25.5 2.46612C25.5 1.36155 24.6043 0.46582 23.4997 0.46582C23.3562 0.46582 23.256 0.46582 23.2273 0.46582ZM15.2727 23.2603H2.77273V14.1694H15.2727V23.2603ZM15.2727 11.8967H2.77273V2.80579L15.2727 2.80576V11.8967ZM23.2273 23.2603H17.5455V2.80579H23.2273V23.2603Z" fill="#CDCDCD"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 773 B |
|
|
@ -1,3 +1,10 @@
|
||||||
* {
|
* {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--bgSidebar: #2b3647;
|
||||||
|
--bgContent: #f6f7f8;
|
||||||
|
--white: #fff;
|
||||||
|
--black: #000;
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue