Intis/sidebar-test-repo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: Intis:d0cbb37c554b787e6236afa6c016a7f4d47ce1d9
Branches Tags
Intis:main Intis:new-branch
..
compare: Intis:main
Branches Tags
Intis:main Intis:new-branch

13 Commits
d0cbb37c55 ... main

Author SHA1 Message Date
eden
edf1b0093e Merge pull request 'Test PR' (#1) from new-branch into main 
Reviewed-on: eden/sidebar-test-repo#1
 2023-02-28 22:11:24 +01:00
Eden Kirin
1e6b93ee31 Test PR 2023-02-28 22:08:16 +01:00
Eden Kirin
701c67ebdc Readme 2023-02-16 19:02:23 +01:00
Eden Kirin
c0fe36dbbe All other icons 2022-12-21 00:08:28 +01:00
Eden Kirin
d3af35d5fe Animated collapse arrow 2022-12-20 16:06:00 +01:00
Eden Kirin
1ac8243f5d Accordion collapse 2022-12-20 15:26:48 +01:00
Eden Kirin
bda4d64904 Expand arrow 2022-12-20 09:21:58 +01:00
Eden Kirin
242d81a339 One background bug left 2022-12-19 08:06:05 +01:00
Eden Kirin
46293651e2 Almost there 2022-12-18 19:53:04 +01:00
Eden Kirin
7a7aad8043 Almost final 2022-12-18 19:39:19 +01:00
Eden Kirin
42e0d7d3b1 Checkpoint 2022-12-18 02:18:30 +01:00
Eden Kirin
355db0a651 Checkpoint 2022-12-18 01:23:45 +01:00
Eden Kirin
5752f024c6 First version 2022-12-18 00:26:20 +01:00
22 changed files with 608 additions and 186 deletions
Expand all files Collapse all files

23
README.md Normal file
View File

@ -0,0 +1,23 @@
# Sidebar test
Ullamco mollit ea nulla pariatur culpa laborum. Nostrud veniam nisi tempor eu esse cupidatat eu excepteur reprehenderit nulla voluptate incididunt eiusmod et. Proident nisi nulla in irure aliquip incididunt. Qui qui pariatur mollit ea elit tempor.
Laborum nisi minim labore ad. Minim nostrud eu qui esse non in dolor minim amet ipsum aliqua. Commodo ex deserunt sint qui sint pariatur duis in fugiat deserunt excepteur aliqua aute culpa. Ut voluptate labore adipisicing proident reprehenderit.
Do sunt deserunt aliquip ex proident dolore. Sit ullamco dolor aute labore minim esse id dolor id aute enim do excepteur elit. Elit veniam laboris veniam laborum occaecat veniam ullamco nostrud deserunt ipsum exercitation. Veniam culpa dolor amet ut aliqua dolore ut voluptate veniam. Non ut laborum veniam commodo. Reprehenderit Lorem deserunt ex sint eu enim nulla proident incididunt nostrud. Exercitation deserunt et elit mollit sint eiusmod elit minim fugiat.
Ipsum deserunt aliqua esse laboris anim qui sint esse et amet labore. Exercitation irure nulla labore irure est ullamco eiusmod. Aliquip aliqua anim tempor qui amet id. Qui enim deserunt eu nisi velit mollit sunt consectetur minim cillum nostrud fugiat exercitation officia.
Consectetur mollit aliquip occaecat cupidatat elit sunt officia eu ea officia Lorem amet consectetur sint. Occaecat laboris aliqua ea dolor aliquip officia ad nulla amet reprehenderit qui aliqua veniam quis. Laboris irure esse deserunt minim nisi laborum occaecat officia reprehenderit excepteur labore. Veniam sunt consectetur consequat officia consequat.
Aute occaecat amet dolore eiusmod deserunt eu cupidatat irure est aliquip. Do nisi adipisicing qui mollit laborum ad minim et nulla laboris dolor est. Sunt aute et aliquip anim.
Ad sunt nisi pariatur laboris culpa laborum consequat cupidatat dolor irure culpa minim ea. Officia voluptate Lorem laborum ex amet. Amet ullamco sunt mollit adipisicing et labore. Cupidatat proident eiusmod mollit sit tempor commodo voluptate. Cupidatat id ipsum fugiat cupidatat ut officia id id eiusmod reprehenderit id non est aliquip. Sunt labore laborum ipsum anim anim proident cillum deserunt.
Occaecat magna id non non laboris enim irure deserunt reprehenderit in nisi reprehenderit aliqua pariatur. Nisi ad magna proident ad enim reprehenderit ea nulla ea officia. Excepteur sint fugiat qui veniam dolor ad et enim ipsum deserunt Lorem tempor. Mollit eu aute tempor sunt proident amet esse culpa aute duis minim ea nulla. Labore quis non consectetur do ea incididunt adipisicing nulla do.
Excepteur fugiat consectetur exercitation magna occaecat aliquip. Consectetur sunt do adipisicing magna. Quis amet quis incididunt eiusmod incididunt est nisi id. Quis labore sunt fugiat et sit sunt amet. Laborum pariatur dolor aliquip ad nisi ut esse elit duis Lorem. Amet aliquip pariatur est eu deserunt ad ex anim eu. Sit nostrud tempor mollit elit aliqua in qui tempor veniam esse exercitation elit.
Aute consectetur in sit non. Minim eiusmod dolor ad proident ullamco nulla. Adipisicing et elit sunt fugiat ex. Reprehenderit proident eu eiusmod duis nisi adipisicing labore aliquip do nisi nisi eiusmod consectetur.
Occaecat magna id non non laboris enim irure deserunt reprehenderit in nisi reprehenderit aliqua pariatur. Nisi ad magna proident ad enim reprehenderit ea nulla ea officia. Excepteur sint fugiat qui veniam dolor ad et enim ipsum deserunt Lorem tempor. Mollit eu aute tempor sunt proident amet esse culpa aute duis minim ea nulla. Labore quis non consectetur do ea incididunt adipisicing nulla do.

98
experiment/index.html Normal file
View File

@ -0,0 +1,98 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="dist/style.css">
</head>
<body>
<h1>Sidebar menu structure playground</h1>
<h2>New subtitle</h1>
<div class="wrapper">
<section class="tree-structure">
<ul class="subnav">
<li><a href="#">First Level</a></li>
<li>
<a href="#">First Level</a>
<ul>
<li><a href="#">Second Level</a></li>
<li>
<a href="#">Second Level</a>
<ul>
<li><a href="#">Third Level</a></li>
<li><a href="#">Third Level</a></li>
<li><a href="#">Third Level</a></li>
<li><a href="#">Third Level</a></li>
</ul>
</li>
<li>
<a href="#">Second Level</a>
<ul>
<li><a href="#">Third Level</a></li>
<li><a href="#">Third Level</a></li>
</ul>
</li>
<li><a href="#">Second Level</a></li>
</ul>
</li>
<li><a href="#">First Level</a></li>
</ul>
</section>
<section class="tree-structure">
<ul class="subnav">
<li><a href="#">First Level</a></li>
<li>
<a href="#">First Level</a>
<ul>
<li><a href="#">Second Level</a></li>
<li>
<a href="#">Second Level</a>
<ul>
<li><a href="#">Third Level</a></li>
<li><a href="#">Third Level</a></li>
<li><a href="#">Third Level</a></li>
<li><a href="#">Third Level</a></li>
</ul>
</li>
<li>
<a href="#">Second Level</a>
<ul>
<li><a href="#">Third Level</a></li>
<li><a href="#">Third Level</a></li>
<li><a href="#">Third Level</a></li>
<li><a href="#">Third Level</a></li>
</ul>
</li>
<li><a href="#">Second Level</a></li>
</ul>
</li>
</ul>
</section>
<section class="tree-structure">
<ul class="subnav">
<li><a href="#">First Level</a></li>
<li>
<a href="#">First Level</a>
<ul>
<li><a href="#">Second Level</a></li>
<li><a href="#">Second Level</a></li>
<li><a href="#">Second Level</a></li>
</ul>
</li>
</ul>
</section>
</div>
<section class="example">
<img src="img/expected.png" alt="">
</section>
</body>
</html>

134
experiment/style.scss Normal file
View File

@ -0,0 +1,134 @@
body {
font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana,
sans-serif;
font-size: 14pt;
padding: 1rem 5rem;
}
.wrapper {
display: flex;
column-gap: 1rem;
}
section.tree-structure {
background-color: rgb(195, 253, 234);
flex-grow: 1;
}
section.example {
margin-top: 5rem;
img {
max-width: 100%;
}
}
// ------------------------------------------------
$border-img: url("../img/border.png");
$dot-img: url("../img/dot.png");
$border_width: 20px;
$border-margin-right: 15px;
$left-padding-unit: 16px;
ul {
list-style-type: none;
}
ul.subnav {
// debug colors: level one
> li {
// background-color: rgb(242, 242, 168);
}
> li > ul > li {
// background-color: rgb(199, 167, 255);
}
> li > ul > li > ul > li {
// background-color: rgb(174, 249, 174);
}
// level one
padding-left: $left-padding-unit;
// level two
> li > ul {
padding-left: $left-padding-unit * 2;
}
// level three
> li > ul > li > ul {
padding-left: $left-padding-unit * 2;
}
li {
a {
display: flex;
padding: 0;
cursor: pointer;
height: 56px;
align-items: center;
text-decoration: none;
// default: just border line
&::before {
content: " ";
display: inline-block;
width: $border_width;
margin-right: $border-margin-right;
height: 100%;
background-image: $border-img;
background-repeat: no-repeat;
background-position: top center;
}
}
// first item: dot + line down
&:first-of-type {
> a {
height: 57px;
&::before {
background-color: transparent;
align-self: flex-end;
height: 30px;
background-image: $border-img, $dot-img;
}
}
}
// last item: dot + line up
&:last-of-type {
margin: 0;
> a {
&::before {
background-color: transparent;
align-self: flex-start;
height: 30px;
background-image: $border-img, $dot-img;
background-position: bottom center;
}
}
}
// single item: just a dot
&:first-of-type:last-of-type {
> a {
&::before {
background-image: $dot-img;
}
}
}
}
// level three item: insert extra line left to connect level two items
> li > ul :not(:last-of-type) li {
display: flex;
margin-left: -$left-padding-unit * 2;
&::before {
content: " ";
width: $border_width;
margin-right: $border-margin-right;
background-image: $border-img;
background-repeat: repeat-y;
background-position: top center;
}
}
}

3
img/menu-icons/administration.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 923 B

3
img/menu-icons/call-center.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 141 127">
<path fill="currentColor" d="M82.9599 104.78C104.298 99.0623 120.01 79.5897 120.01 56.4475C120.01 28.815 97.6097 6.41449 69.9773 6.41449C42.3448 6.41449 19.9442 28.815 19.9442 56.4475H13.5297C13.5297 25.2724 38.8022 0 69.9773 0C101.152 0 126.425 25.2724 126.425 56.4475C126.425 72.2328 119.945 86.5047 109.501 96.7488C109.502 96.7493 109.503 96.7497 109.504 96.7502C102.664 103.458 94.1243 108.438 84.5907 110.985C84.4656 111.019 84.3403 111.052 84.2149 111.084C84.186 111.092 84.157 111.099 84.1281 111.107C83.7961 111.192 83.463 111.275 83.1287 111.355L83.1238 111.376C81.7702 117.385 76.4006 121.874 69.9825 121.874C62.543 121.874 56.5121 115.843 56.5121 108.404C56.5121 100.964 62.543 94.9331 69.9825 94.9331C76.1666 94.9331 81.3774 99.1003 82.9599 104.78ZM88.0737 116.664C98.4876 113.539 107.766 107.788 115.138 100.179C125.272 106.924 133.81 115.878 140.063 126.353H78.5507C82.7513 124.344 86.1347 120.904 88.0737 116.664ZM0.0634766 126.353H61.4153C54.7215 123.153 50.0976 116.318 50.0976 108.404C50.0976 97.4214 59.0004 88.5186 69.9825 88.5186C76.7005 88.5186 82.6321 91.847 86.2307 96.94C89.9727 95.4372 93.4579 93.4305 96.6026 91.0041L96.4951 90.9671C106.566 83.1016 113.041 70.8454 113.041 57.0768C113.041 33.3413 93.799 14.0998 70.0635 14.0998C46.328 14.0998 27.0864 33.3413 27.0864 57.0768C27.0864 70.8454 33.561 83.1016 43.6319 90.9671C25.2648 97.2639 9.86029 109.941 0.0634766 126.353Z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

3
img/menu-icons/contract-center.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
<path fill="currentColor" d="M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zM64 72c0-4.42 3.58-8 8-8h80c4.42 0 8 3.58 8 8v16c0 4.42-3.58 8-8 8H72c-4.42 0-8-3.58-8-8V72zm0 64c0-4.42 3.58-8 8-8h80c4.42 0 8 3.58 8 8v16c0 4.42-3.58 8-8 8H72c-4.42 0-8-3.58-8-8v-16zm192.81 248H304c8.84 0 16 7.16 16 16s-7.16 16-16 16h-47.19c-16.45 0-31.27-9.14-38.64-23.86-2.95-5.92-8.09-6.52-10.17-6.52s-7.22.59-10.02 6.19l-7.67 15.34a15.986 15.986 0 0 1-14.31 8.84c-.38 0-.75-.02-1.14-.05-6.45-.45-12-4.75-14.03-10.89L144 354.59l-10.61 31.88c-5.89 17.66-22.38 29.53-41 29.53H80c-8.84 0-16-7.16-16-16s7.16-16 16-16h12.39c4.83 0 9.11-3.08 10.64-7.66l18.19-54.64c3.3-9.81 12.44-16.41 22.78-16.41s19.48 6.59 22.77 16.41l13.88 41.64c19.77-16.19 54.05-9.7 66 14.16 2.02 4.06 5.96 6.5 10.16 6.5zM377 105L279.1 7c-4.5-4.5-10.6-7-17-7H256v128h128v-6.1c0-6.3-2.5-12.4-7-16.9z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 995 B

3
img/menu-icons/custom-forms.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path fill="currentColor" d="M218.17 424.14c-2.95-5.92-8.09-6.52-10.17-6.52s-7.22.59-10.02 6.19l-7.67 15.34c-6.37 12.78-25.03 11.37-29.48-2.09L144 386.59l-10.61 31.88c-5.89 17.66-22.38 29.53-41 29.53H80c-8.84 0-16-7.16-16-16s7.16-16 16-16h12.39c4.83 0 9.11-3.08 10.64-7.66l18.19-54.64c3.3-9.81 12.44-16.41 22.78-16.41s19.48 6.59 22.77 16.41l13.88 41.64c19.75-16.19 54.06-9.7 66 14.16 1.89 3.78 5.49 5.95 9.36 6.26v-82.12l128-127.09V160H248c-13.2 0-24-10.8-24-24V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24v-40l-128-.11c-16.12-.31-30.58-9.28-37.83-23.75zM384 121.9c0-6.3-2.5-12.4-7-16.9L279.1 7c-4.5-4.5-10.6-7-17-7H256v128h128v-6.1zm-96 225.06V416h68.99l161.68-162.78-67.88-67.88L288 346.96zm280.54-179.63l-31.87-31.87c-9.94-9.94-26.07-9.94-36.01 0l-27.25 27.25 67.88 67.88 27.25-27.25c9.95-9.94 9.95-26.07 0-36.01z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 929 B

6
img/menu-icons/dashboard.svg Normal file
View File

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44">
<rect height="20" width="20"></rect>
<rect height="20" width="20" y="24"></rect>
<rect height="20" width="20" x="24"></rect>
<rect height="20" width="20" x="24" y="24"></rect>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 260 B

3
img/menu-icons/events.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 495 B

4
img/menu-icons/evoca-horeca.svg Normal file
View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 27">
<path fill="#c12728" d="M12.62 27C14.9146 19.8387 5.83198 11.5161 11.4728 0C5.06713 0.483871 0 6.29032 0 13.4516C0 20.9032 5.44955 27 12.2376 27C12.3332 27 12.4288 27 12.62 27Z"></path>
<path fill="#c12728" d="M13.6257 0C10.5081 9.48387 20.3481 14.7097 14.6974 27C21.0301 26.3226 25.9987 20.6129 25.9987 13.5484C26.0962 6.09677 20.5429 0 13.6257 0Z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 434 B

3
img/menu-icons/fiscal-devices.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
<path fill="currentColor" d="M272 0H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h224c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zM160 480c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm112-108c0 6.6-5.4 12-12 12H60c-6.6 0-12-5.4-12-12V60c0-6.6 5.4-12 12-12h200c6.6 0 12 5.4 12 12v312z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 389 B

3
img/menu-icons/machines.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 48">
<path d="M0,0v48h35V0H0z M31.1,35.9H3.7V30h27.4V35.9z M31.1,27.2H3.7v-5.9h27.4V27.2z M31.1,18.4H3.7v-5.9h27.4V18.4z M31.1,9.7 H3.7V3.8h27.4V9.7z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 226 B

3
img/menu-icons/menu-arrow.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512">
<path fill="currentColor" d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 302 B

3
img/menu-icons/reports.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M332.8 320h38.4c6.4 0 12.8-6.4 12.8-12.8V172.8c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v134.4c0 6.4 6.4 12.8 12.8 12.8zm96 0h38.4c6.4 0 12.8-6.4 12.8-12.8V76.8c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v230.4c0 6.4 6.4 12.8 12.8 12.8zm-288 0h38.4c6.4 0 12.8-6.4 12.8-12.8v-70.4c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v70.4c0 6.4 6.4 12.8 12.8 12.8zm96 0h38.4c6.4 0 12.8-6.4 12.8-12.8V108.8c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v198.4c0 6.4 6.4 12.8 12.8 12.8zM496 384H64V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 775 B

3
img/menu-icons/routes.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 231.8 178.6">
<path d="M30.8,150.2c4.6-5.5,8.7-12.3,10.9-15.9c14.7-23.5,51.6-95.6,78.7-107.5c2.3,4.7,7.2,7.8,12.7,7.8 c3.1,0,6-1,8.3-2.7c1.3,2.9,1.8,6.6,1.6,11.3c-1.3,32.4-23.6,67.7-27.5,101c-1.7,14.6,2,28.3,20.2,28.3c22.8,0,48.4-18.3,68.4-34.2 c1.6,0.6,3.2,0.9,5,0.9c7.9,0,14.3-6.4,14.3-14.3s-6.4-14.3-14.3-14.3c-7.9,0-14.3,6.4-14.3,14.3c0,2.6,0.7,5,1.9,7.1 c-18.2,14.4-41.8,30.9-61,30.9c-19.5,0-8.5-30.6-5.5-40.5c7.2-23.3,21.3-56.1,22.2-78.9c0.3-8-1.2-15.3-5.5-20.3 c0.2-0.9,0.3-1.9,0.3-2.9c0-7.9-6.4-14.3-14.3-14.3c-6.8,0-12.5,4.7-13.9,11.1C82.5,30.3,40.7,123.3,23.4,144.7 c-1.4-0.5-2.9-0.7-4.5-0.7c-7.9,0-14.3,6.4-14.3,14.3c0,7.9,6.4,14.3,14.3,14.3s14.3-6.4,14.3-14.3 C33.2,155.2,32.3,152.5,30.8,150.2z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 780 B

3
img/menu-icons/switch-to-desktop.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path fill="currentColor" d="M528 0H48C21.5 0 0 21.5 0 48v320c0 26.5 21.5 48 48 48h192l-16 48h-72c-13.3 0-24 10.7-24 24s10.7 24 24 24h272c13.3 0 24-10.7 24-24s-10.7-24-24-24h-72l-16-48h192c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zm-16 352H64V64h448v288z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 341 B

3
img/menu-icons/switch-to-mobile.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
<path fill="currentColor" d="M272 0H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h224c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zM160 480c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm112-108c0 6.6-5.4 12-12 12H60c-6.6 0-12-5.4-12-12V60c0-6.6 5.4-12 12-12h200c6.6 0 12 5.4 12 12v312z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 389 B

3
img/menu-icons/tax-center.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
<path d="M377 105L279.1 7c-4.5-4.5-10.6-7-17-7H256v128h128v-6.1c0-6.3-2.5-12.4-7-16.9zm-153 31V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zM64 72c0-4.42 3.58-8 8-8h80c4.42 0 8 3.58 8 8v16c0 4.42-3.58 8-8 8H72c-4.42 0-8-3.58-8-8V72zm0 80v-16c0-4.42 3.58-8 8-8h80c4.42 0 8 3.58 8 8v16c0 4.42-3.58 8-8 8H72c-4.42 0-8-3.58-8-8zm144 263.88V440c0 4.42-3.58 8-8 8h-16c-4.42 0-8-3.58-8-8v-24.29c-11.29-.58-22.27-4.52-31.37-11.35-3.9-2.93-4.1-8.77-.57-12.14l11.75-11.21c2.77-2.64 6.89-2.76 10.13-.73 3.87 2.42 8.26 3.72 12.82 3.72h28.11c6.5 0 11.8-5.92 11.8-13.19 0-5.95-3.61-11.19-8.77-12.73l-45-13.5c-18.59-5.58-31.58-23.42-31.58-43.39 0-24.52 19.05-44.44 42.67-45.07V232c0-4.42 3.58-8 8-8h16c4.42 0 8 3.58 8 8v24.29c11.29.58 22.27 4.51 31.37 11.35 3.9 2.93 4.1 8.77.57 12.14l-11.75 11.21c-2.77 2.64-6.89 2.76-10.13.73-3.87-2.43-8.26-3.72-12.82-3.72h-28.11c-6.5 0-11.8 5.92-11.8 13.19 0 5.95 3.61 11.19 8.77 12.73l45 13.5c18.59 5.58 31.58 23.42 31.58 43.39 0 24.53-19.05 44.44-42.67 45.07z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

3
img/menu-icons/technical-center.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M507.73 109.1c-2.24-9.03-13.54-12.09-20.12-5.51l-74.36 74.36-67.88-11.31-11.31-67.88 74.36-74.36c6.62-6.62 3.43-17.9-5.66-20.16-47.38-11.74-99.55.91-136.58 37.93-39.64 39.64-50.55 97.1-34.05 147.2L18.74 402.76c-24.99 24.99-24.99 65.51 0 90.5 24.99 24.99 65.51 24.99 90.5 0l213.21-213.21c50.12 16.71 107.47 5.68 147.37-34.22 37.07-37.07 49.7-89.32 37.91-136.73zM64 472c-13.25 0-24-10.75-24-24 0-13.26 10.75-24 24-24s24 10.74 24 24c0 13.25-10.75 24-24 24z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 566 B

3
img/menu-icons/warehouse-management.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M560 288h-80v96l-32-21.3-32 21.3v-96h-80c-8.8 0-16 7.2-16 16v192c0 8.8 7.2 16 16 16h224c8.8 0 16-7.2 16-16V304c0-8.8-7.2-16-16-16zm-384-64h224c8.8 0 16-7.2 16-16V16c0-8.8-7.2-16-16-16h-80v96l-32-21.3L256 96V0h-80c-8.8 0-16 7.2-16 16v192c0 8.8 7.2 16 16 16zm64 64h-80v96l-32-21.3L96 384v-96H16c-8.8 0-16 7.2-16 16v192c0 8.8 7.2 16 16 16h224c8.8 0 16-7.2 16-16V304c0-8.8-7.2-16-16-16z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 468 B

142
index.html
View File

@ -6,91 +6,91 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> <title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="dist/style.css"> <link rel="stylesheet" href="dist/style.css">
</head> </head>
<body> <body>
<h1>Sidebar menu structure playground</h1> <section class="sidebar">
<nav class="main">
<div class="wrapper"> <ul id="main-nav-tree-root">
<section class="tree-structure"> <li><a href="#" class="icon icon-dashboard">Dashboard</a></li>
<ul class="subnav"> <li><a href="#" class="icon icon-machines">Machines</a></li>
<li><a href="#">First Level</a></li>
<li> <li>
<a href="#">First Level</a> <a href="#" class="icon icon-events collapsable collapsed" data-toggle="collapse"
<ul> data-target="#main-nav-events-collapse">
<li><a href="#">Second Level</a></li> Events
<li> </a>
<a href="#">Second Level</a> <ul class="subnav collapse" id="main-nav-events-collapse" data-parent="#main-nav-tree-root">
<ul> <li><a href="#">Configuration</a></li>
<li><a href="#">Third Level</a></li>
<li><a href="#">Third Level</a></li>
<li><a href="#">Third Level</a></li>
<li><a href="#">Third Level</a></li>
</ul>
</li>
<li>
<a href="#">Second Level</a>
<ul>
<li><a href="#">Third Level</a></li>
<li><a href="#">Third Level</a></li>
</ul>
</li>
<li><a href="#">Second Level</a></li>
</ul> </ul>
</li> </li>
<li><a href="#">First Level</a></li> <li><a href="#" class="icon icon-reports">Reports</a></li>
</ul>
</section>
<section class="tree-structure">
<ul class="subnav">
<li><a href="#">First Level</a></li>
<li> <li>
<a href="#">First Level</a> <a href="#" class="icon icon-call-center collapsable collapsed" data-toggle="collapse"
<ul> data-target="#main-nav-call-center-collapse">
<li><a href="#">Second Level</a></li> Call Center
<li> </a>
<a href="#">Second Level</a> <ul class="subnav collapse" id="main-nav-call-center-collapse" data-parent="#main-nav-tree-root">
<ul> <li><a href="#">Ticket Stream</a></li>
<li><a href="#">Third Level</a></li> <li><a href="#">Configuration</a></li>
<li><a href="#">Third Level</a></li>
<li><a href="#">Third Level</a></li>
<li><a href="#">Third Level</a></li>
</ul>
</li>
<li>
<a href="#">Second Level</a>
<ul>
<li><a href="#">Third Level</a></li>
<li><a href="#">Third Level</a></li>
<li><a href="#">Third Level</a></li>
<li><a href="#">Third Level</a></li>
</ul>
</li>
<li><a href="#">Second Level</a></li>
</ul> </ul>
</li> </li>
</ul>
</section>
<section class="tree-structure">
<ul class="subnav">
<li><a href="#">First Level</a></li>
<li> <li>
<a href="#">First Level</a> <a href="#" class="icon icon-warehouse-management collapsable collapsed" data-toggle="collapse"
<ul> data-target="#main-nav-warehouse-management-collapse">
<li><a href="#">Second Level</a></li> Warehouse Management
<li><a href="#">Second Level</a></li> </a>
<li><a href="#">Second Level</a></li> <ul class="subnav collapse show" id="main-nav-warehouse-management-collapse"
data-parent="#main-nav-tree-root">
<li><a href="#">Product Warehouse</a></li>
<li>
<a href="#">Spare part Warehouse</a>
<ul>
<li>
<a href="#">Warehouse Documents</a>
<ul>
<li>
<a href="#">Automatic Orders</a>
<ul>
<li><a href="#">Ordering Triggers</a></li>
<li><a href="#">Ordering Rules</a></li>
<li><a href="#">Run Scheduler</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Reporting</a>
<ul>
<li><a href="#">Inventory Report</a></li>
<li><a href="#">Spare Part Moves</a></li>
</ul>
</li>
<li><a href="#">Product Warehouse</a></li>
</ul>
</li>
</ul> </ul>
</li> </li>
<li><a href="#" class="icon icon-routes">Routes</a></li>
<li><a href="#" class="icon icon-fiscal-devices">Fiscal Devices</a></li>
<li><a href="#" class="icon icon-contract-center">Contract Center</a></li>
<li><a href="#" class="icon icon-tax-center">Tax Center</a></li>
<li><a href="#" class="icon icon-technical-center">Technical Center</a></li>
<li><a href="#" class="icon icon-custom-forms">Custom Forms</a></li>
<li><a href="#" class="icon icon-administration">Administration</a></li>
<li><a href="#" class="icon icon-switch-to-desktop">Switch To Desktop</a></li>
<li><a href="#" class="icon icon-switch-to-mobile">Switch To Mobile</a></li>
<li><a href="#" class="icon icon-evoca-horeca">Evoca Horeca</a></li>
</ul> </ul>
</section> </nav>
</div>
<section class="example">
<img src="img/expected.png" alt="">
</section> </section>
</body> </body>

342
style.scss
View File

@ -1,130 +1,64 @@
body { body {
font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
sans-serif; "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 14pt; font-size: 16px;
padding: 1rem 5rem;
} }
.wrapper { section.sidebar {
display: flex; width: 320px;
column-gap: 1rem; background-color: #f8f9fa;
border-left: 1px solid #cdcdcd;
border-right: 1px solid #cdcdcd;
} }
section.tree-structure { // ----------------------------------------------------------------------------------
background-color: rgb(195, 253, 234);
flex-grow: 1;
}
section.example { $image-path: "/img"; // image path without trailing slash
margin-top: 5rem; $text-color: #1f1f1f;
img { $border-color: #cdcdcd;
max-width: 100%; $subnav-indent: 10px;
} $icon-width: 60px;
} $level-one-indent: $icon-width;
$border-img: url("#{$image-path}/border.png");
$dot-img: url("#{$image-path}/dot.png");
$expand-arrow-height: 18px;
$expand-animation-duration: 0.2s;
// ------------------------------------------------ $border-width: 20px;
$border-img: url("../img/border.png");
$dot-img: url("../img/dot.png");
$border_width: 20px;
$border-margin-right: 15px; $border-margin-right: 15px;
$left-padding-unit: 16px;
ul { // menu icons in format "icon class": "svg filename"
list-style-type: none; // get font awesome icons from https://fontawesome.com/v5/search
} $menu-icons: (
"icon-administration": "administration.svg",
"icon-call-center": "call-center.svg",
"icon-contract-center": "contract-center.svg",
"icon-custom-forms": "custom-forms.svg",
"icon-dashboard": "dashboard.svg",
"icon-events": "events.svg",
"icon-evoca-horeca": "evoca-horeca.svg",
"icon-fiscal-devices": "fiscal-devices.svg",
"icon-machines": "machines.svg",
"icon-menu-arrow": "menu-arrow.svg",
"icon-reports": "reports.svg",
"icon-routes": "routes.svg",
"icon-switch-to-desktop": "switch-to-desktop.svg",
"icon-switch-to-mobile": "switch-to-mobile.svg",
"icon-tax-center": "tax-center.svg",
"icon-technical-center": "technical-center.svg",
"icon-warehouse-management": "warehouse-management.svg",
);
ul.subnav { @mixin variable-left-border-connector($indent) {
// debug colors: level one :not(:last-of-type) li {
> li { position: relative;
// background-color: rgb(242, 242, 168);
}
> li > ul > li {
// background-color: rgb(199, 167, 255);
}
> li > ul > li > ul > li {
// background-color: rgb(174, 249, 174);
}
// level one
padding-left: $left-padding-unit;
// level two
> li > ul {
padding-left: $left-padding-unit * 2;
}
// level three
> li > ul > li > ul {
padding-left: $left-padding-unit * 2;
}
li {
a {
display: flex;
padding: 0;
cursor: pointer;
height: 56px;
align-items: center;
text-decoration: none;
// default: just border line
&::before {
content: " ";
display: inline-block;
width: $border_width;
margin-right: $border-margin-right;
height: 100%;
background-image: $border-img;
background-repeat: no-repeat;
background-position: top center;
}
}
// first item: dot + line down
&:first-of-type {
> a {
height: 57px;
&::before {
background-color: transparent;
align-self: flex-end;
height: 30px;
background-image: $border-img, $dot-img;
}
}
}
// last item: dot + line up
&:last-of-type {
margin: 0;
> a {
&::before {
background-color: transparent;
align-self: flex-start;
height: 30px;
background-image: $border-img, $dot-img;
background-position: bottom center;
}
}
}
// single item: just a dot
&:first-of-type:last-of-type {
> a {
&::before {
background-image: $dot-img;
}
}
}
}
// level three item: insert extra line left to connect level two items
> li > ul :not(:last-of-type) li {
display: flex;
margin-left: -$left-padding-unit * 2;
&::before { &::before {
content: " "; content: " ";
width: $border_width; width: $border-width;
height: 100%;
position: absolute;
top: 0;
left: $indent;
margin-right: $border-margin-right; margin-right: $border-margin-right;
background-image: $border-img; background-image: $border-img;
background-repeat: repeat-y; background-repeat: repeat-y;
@ -132,3 +66,181 @@ ul.subnav {
} }
} }
} }
@mixin reset-single-item-background($li-background-image) {
&:first-of-type:last-of-type {
&::before {
background-image: $li-background-image;
}
> a {
&::before {
background-image: $dot-img;
}
}
}
}
nav.main {
li {
border-bottom: 1px solid $border-color;
&:first-of-type {
border-top: 1px solid $border-color;
}
> a {
font-size: 1rem;
display: block;
line-height: 55px;
text-decoration: none;
color: $text-color;
&:hover {
background-color: rgba($text-color, 0.03);
}
}
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
// level 0: main items
> ul > li {
a.icon {
position: relative;
padding-left: $icon-width;
display: flex;
align-items: center;
// main icons
&::before {
content: "";
position: absolute;
top: 0;
left: -2px;
width: $icon-width;
height: 100%;
background-position: center center;
background-size: 22px 22px;
background-repeat: no-repeat;
filter: opacity(69%); // make icons transparent (black -> grayish)
}
// define menu icons
@each $icon-class, $icon-file in $menu-icons {
&.#{$icon-class}::before {
background-image: url("#{$image-path}/menu-icons/#{$icon-file}");
}
}
// menu arrow
&::after {
content: "";
margin-left: auto;
width: $expand-arrow-height / 2;
height: $expand-arrow-height;
margin-right: 12px;
background-repeat: no-repeat;
background-image: url("#{$image-path}/menu-icons/menu-arrow.svg");
transition: transform $expand-animation-duration;
transform-origin: 50% 50%;
}
&.collapsable:not(.collapsed) {
&::after {
transform: rotate(90deg);
}
}
}
}
// subnav level 1
ul.subnav {
border-top: 1px solid $border-color;
&.collapsing {
-webkit-transition-duration: $expand-animation-duration;
transition-duration: $expand-animation-duration;
}
li {
// reset parent borders
border-bottom: none;
&:first-of-type {
border-top: none;
}
a {
padding-left: $level-one-indent;
position: relative;
&::before {
content: " ";
width: $border-width;
height: 100%;
position: absolute;
top: 0;
left: $subnav-indent;
margin-right: $border-margin-right;
background-image: $border-img;
background-repeat: no-repeat;
background-position: top center;
}
}
// first item: dot + line down
&:first-of-type {
> a {
&::before {
background-image: $border-img, $dot-img;
top: 22px;
}
}
}
// last item: dot + line up
&:last-of-type {
> a {
&::before {
background-image: $border-img, $dot-img;
background-position: bottom;
top: -24px;
}
}
}
@include reset-single-item-background(none);
@include variable-left-border-connector($subnav-indent * 4);
// subnav level 2
> ul {
li {
a {
padding-left: $subnav-indent * 7;
&::before {
left: $subnav-indent * 4;
}
}
@include reset-single-item-background($border-img);
@include variable-left-border-connector($subnav-indent * 7);
// subnav level 3
> ul li {
a {
padding-left: $subnav-indent * 10;
&::before {
left: $subnav-indent * 7;
}
}
@include reset-single-item-background($border-img);
@include variable-left-border-connector($subnav-indent * 10);
// subnav level 4
> ul li a {
padding-left: $subnav-indent * 13;
&::before {
left: $subnav-indent * 10;
}
}
}
}
}
}
@include variable-left-border-connector($subnav-indent * 1);
}
}