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

Initial

Browse Source
This commit is contained in:
Eden Kirin
2022-12-16 11:42:30 +01:00
commit 0e98f21431
6 changed files with 198 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
/dist

BIN
img/border.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 928 B

BIN
img/dot.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 990 B

BIN
img/expected.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 106 KiB

97
index.html Normal file
View File

@ -0,0 +1,97 @@
<!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>
<div class="wrapper">
<section class="tree-structure">
<h3>Playground</h3>
<ul class="subnav level-one">
<li><a href="#">First Level</a></li>
<li>
<a href="#">First Level</a>
<ul class="subnav level-two">
<li><a href="#">Second Level</a></li>
<li><a href="#">Second Level</a></li>
<li><a href="#">Second Level</a></li>
<li><a href="#">Second Level</a></li>
<li>
<a href="#">Second Level</a>
<ul class="subnav level-three">
<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>
</ul>
</li>
<li><a href="#">First Level</a></li>
<li><a href="#">First Level</a></li>
<li>
<a href="#">First Level</a>
<ul class="subnav level-two">
<li><a href="#">Second Level</a></li>
<li><a href="#">Second Level</a></li>
<li><a href="#">Second Level</a></li>
<li><a href="#">Second Level</a></li>
<li><a href="#">Second Level</a></li>
</ul>
</li>
<li><a href="#">First Level</a></li>
</ul>
</section>
<section class="tree-structure-expected">
<h3>Expected</h3>
<ul class="level-one">
<li class="selected-first">First Level</li>
<li class="selected-first selected-last">
First Level
<ul class="level-two">
<li class="selected-first">Second Level</li>
<li class="not-selected">Second Level</li>
<li class="not-selected">Second Level</li>
<li class="not-selected">Second Level</li>
<li class="selected-last">
Second Level
<ul class="level-three">
<li class="selected-first">Third Level</li>
<li class="not-selected">Third Level</li>
<li class="not-selected">Third Level</li>
<li class="selected-last">Third Level</li>
</ul>
</li>
</ul>
</li>
<li class="selected-first">First Level</li>
<li class="not-selected">First Level</li>
<li class="selected-last">
First Level
<ul class="level-two">
<li class="selected-first">Second Level</li>
<li class="not-selected">Second Level</li>
<li class="not-selected">Second Level</li>
<li class="selected-last">Second Level</li>
</ul>
</li>
<li class="selected-last">First Level</li>
</ul>
</section>
</div>
<section class="example">
<img src="img/expected.png" alt="">
</section>
</body>
</html>

100
style.scss Normal file
View File

@ -0,0 +1,100 @@
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;
}
ul {
list-style-type: none;
}
section.tree-structure {
width: 50%;
padding: 0 2rem 0 2rem;
}
section.tree-structure-expected {
width: 50%;
padding: 0 2rem 0 2rem;
.selected-first {
color: green;
}
.selected-last {
color: red;
}
.not-selected {
color: black;
}
}
section.example {
margin-top: 5rem;
img {
max-width: 100%;
}
}
ul.subnav {
li {
a {
display: flex;
padding: 0 0.75rem;
cursor: pointer;
height: 56px;
align-items: center;
text-decoration: none;
&::before {
content: " ";
display: inline-block;
width: 32px;
margin-right: 15px;
height: 100%;
background-image: url("../img/border.png");
background-repeat: no-repeat;
background-position: top center;
}
}
}
> li {
border: 1px solid red;
&:first-of-type {
> a {
height: 57px;
&::before {
align-self: flex-end;
height: 30px;
background-image: url("../img/border.png"), url("../img/dot.png");
}
}
}
&:last-of-type {
margin: 0;
> a {
&::before {
align-self: flex-start;
height: 30px;
background-image: url("../img/border.png"), url("../img/dot.png");
background-position: bottom center;
}
}
}
// single item - just a dot
&:first-of-type:last-of-type {
> a {
&::before {
background-image: url("../img/dot.png");
}
}
}
}
}