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;
}
}
}

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

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

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/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

86
index.html
View File

@ -10,87 +10,53 @@
</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>
<section class="sidebar">
<nav class="main">
<ul>
<li><a href="#">Second Level</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-events">Events</a></li>
<li><a href="#" class="icon icon-reports">Reports</a></li>
<li>
<a href="#">Second Level</a>
<a href="#" class="icon icon-call-center">Call Center</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>
<li><a href="#">Ticket Stream</a></li>
<li><a href="#">Configuration</a></li>
</ul>
</li>
<li>
<a href="#">Second Level</a>
<a href="#" class="icon icon-warehouse-management">Warehouse Management</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="#">Product Warehouse</a></li>
<li>
<a href="#">First Level</a>
<a href="#">Spare part Warehouse</a>
<ul>
<li><a href="#">Second Level</a></li>
<li>
<a href="#">Second Level</a>
<a href="#">Warehouse Documents</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>
<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>
<li>
<a href="#">Second Level</a>
<a href="#">Rpoerting</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>
<li><a href="#">Inventory Report</a></li>
<li><a href="#">Spare Part Moves</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>
</li>
</ul>
</li>
</ul>
</section>
</div>
<section class="example">
<img src="img/expected.png" alt="">
</li>
</ul>
</nav>
</section>
</body>

204
style.scss
View File

@ -1,134 +1,114 @@
body {
font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana,
sans-serif;
font-size: 14pt;
padding: 1rem 5rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 16px;
}
.wrapper {
display: flex;
column-gap: 1rem;
section.sidebar {
width: 320px;
background-color: #f8f9fa;
border: 1px solid #cdcdcd;
}
section.tree-structure {
background-color: rgb(195, 253, 234);
flex-grow: 1;
}
// ----------------------------------------------------------------------------------
section.example {
margin-top: 5rem;
img {
max-width: 100%;
}
}
$text-color: #1f1f1f;
$border-color: #cdcdcd;
$subnav-indent: 16px;
$icon-width: 50px;
// ------------------------------------------------
$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;
nav.main {
li > a {
display: block;
padding: 15px 0;
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;
}
color: $text-color;
border-top: 1px solid $border-color;
}
// 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 {
// level 0: main items
ul {
list-style-type: none;
padding: 0;
margin: 0;
> a {
> li {
a.icon {
position: relative;
padding-left: $icon-width;
&::before {
background-color: transparent;
align-self: flex-start;
height: 30px;
background-image: $border-img, $dot-img;
background-position: bottom center;
content: "";
position: absolute;
top: 0;
left: 0;
width: $icon-width;
height: 100%;
background-position: center center;
background-size: 22px 22px;
background-repeat: no-repeat;
}
&.icon-dashboard::before {
background-image: url("/img/menu-icons/dashboard.svg");
}
&.icon-machines::before {
background-image: url("/img/menu-icons/machines.svg");
}
&.icon-events::before {
background-image: url("/img/menu-icons/events.svg");
}
&.icon-reports::before {
background-image: url("/img/menu-icons/reports.svg");
}
&.icon-call-center::before {
background-image: url("/img/menu-icons/call-center.svg");
}
&.icon-warehouse-management::before {
background-image: url("/img/menu-icons/dashboard.svg");
}
}
// single item: just a dot
&:first-of-type:last-of-type {
> a {
&::before {
background-image: $dot-img;
}
}
// subnav level 1
> ul {
// padding-left: $subnav-indent;
> li {
a {
padding-left: $subnav-indent;
border: none;
&:hover {
background-color: rgba($text-color, 0.03);
}
}
// 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;
// subnav level 2
> ul {
// padding-left: $subnav-indent;
> li {
a {
color: blue;
}
// subnav level 3
> ul {
// padding-left: $subnav-indent;
> li {
a {
color: red;
}
// subnav level 4
> ul {
// padding-left: $subnav-indent;
> li {
a {
color: green;
}
}
}
}
}
}
}
}
}
}
}
}