From 5f5b63b6f7fdadabd32fe4f5e8d74eb4e822fb8b Mon Sep 17 00:00:00 2001 From: KZacharski Date: Sat, 19 Aug 2023 21:30:03 +0200 Subject: [PATCH] started working on the menu --- .../assets/ic_fluent_caret_left_24_filled.svg | 1 + .../ic_fluent_chevron_left_24_filled.svg | 1 + docs/docs/index.html | 4 ++-- docs/docs/script.js | 11 ++++++++++- docs/docs/style.css | 19 ++++++++++++++++--- 5 files changed, 30 insertions(+), 6 deletions(-) create mode 100644 docs/docs/assets/ic_fluent_caret_left_24_filled.svg create mode 100644 docs/docs/assets/ic_fluent_chevron_left_24_filled.svg diff --git a/docs/docs/assets/ic_fluent_caret_left_24_filled.svg b/docs/docs/assets/ic_fluent_caret_left_24_filled.svg new file mode 100644 index 0000000..e677fb4 --- /dev/null +++ b/docs/docs/assets/ic_fluent_caret_left_24_filled.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/docs/assets/ic_fluent_chevron_left_24_filled.svg b/docs/docs/assets/ic_fluent_chevron_left_24_filled.svg new file mode 100644 index 0000000..ee69b9f --- /dev/null +++ b/docs/docs/assets/ic_fluent_chevron_left_24_filled.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/docs/index.html b/docs/docs/index.html index fc592a2..c274840 100644 --- a/docs/docs/index.html +++ b/docs/docs/index.html @@ -63,16 +63,16 @@ - +

Created by KZacharski (Puffercat)

Project created with diji 1.1

diff --git a/docs/docs/script.js b/docs/docs/script.js index bf4e8ac..094246c 100644 --- a/docs/docs/script.js +++ b/docs/docs/script.js @@ -1,8 +1,17 @@ +var isOpen = false + function openNav() { document.getElementById("drawer").style.width = "250px"; + document.getElementById("drawerbg").style.width = "100%"; + + isOpen = true } /* Set the width of the side navigation to 0 */ function closeNav() { document.getElementById("drawer").style.width = "0"; - } \ No newline at end of file + document.getElementById("drawerbg").style.width = "0"; + isOpen = false + } + + \ No newline at end of file diff --git a/docs/docs/style.css b/docs/docs/style.css index d3591f1..519e9f8 100644 --- a/docs/docs/style.css +++ b/docs/docs/style.css @@ -60,9 +60,22 @@ color: white; left: 0; background-color: #111; /* Black*/ overflow-x: hidden; /* Disable horizontal scroll */ - padding-top: 60px; /* Place content 60px from the top */ + padding-top: 15px; /* Place content 60px from the top */ transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */ } + + .navdrawerbg { + height: 100%; /* 100% Full-height */ + width: 0; /* 0 width - change this with JavaScript */ + position: fixed; /* Stay in place */ + z-index: 0; /* Stay on top */ + top: 0; /* Stay at the top */ + left: 0; + background-color: transparent; /* Black*/ + overflow-x: hidden; /* Disable horizontal scroll */ + padding-top: 15px; /* Place content 60px from the top */ + transition: 0s; /* 0.5 second transition effect to slide in the sidenav */ + } /* The navigation menu links */ .navdrawer a { @@ -94,12 +107,12 @@ color: white; padding: 20px; } - /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */ + /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) @media screen and (max-height: 450px) { .navdrawer {padding-top: 15px;} .navdrawer a {font-size: 18px;} - } + }*/