From 7257fdb5376c137129ae6634055c9656d948e22e Mon Sep 17 00:00:00 2001 From: Hatsune Patrick Date: Mon, 3 Mar 2025 19:17:26 +0900 Subject: [PATCH] More mobile support on nav + Code fix --- src/assets/main/close.svg | 1 + src/assets/main/menu.svg | 1 + src/components/navbar.tmpl | 40 ++++++++++- src/scripts/navbar.js | 15 +++++ src/styles/home.css | 48 +++++++------- src/styles/main.css | 131 ++++++++++++++++++++++++++++++++++++- 6 files changed, 209 insertions(+), 27 deletions(-) create mode 100644 src/assets/main/close.svg create mode 100644 src/assets/main/menu.svg create mode 100644 src/scripts/navbar.js diff --git a/src/assets/main/close.svg b/src/assets/main/close.svg new file mode 100644 index 0000000..c64a8e5 --- /dev/null +++ b/src/assets/main/close.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/main/menu.svg b/src/assets/main/menu.svg new file mode 100644 index 0000000..a4c2e73 --- /dev/null +++ b/src/assets/main/menu.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/navbar.tmpl b/src/components/navbar.tmpl index fc530cd..e845cde 100644 --- a/src/components/navbar.tmpl +++ b/src/components/navbar.tmpl @@ -23,10 +23,48 @@ -
  • +
  • Git
    • + + + {{ end }} diff --git a/src/scripts/navbar.js b/src/scripts/navbar.js new file mode 100644 index 0000000..ff1405a --- /dev/null +++ b/src/scripts/navbar.js @@ -0,0 +1,15 @@ +let navbarButton = document.getElementById("NavButton"); +let navbarMobile = document.getElementById("NavMobile"); +let navbarClose = document.getElementById("NavClose"); + +navbarButton.addEventListener('click', function(event) { + if (navbarMobile.style.display === 'none' || navbarMobile.style.display === '') { + navbarMobile.style.display = 'flex'; + } +}) + +navbarClose.addEventListener('click', function(event) { + if (navbarMobile.style.display === 'flex' || navbarMobile.style.display === '') { + navbarMobile.style.display = 'none'; + } +}) \ No newline at end of file diff --git a/src/styles/home.css b/src/styles/home.css index b7ee83f..609030c 100644 --- a/src/styles/home.css +++ b/src/styles/home.css @@ -28,6 +28,30 @@ header { font-size: 1.5rem; margin-left: 20px; } + + .pfp { + display: flex; + align-items: center; + justify-content: center; + height: 130px !important; + width: 130px !important; + border: solid; + border-width: 6px; + border-radius: 50%; + border-color: var(--bg-alt-color); + overflow: hidden; + margin-left: 20px; + margin-top: -50px; + user-select: none; + flex-shrink: 0; + + img { + width:100%; + height:100%; + object-fit: cover; + background-color: #afb5c8; + } + } } #headercontent { @@ -37,30 +61,6 @@ header { align-items: center; } -.pfp { - display: flex; - align-items: center; - justify-content: center; - height: 130px !important; - width: 130px !important; - border: solid; - border-width: 6px; - border-radius: 50%; - border-color: var(--bg-alt-color); - overflow: hidden; - margin-left: 20px; - margin-top: -50px; - user-select: none; - flex-shrink: 0; - - img { - width:100%; - height:100%; - object-fit: cover; - background-color: #afb5c8; - } -} - #headerImg { height: 250px; width: 100%; diff --git a/src/styles/main.css b/src/styles/main.css index 4bdfe8d..0632048 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -98,6 +98,123 @@ nav { } } +#NavButton { + display: none; + width: 30px; + height: 100%; + padding: 0 13px; + box-sizing: content-box; + border-top-right-radius: 10px; + border-bottom-right-radius: 10px; + cursor: pointer; +} + +#NavButton:hover { + background-color: #2269d4; +} + +#NavMobile { + display: none; + position: absolute; + height: 100%; + width: 100%; + background-color: var(--bg-color); + margin: -20px; + z-index: 999; + color: white; + font-family: 'Rubik', sans-serif; + font-weight: 500; + flex-direction: column; + align-items: center; + + div { + display: flex; + align-items: center; + margin-top: 20px; + justify-content: center; + width: 90%; + height: 50px; + border-radius: 10%; + background-color: var(--bg-alt-color); + z-index: 1000; + + h1 { + text-align: center; + width: fit-content; + font-size: 1.5rem; + } + } + + ul { + position: absolute; + height: 100%; + width: 90%; + display: flex; + flex-direction: column; + list-style: none; + padding: 0; + margin: 0; + text-align: center; + justify-content: center; + } + + ul li { + width: 100%; + text-align: center; + padding: 15px 0; + background-color: var(--bg-alt-color); + margin: 5px 0; + border-radius: 10px; + } + + ul li:hover { + background-color: #2269d4; + } + + #NavClose { + position: absolute; + right: 20px; + width: 30px; + padding: 0 13px; + box-sizing: content-box; + height: 50px; + border-top-right-radius: 10%; + border-bottom-right-radius: 10%; + cursor: pointer; + } + + #NavClose:hover { + background-color: #2269d4; + } + + .active { + background-color: #2269d4 !important; + } + + .pfp { + display: flex; + align-items: center; + justify-content: center; + height: 45px !important; + width: 45px !important; + border: solid; + border-width: 6px; + border-radius: 50%; + border-color: var(--bg-alt-color); + overflow: hidden; + user-select: none; + flex-shrink: 0; + + img { + width:100%; + height:100%; + object-fit: cover; + background-color: #afb5c8; + } + } +} + + @media screen and (max-width: 540px) { nav { justify-content: center; @@ -110,8 +227,18 @@ nav { @media screen and (max-width: 400px) { nav { - ul li { - padding: 0 8px; + justify-content:space-between; + + ul { + display: none; + } + + h1 { + display: block; } } + + #NavButton { + display: block; + } }