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

First version

Browse Source
This commit is contained in:
Eden Kirin
2022-12-18 00:26:20 +01:00
parent d0cbb37c55
commit 5752f024c6
9 changed files with 377 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
experiment/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">
<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;
}
}
}