diff --git a/assets/scripts/sections/sidebar.js b/assets/scripts/sections/sidebar.js
index ef90ce2..a10d33d 100644
--- a/assets/scripts/sections/sidebar.js
+++ b/assets/scripts/sections/sidebar.js
@@ -6,19 +6,19 @@ function toggleSidebar () {
if (sidebar == null) {
return
}
- if (sidebar.classList.contains('hide')) {
- sidebar.classList.remove('hide')
+ if (sidebar.classList.contains('expanded')) {
+ sidebar.classList.remove('expanded')
} else {
// if toc-section is open, then close it first
const toc = document.getElementById('toc-section')
if (toc != null && toc.classList.contains('hide')) {
toc.classList.remove('hide')
}
- // add "hide" class
- sidebar.classList.add('hide')
+ // add "expanded" class
+ sidebar.classList.add('expanded')
// if it is mobile device. then scroll to top.
const { isMobile } = getDeviceState()
- if (isMobile && sidebar.classList.contains('hide')) {
+ if (isMobile && sidebar.classList.contains('expanded')) {
document.body.scrollTop = 0
document.documentElement.scrollTop = 0
if (document.getElementById('hero-area') != null) {
diff --git a/assets/styles/application.template.scss b/assets/styles/application.template.scss
index fd4edb5..ca89c31 100644
--- a/assets/styles/application.template.scss
+++ b/assets/styles/application.template.scss
@@ -42,6 +42,7 @@
// components
@import './components/cards';
@import './components/buttons';
+@import './components/links';
// override
diff --git a/assets/styles/components/links.scss b/assets/styles/components/links.scss
new file mode 100644
index 0000000..a302632
--- /dev/null
+++ b/assets/styles/components/links.scss
@@ -0,0 +1,15 @@
+.list-link {
+ text-decoration: none;
+ color: #131313;
+ transition: all 0.3s ease-out;
+ &.active {
+ display: inline;
+ color: #2098d1;
+ }
+
+ &:hover {
+ margin-left: 3px;
+ color: #2098d1;
+ transition: all 0.3s ease-out;
+ }
+ }
\ No newline at end of file
diff --git a/assets/styles/layouts/main.scss b/assets/styles/layouts/main.scss
index e9d39f6..3ee539b 100644
--- a/assets/styles/layouts/main.scss
+++ b/assets/styles/layouts/main.scss
@@ -62,6 +62,9 @@ a {
a:hover {
color: #207089;
}
+a.focused {
+ color: #2098d1 !important;
+}
diff --git a/assets/styles/navigators/sidebar.scss b/assets/styles/navigators/sidebar.scss
index d392b58..a1bc52a 100644
--- a/assets/styles/navigators/sidebar.scss
+++ b/assets/styles/navigators/sidebar.scss
@@ -4,7 +4,7 @@
max-width: 20%;
/* background-color: lightsalmon; */
transition: all ease-out 0.5s;
-
+
.sidebar-holder {
top: 2.5rem;
position: sticky;
@@ -13,151 +13,123 @@
overflow: auto;
box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
transition: all ease-out 0.3s;
+
+ .sidebar {
+ background: #f9fafc;
+ height: 100vh;
+ transition: all ease-out 0.3s;
+
+ #search-box {
+ margin-left: 5%;
+ margin-right: 5%;
+ width: -webkit-fill-available;
+ height: 35px;
+ padding-left: 15px;
+ margin-top: 30px;
+ margin-bottom: 10px;
+ border-radius: 5px;
+ background-color: #e5e9f2;
+ transition: all 0.3s ease-out;
+ border: 1px solid #c0ccda;
+
+ &:focus {
+ border: 1pt solid #248aaa;
+ outline: none;
+ }
+ }
+
+ #list-heading {
+ padding-left: 0px !important;
+ }
+
+ .sidebar-tree {
+ padding-left: 1rem;
+ position: relative;
+ width: -moz-max-content;
+ width: max-content;
+
+ .tree {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+
+ li {
+ margin: 0;
+ padding: 0 1em;
+ line-height: 2em;
+ color: #3c4858;
+ position: relative;
+
+ i {
+ color: #3c4858;
+ font-size: 12px;
+ margin-right: 5px;
+ }
+ }
+ .shift-right {
+ margin-left: 5px;
+ }
+
+ .subtree {
+ padding-left: 0.7rem;
+
+ &:before {
+ content: '';
+ display: block;
+ width: 0;
+ position: absolute;
+ top: 2.5rem;
+ left: 1.5rem;
+ bottom: 0.9rem;
+ border-left: 1px solid;
+ }
+ li {
+ &:before {
+ content: '';
+ display: block;
+ width: 20px;
+ height: 0;
+ border-top: 1px solid;
+ margin-top: -1px;
+ position: absolute;
+ top: 18px;
+ left: -3px;
+ }
+ &:last-child:before {
+ background: #f9fafc;
+ height: auto;
+ top: 1.1rem;
+ bottom: 0;
+ }
+ ul {
+ position: relative;
+ padding-left: 0.5rem;
+ display: none;
+ list-style: none;
+
+ &.active {
+ display: block;
+ }
+
+ &:before {
+ content: '';
+ display: block;
+ width: 0;
+ position: absolute;
+ top: -10px;
+ left: 0.3rem;
+ bottom: 0.9rem;
+ border-left: 1px solid;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
}
-
- .sidebar {
- background: #f9fafc;
- height: 100vh;
- transition: all ease-out 0.3s;
- }
-
- .sidebar-tree {
- padding-left: 1rem;
- position: relative;
- width: -moz-max-content;
- width: max-content;
- }
-
- #search-box {
- margin-left: 5%;
- margin-right: 5%;
- width: -webkit-fill-available;
- height: 35px;
- padding-left: 15px;
- margin-top: 30px;
- margin-bottom: 10px;
- border-radius: 5px;
- background-color: #e5e9f2;
- transition: all 0.3s ease-out;
- border: 1px solid #c0ccda;
- }
-
- #search-box:focus {
- border: 1pt solid #248aaa;
- outline: none;
- }
-
- #list-heading {
- padding-left: 0px !important;
- }
-
- .tree,
- .tree ul {
- margin: 0;
- padding: 0;
- list-style: none;
- }
-
- .tree li {
- margin: 0;
- padding: 0 1em;
- line-height: 2em;
- color: #3c4858;
- position: relative;
- }
-
- .tree li a {
- text-decoration: none;
- color: #131313;
- transition: all 0.3s ease-out;
- }
-
- .tree li a.active {
- display: inline;
- color: #2098d1;
- }
-
- .tree li a:hover {
- margin-left: 3px;
- color: #2098d1;
- transition: all 0.3s ease-out;
- }
-
- .tree i {
- color: #3c4858;
- font-size: 12px;
- margin-right: 5px;
- }
-
- .tree .shift-right {
- margin-left: 5px;
- }
-
- .tree .active,
- .tree .active > ul {
- display: block;
- }
-
- .subtree {
- padding-left: 0.7rem;
- }
-
- .subtree:before {
- content: "";
- display: block;
- width: 0;
- position: absolute;
- top: 2.5rem;
- left: 1.5rem;
- bottom: 0.9rem;
- border-left: 1px solid;
- }
-
- .subtree ul,
- ul > ul {
- position: relative;
- padding-left: 0.5rem;
- display: none;
- }
-
- .subtree ul:before {
- content: "";
- display: block;
- width: 0;
- position: absolute;
- top: -10px;
- left: 0.3rem;
- bottom: 0.9rem;
- border-left: 1px solid;
- }
-
- .subtree li:before {
- content: "";
- display: block;
- width: 20px;
- height: 0;
- border-top: 1px solid;
- margin-top: -1px;
- position: absolute;
- top: 18px;
- left: -3px;
- }
-
- .subtree li:last-child:before {
- background: #f9fafc;
- height: auto;
- top: 1.1rem;
- bottom: 0;
- }
-
- a.focused {
- color: #2098d1 !important;
- }
-
- /* ============= Device specific fixes ======= */
-
- /* Large screens such as TV */
- @media only screen and (min-width: 1824px) {
+
+ @include media('<=ultra-large') {
flex: 15%;
max-width: 15%;
@@ -165,22 +137,20 @@
max-width: 100%;
}
}
- /* Extra large devices (large desktops, 1200px and up) */
-
- @media (max-width: 1400px) {
+
+ @include media('<=extra-large') {
.sidebar-holder {
max-width: 20rem;
}
}
-
- @media (max-width: 1200px) {
+
+ @include media('<=very-large') {
.sidebar-tree {
margin-left: 1rem;
}
}
-
- /* IPad Pro */
- @media (max-width: 1024px) {
+
+ @include media('<=large') {
flex: 0%;
max-width: 0%;
min-height: 100vh;
@@ -192,23 +162,16 @@
width: 100%;
max-height: calc(100vh - 2.5rem);
}
-
- &.hide {
+
+ &.expanded {
flex: 30%;
max-width: 30%;
margin-right: 0.5rem;
transition: all ease-out 0.3s;
}
}
-
- /* Large devices (desktops, 992px and up) */
-
- @media (max-width: 992px) {
- }
-
- /* Medium devices (tablets, 768px and up) */
-
- @media only screen and (max-width: 768px) {
+
+ @include media('<=medium') {
flex: 0%;
max-width: 0%;
min-height: 100vh;
@@ -219,25 +182,50 @@
top: 2.5rem;
width: 100%;
}
-
- &.hide {
+
+ &.expanded {
flex: 40%;
max-width: 40%;
margin-right: 0.5rem;
transition: all ease-out 0.3s;
}
}
-
- /* Small devices (landscape phones, 576px and up) */
-
- @media only screen and (max-width: 576px) {
+
+ @include media('<=small') {
width: 100%;
min-height: 0;
max-height: 0;
max-width: 100%;
transition: all ease-out 0.5s;
- &.hide {
+ .sidebar-holder {
+ max-height: 0;
+ height: -moz-fit-content;
+ height: fit-content;
+ overflow: hidden;
+ max-width: 100%;
+ transition: all ease-out 0.5s;
+
+ .sidebar {
+ position: relative;
+ height: -moz-fit-content;
+ height: fit-content;
+ max-height: -moz-fit-content;
+ max-height: fit-content;
+ width: 100vw;
+ min-height: 0;
+ overflow: hidden;
+ transition: all ease-out 0.5s;
+
+ .sidebar-tree {
+ margin-left: 0rem;
+ max-height: 0;
+ transition: all 0.5s ease-out;
+ }
+ }
+ }
+
+ &.expanded {
margin-top: 2rem;
position: relative;
height: -moz-fit-content;
@@ -246,54 +234,16 @@
max-height: 300vh;
max-width: 100%;
transition: all ease-out 0.5s;
- }
-
- .sidebar-holder {
- max-height: 0;
- height: -moz-fit-content;
- height: fit-content;
- overflow: hidden;
- max-width: 100%;
- transition: all ease-out 0.5s;
- }
-
- &.hide .sidebar-holder {
- max-height: 200vh;
- transition: all ease-out 0.5s;
- }
-
- .sidebar {
- position: relative;
- height: -moz-fit-content;
- height: fit-content;
- max-height: -moz-fit-content;
- max-height: fit-content;
- width: 100vw;
- min-height: 0;
- overflow: hidden;
- transition: all ease-out 0.5s;
- }
-
- .sidebar-tree {
- margin-left: 0rem;
- max-height: 0;
- transition: all 0.5s ease-out;
- }
- &.hide .sidebar-tree {
- max-height: 200vh;
- transition: all 0.5s ease-out;
+
+ .sidebar-holder {
+ max-height: 200vh;
+ transition: all ease-out 0.5s;
+
+ .sidebar-tree {
+ max-height: 200vh;
+ transition: all 0.5s ease-out;
+ }
+ }
}
}
-
- /* iPhoneX, iPhone 6,7,8 */
- @media only screen and (max-width: 375px) {
- }
-
- /* Galaxy S5, Moto G4 */
- @media only screen and (max-width: 360px) {
- }
-
- /* iPhone 5 or before */
- @media only screen and (max-width: 320px) {
- }
-}
\ No newline at end of file
+}
diff --git a/layouts/partials/navigators/sidebar.html b/layouts/partials/navigators/sidebar.html
index 1319e66..bb2032e 100644
--- a/layouts/partials/navigators/sidebar.html
+++ b/layouts/partials/navigators/sidebar.html
@@ -9,7 +9,7 @@
{{ if .HasChildren }}
- {{.Name}}
+ {{.Name}}
{{ partial "navigators/sidebar.html" (dict "menuName" $.menuName "menuItems" .Children "ctx" $.ctx) }}
@@ -17,6 +17,6 @@
{{ else }}
- {{.Name}}
+ {{.Name}}
{{ end }}
{{ end }}