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

Compare commits

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

2 Commits
c0fe36dbbe ... new-branch

Author SHA1 Message Date
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
4 changed files with 135 additions and 92 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.

159
experiment/index.html
View File

@ -11,87 +11,88 @@
<body> <body>
<h1>Sidebar menu structure playground</h1> <h1>Sidebar menu structure playground</h1>
<h2>New subtitle</h1>
<div class="wrapper"> <div class="wrapper">
<section class="tree-structure"> <section class="tree-structure">
<ul class="subnav"> <ul class="subnav">
<li><a href="#">First Level</a></li> <li><a href="#">First Level</a></li>
<li> <li>
<a href="#">First Level</a> <a href="#">First Level</a>
<ul> <ul>
<li><a href="#">Second Level</a></li> <li><a href="#">Second Level</a></li>
<li> <li>
<a href="#">Second Level</a> <a href="#">Second Level</a>
<ul> <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>
<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> </ul>
</li> </li>
<li> <li>
<a href="#">Second Level</a> <a href="#">Second Level</a>
<ul> <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> </ul>
</li> </li>
<li><a href="#">Second Level</a></li> <li><a href="#">Second Level</a></li>
</ul> </ul>
</li> </li>
<li><a href="#">First Level</a></li> <li><a href="#">First Level</a></li>
</ul> </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> </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> </body>
</html> </html>

22
index.html
View File

@ -23,23 +23,33 @@
<ul id="main-nav-tree-root"> <ul id="main-nav-tree-root">
<li><a href="#" class="icon icon-dashboard">Dashboard</a></li> <li><a href="#" class="icon icon-dashboard">Dashboard</a></li>
<li><a href="#" class="icon icon-machines">Machines</a></li> <li><a href="#" class="icon icon-machines">Machines</a></li>
<li><a href="#" class="icon icon-events">Events</a></li> <li>
<a href="#" class="icon icon-events collapsable collapsed" data-toggle="collapse"
data-target="#main-nav-events-collapse">
Events
</a>
<ul class="subnav collapse" id="main-nav-events-collapse" data-parent="#main-nav-tree-root">
<li><a href="#">Configuration</a></li>
</ul>
</li>
<li><a href="#" class="icon icon-reports">Reports</a></li> <li><a href="#" class="icon icon-reports">Reports</a></li>
<li> <li>
<a href="#" class="icon icon-call-center collapsable collapsed" data-toggle="collapse" <a href="#" class="icon icon-call-center collapsable collapsed" data-toggle="collapse"
data-target="#call-center-collapse"> data-target="#main-nav-call-center-collapse">
Call Center</a> Call Center
<ul class="subnav collapse" id="call-center-collapse" data-parent="#main-nav-tree-root"> </a>
<ul class="subnav collapse" id="main-nav-call-center-collapse" data-parent="#main-nav-tree-root">
<li><a href="#">Ticket Stream</a></li> <li><a href="#">Ticket Stream</a></li>
<li><a href="#">Configuration</a></li> <li><a href="#">Configuration</a></li>
</ul> </ul>
</li> </li>
<li> <li>
<a href="#" class="icon icon-warehouse-management collapsable collapsed" data-toggle="collapse" <a href="#" class="icon icon-warehouse-management collapsable collapsed" data-toggle="collapse"
data-target="#warehouse-management-collapse"> data-target="#main-nav-warehouse-management-collapse">
Warehouse Management Warehouse Management
</a> </a>
<ul class="subnav collapse" id="warehouse-management-collapse" data-parent="#main-nav-tree-root"> <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="#">Product Warehouse</a></li>
<li> <li>
<a href="#">Spare part Warehouse</a> <a href="#">Spare part Warehouse</a>

23
style.scss
View File

@ -17,16 +17,18 @@ $image-path: "/img"; // image path without trailing slash
$text-color: #1f1f1f; $text-color: #1f1f1f;
$border-color: #cdcdcd; $border-color: #cdcdcd;
$subnav-indent: 10px; $subnav-indent: 10px;
$icon-width: 50px; $icon-width: 60px;
$level-one-indent: $icon-width; $level-one-indent: $icon-width;
$border-img: url("#{$image-path}/border.png"); $border-img: url("#{$image-path}/border.png");
$dot-img: url("#{$image-path}/dot.png"); $dot-img: url("#{$image-path}/dot.png");
$expand-arrow-height: 18px; $expand-arrow-height: 18px;
$expand-animation-duration: 0.2s;
$border-width: 20px; $border-width: 20px;
$border-margin-right: 15px; $border-margin-right: 15px;
// menu icons in format "icon class": "svg filename" // menu icons in format "icon class": "svg filename"
// get font awesome icons from https://fontawesome.com/v5/search
$menu-icons: ( $menu-icons: (
"icon-administration": "administration.svg", "icon-administration": "administration.svg",
"icon-call-center": "call-center.svg", "icon-call-center": "call-center.svg",
@ -85,8 +87,9 @@ nav.main {
border-top: 1px solid $border-color; border-top: 1px solid $border-color;
} }
> a { > a {
font-size: 1rem;
display: block; display: block;
padding: 15px 0; line-height: 55px;
text-decoration: none; text-decoration: none;
color: $text-color; color: $text-color;
&:hover { &:hover {
@ -114,7 +117,7 @@ nav.main {
content: ""; content: "";
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: -2px;
width: $icon-width; width: $icon-width;
height: 100%; height: 100%;
background-position: center center; background-position: center center;
@ -130,15 +133,16 @@ nav.main {
} }
} }
// menu arrow
&::after { &::after {
content: ""; content: "";
margin-left: auto; margin-left: auto;
width: $expand-arrow-height / 2; width: $expand-arrow-height / 2;
height: $expand-arrow-height; height: $expand-arrow-height;
margin-right: 10px; margin-right: 12px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-image: url("#{$image-path}/menu-icons/menu-arrow.svg"); background-image: url("#{$image-path}/menu-icons/menu-arrow.svg");
transition: transform 0.3s; transition: transform $expand-animation-duration;
transform-origin: 50% 50%; transform-origin: 50% 50%;
} }
&.collapsable:not(.collapsed) { &.collapsable:not(.collapsed) {
@ -153,6 +157,11 @@ nav.main {
ul.subnav { ul.subnav {
border-top: 1px solid $border-color; border-top: 1px solid $border-color;
&.collapsing {
-webkit-transition-duration: $expand-animation-duration;
transition-duration: $expand-animation-duration;
}
li { li {
// reset parent borders // reset parent borders
border-bottom: none; border-bottom: none;
@ -181,7 +190,7 @@ nav.main {
> a { > a {
&::before { &::before {
background-image: $border-img, $dot-img; background-image: $border-img, $dot-img;
top: 20px; // hardcoded! top: 22px;
} }
} }
} }
@ -191,7 +200,7 @@ nav.main {
&::before { &::before {
background-image: $border-img, $dot-img; background-image: $border-img, $dot-img;
background-position: bottom; background-position: bottom;
top: -20px; // hardcoded! top: -24px;
} }
} }
} }