diff --git a/app/css/misc.css b/app/css/misc.css
index f0f9c41..6675c6b 100644
--- a/app/css/misc.css
+++ b/app/css/misc.css
@@ -51,7 +51,8 @@ input:invalid {
filter: invert(.942);
}
-#home.browsing .home, #home:not(.browsing) .browse {
+#home.browsing .home,
+#home:not(.browsing) .browse {
display: none;
}
@@ -250,15 +251,6 @@ section:target:not(#player) {
transition: top .4s cubic-bezier(.25, .8, .25, 1);
}
-.nav-hidden>nav {
- top: calc(-1* var(--navbar-height)) !important;
-}
-
-.nav-hidden>.content-wrapper {
- top: 0 !important;
- height: 100% !important;
-}
-
.content-wrapper {
transition: top .4s cubic-bezier(.25, .8, .25, 1);
transition-property: top, height;
@@ -302,4 +294,134 @@ nav {
#oauth::after {
white-space: pre !important
+}
+
+/* sidebar */
+:root {
+ --sidebar-minimised: 7rem;
+ --sidebar-width: 22rem
+}
+
+.page-wrapper.with-sidebar[data-sidebar-hidden] {
+ --sidebar-width: var(--sidebar-minimised);
+}
+
+@media (max-width: 768px) {
+ .page-wrapper.with-sidebar[data-sidebar-type~="overlayed-sm-and-down"]>.content-wrapper {
+ left: var(--sidebar-minimised);
+ width: calc(100% - var(--sidebar-minimised));
+ }
+}
+
+.page-wrapper.with-sidebar[data-sidebar-hidden]>.content-wrapper {
+ left: var(--sidebar-width);
+ width: calc(100% - var(--sidebar-width));
+}
+
+.sidebar [data-toggle="tooltip"]::before,
+.page-wrapper:not(.with-sidebar[data-sidebar-hidden]) .sidebar [data-toggle="tooltip"]::after {
+ display: none
+}
+
+.page-wrapper.with-sidebar[data-sidebar-hidden]>.sidebar {
+ left: 0;
+}
+
+.page-wrapper.with-sidebar .text {
+ opacity: 1;
+ transition: opacity .8s cubic-bezier(.25, .8, .25, 1);
+ margin-left: 1rem;
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+ font-weight: 400;
+}
+
+.page-wrapper.with-sidebar[data-sidebar-hidden] .text {
+ opacity: 0;
+}
+
+.sidebar a>span {
+ transition: background 0.4s cubic-bezier(.25, .8, .25, 1), color 0.4s cubic-bezier(.25, .8, .25, 1);
+ color: #fff;
+ border-radius: 0.3rem;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+}
+
+.sidebar a:not(.brand):hover>span {
+ background: #fff;
+ color: var(--dark-color)
+}
+
+
+.sidebar a {
+ width: 100%;
+ font-size: 1.4rem;
+ padding: 0.75rem 1.5rem;
+ height: 5.5rem;
+}
+
+.sidebar .material-icons {
+ font-size: 2.2rem;
+ min-width: 4rem;
+ width: 4rem;
+ height: 4rem;
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.sidebar a:not(.brand) img {
+ font-size: 2.2rem;
+ width: 3rem;
+ height: 3rem;
+ margin: 0.5rem;
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.sidebar .menu {
+ right: 1.5rem;
+ position: absolute;
+}
+
+.sidebar-link img {
+ height: 3rem;
+ margin-right: var(--sidebar-brand-image-margin-right);
+}
+
+.sidebar .brand {
+ height: 8rem;
+}
+
+.page-wrapper.with-transitions.with-sidebar>.sidebar {
+ transition: width .4s cubic-bezier(.25, .8, .25, 1), left .4s cubic-bezier(.25, .8, .25, 1);
+ overflow: visible;
+}
+
+
+.nav-hidden>.sidebar {
+ left: calc(-1* var(--sidebar-width)) !important;
+}
+
+.nav-hidden>.content-wrapper {
+ left: 0 !important;
+ width: 100% !important;
+}
+
+.sidebar [data-toggle="tooltip"]:not([data-target-breakpoint])::after,
+.sidebar [data-toggle="tooltip"]:not([data-target-breakpoint])::after {
+ transition: opacity 0.3s cubic-bezier(.25, .8, .25, 1), top 0.3s cubic-bezier(.25, .8, .25, 1);
+ top: 0;
+ opacity: 0;
+ font-weight: bold;
+}
+
+.sidebar [data-toggle="tooltip"]:not([data-target-breakpoint]):hover::after,
+.sidebar [data-toggle="tooltip"]:not([data-target-breakpoint]):focus::after {
+ opacity: 1;
+ top: 50%
}
\ No newline at end of file
diff --git a/app/index.html b/app/index.html
index 9130a02..76482cc 100644
--- a/app/index.html
+++ b/app/index.html
@@ -6,7 +6,7 @@
-
+
@@ -27,7 +27,7 @@
-
+
-
+