diff --git a/components/doc-sidebar.css b/components/doc-sidebar.css index acb50bc..2a91e9d 100644 --- a/components/doc-sidebar.css +++ b/components/doc-sidebar.css @@ -15,8 +15,33 @@ border-bottom-color: var(--primary-color); } +.toggle-list { + display: none; +} + @media screen and (max-width: 768px) { + .sidebar-hidden{ + display: none; + } + .sidebar { + position: sticky; + top: 10px; + z-index: 5; + } + .sidebar-heading { + padding-top: 1rem; + } .sidebar-components { - flex-flow: row wrap; + flex-direction: column; + align-items: start; + height: 200vh; + overflow-y: auto; + } + .rotation { + transform: rotate(180deg); + } + .toggle-list { + display: block; + transition: 0.4s; } } diff --git a/components/modals.css b/components/modals.css index 8e5b72d..06a7fbd 100644 --- a/components/modals.css +++ b/components/modals.css @@ -11,7 +11,9 @@ align-items: center; justify-content: center; } - +.demo-modal{ + visibility: hidden; +} .gentle-modal-container.active-modal { display: flex; } diff --git a/documentation/alerts.html b/documentation/alerts.html index 1b7e203..21309e7 100644 --- a/documentation/alerts.html +++ b/documentation/alerts.html @@ -36,8 +36,13 @@
Gentle UI
-

COMPONENTS

-
+ \ No newline at end of file diff --git a/documentation/avatars.html b/documentation/avatars.html index 769ce02..dcd9570 100644 --- a/documentation/avatars.html +++ b/documentation/avatars.html @@ -36,8 +36,13 @@
Gentle UI
-

COMPONENTS

-
+ \ No newline at end of file diff --git a/documentation/badges.html b/documentation/badges.html index 02cbd08..efdb2ed 100644 --- a/documentation/badges.html +++ b/documentation/badges.html @@ -36,8 +36,13 @@
Gentle UI
-

COMPONENTS

-
+ \ No newline at end of file diff --git a/documentation/buttons.html b/documentation/buttons.html index 9b6ee8f..386f92e 100644 --- a/documentation/buttons.html +++ b/documentation/buttons.html @@ -36,8 +36,13 @@
Gentle UI
-

COMPONENTS

-
+ \ No newline at end of file diff --git a/documentation/cards.html b/documentation/cards.html index 8257ed6..7fd75e0 100644 --- a/documentation/cards.html +++ b/documentation/cards.html @@ -36,8 +36,13 @@
Gentle UI
-

COMPONENTS

-
+ \ No newline at end of file diff --git a/documentation/grids.html b/documentation/grids.html index 44caf4a..483e913 100644 --- a/documentation/grids.html +++ b/documentation/grids.html @@ -36,8 +36,13 @@
Gentle UI
-

COMPONENTS

-
+ \ No newline at end of file diff --git a/documentation/images.html b/documentation/images.html index 0adaa39..10d3eb2 100644 --- a/documentation/images.html +++ b/documentation/images.html @@ -35,8 +35,13 @@
Gentle UI
-

COMPONENTS

-
+ \ No newline at end of file diff --git a/documentation/inputs.html b/documentation/inputs.html index f67f4de..44b01d3 100644 --- a/documentation/inputs.html +++ b/documentation/inputs.html @@ -35,8 +35,13 @@
Gentle UI
-

COMPONENTS

-
+ \ No newline at end of file diff --git a/documentation/lists.html b/documentation/lists.html index cadfdc3..44b6308 100644 --- a/documentation/lists.html +++ b/documentation/lists.html @@ -36,8 +36,13 @@
Gentle UI
-

COMPONENTS

-
+ \ No newline at end of file diff --git a/documentation/modals.html b/documentation/modals.html index 8270c5a..14cb51c 100644 --- a/documentation/modals.html +++ b/documentation/modals.html @@ -36,8 +36,13 @@
Gentle UI
-

COMPONENTS

-
+ \ No newline at end of file diff --git a/documentation/navigation.html b/documentation/navigation.html index 8b03774..163bdc3 100644 --- a/documentation/navigation.html +++ b/documentation/navigation.html @@ -36,8 +36,13 @@
Gentle UI
-

COMPONENTS

-
+ \ No newline at end of file diff --git a/documentation/ratings.html b/documentation/ratings.html index 3c35f2c..8e68659 100644 --- a/documentation/ratings.html +++ b/documentation/ratings.html @@ -36,8 +36,13 @@
Gentle UI
-

COMPONENTS

-
+ \ No newline at end of file diff --git a/documentation/scripts/docSidebar.js b/documentation/scripts/docSidebar.js new file mode 100644 index 0000000..73f1112 --- /dev/null +++ b/documentation/scripts/docSidebar.js @@ -0,0 +1,6 @@ +const toggleHeading = document.querySelector(".toggle-list"); +const sidebarList = document.querySelector(".sidebar-components"); +toggleHeading.addEventListener("click", () => { + sidebarList.classList.toggle("sidebar-hidden"); + toggleHeading.classList.toggle("rotation"); +}); diff --git a/documentation/sliders.html b/documentation/sliders.html index c0b272e..c741b92 100644 --- a/documentation/sliders.html +++ b/documentation/sliders.html @@ -36,8 +36,13 @@
Gentle UI
-

COMPONENTS

-
+ \ No newline at end of file diff --git a/documentation/text-utilities.html b/documentation/text-utilities.html index c4b4938..f857a15 100644 --- a/documentation/text-utilities.html +++ b/documentation/text-utilities.html @@ -36,8 +36,13 @@
Gentle UI
-

COMPONENTS

-
+ \ No newline at end of file diff --git a/documentation/toasts.html b/documentation/toasts.html index 0b7805b..9436655 100644 --- a/documentation/toasts.html +++ b/documentation/toasts.html @@ -36,8 +36,13 @@
Gentle UI
-

COMPONENTS

-
- + + \ No newline at end of file