diff --git a/experiment/index.html b/experiment/index.html new file mode 100644 index 0000000..d1e4de9 --- /dev/null +++ b/experiment/index.html @@ -0,0 +1,97 @@ + + + + + + + + Document + + + + +

Sidebar menu structure playground

+ +
+
+ +
+ +
+ +
+ +
+ +
+
+ +
+ +
+ + + \ No newline at end of file diff --git a/experiment/style.scss b/experiment/style.scss new file mode 100644 index 0000000..fdfd80f --- /dev/null +++ b/experiment/style.scss @@ -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; + } + } +} diff --git a/img/menu-icons/call-center.svg b/img/menu-icons/call-center.svg new file mode 100644 index 0000000..57a7c2c --- /dev/null +++ b/img/menu-icons/call-center.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/menu-icons/dashboard.svg b/img/menu-icons/dashboard.svg new file mode 100644 index 0000000..340e085 --- /dev/null +++ b/img/menu-icons/dashboard.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/img/menu-icons/events.svg b/img/menu-icons/events.svg new file mode 100644 index 0000000..a31d98a --- /dev/null +++ b/img/menu-icons/events.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/menu-icons/machines.svg b/img/menu-icons/machines.svg new file mode 100644 index 0000000..e6fa3c5 --- /dev/null +++ b/img/menu-icons/machines.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/menu-icons/reports.svg b/img/menu-icons/reports.svg new file mode 100644 index 0000000..37e426f --- /dev/null +++ b/img/menu-icons/reports.svg @@ -0,0 +1,3 @@ + + + diff --git a/index.html b/index.html index d1e4de9..4238f7a 100644 --- a/index.html +++ b/index.html @@ -10,87 +10,53 @@ -

Sidebar menu structure playground

- -
-
-
- -
- +
diff --git a/style.scss b/style.scss index fdfd80f..5ed84b1 100644 --- a/style.scss +++ b/style.scss @@ -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); +nav.main { + li > a { + display: block; + padding: 15px 0; + text-decoration: none; + color: $text-color; + border-top: 1px solid $border-color; } - // level one - padding-left: $left-padding-unit; + // level 0: main items + ul { + list-style-type: none; + padding: 0; + margin: 0; + > li { + a.icon { + position: relative; + padding-left: $icon-width; - // 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; + 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"); } } - } - // 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; - } - } - } + // subnav level 1 + > ul { + // padding-left: $subnav-indent; + > li { + a { + padding-left: $subnav-indent; + border: none; + &:hover { + background-color: rgba($text-color, 0.03); + } + } - // single item: just a dot - &:first-of-type:last-of-type { - > a { - &::before { - background-image: $dot-img; + // 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; + } + } + } + } + } + } + } } } } } - - // 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; - } - } }