hyro/website
1
0
Fork 0
mirror of https://github.com/xHyroM/website.git synced 2024-11-22 15:01:05 +01:00
Code Issues Projects Releases Wiki Activity Actions

mobile sidebar

Browse source
This commit is contained in:
OLIMINATOR 2023-01-04 13:14:27 +01:00
parent 52a75e2acd
commit baf6ad9812
7 changed files with 31 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
public/icons/chevrons-left.svg Normal file
View file

@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11 17L6 12L11 7" stroke="#B7C8CB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M18 17L13 12L18 7" stroke="#B7C8CB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 324 B

4
public/icons/chevrons-right.svg Normal file
View file

@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13 17L18 12L13 7" stroke="#B7C8CB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6 17L11 12L6 7" stroke="#B7C8CB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 323 B

2
src/components/widgets/Navbar.astro
View file

@ -28,7 +28,7 @@ const navItems = [
<a class="text-2xl font-extrabold" href="/">xHyroM</a> <a class="text-2xl font-extrabold" href="/">xHyroM</a>
<nav> <nav>
<ul <ul
class="nav-links absolute top-0 left-0 hidden w-full gap-10 border-b-[1px] border-neutral-800 bg-gray transition-all md:relative md:flex md:flex-row md:border-b-0 md:bg-transparent [&_li]:my-2 [&_li]:ml-4" class="nav-links absolute top-0 left-0 z-20 hidden w-full gap-10 border-b-[1px] border-neutral-800 bg-gray transition-all md:relative md:flex md:flex-row md:border-b-0 md:bg-transparent [&_li]:my-2 [&_li]:ml-4"
> >
{ {
navItems.map((item) => ( navItems.map((item) => (

15
src/components/widgets/docs/Sidebar.astro
View file

@ -1,6 +1,9 @@
--- ---
import type { MarkdownInstance } from "astro"; import type { MarkdownInstance } from "astro";
import leftArrow from "/icons/chevrons-left.svg";
import rightArrow from "/icons/chevrons-right.svg";
const files = await Astro.glob("../../../pages/docs/items/**/*.md"); const files = await Astro.glob("../../../pages/docs/items/**/*.md");
for (let i = 0; i < 100; i++) { for (let i = 0; i < 100; i++) {
files.push(files[0]); files.push(files[0]);
@ -19,8 +22,16 @@ const sections = files.reduce((acc, file) => {
const categories = Object.keys(sections); const categories = Object.keys(sections);
--- ---
<aside aria-label="Sidebar"> <aside aria-label="Sidebar" class="">
<nav class="mr-16 w-full py-4"> <div class="absolute z-10 text-white md:hidden">
<button id="sidebar-show" class="p-4 pl-2">
<img src={rightArrow} alt="" id="open-arrow" class="duration-200" />
</button>
</div>
<nav
id="sidebar"
class="md:bg-transparentpy-4 invisible absolute mt-6 mr-16 w-full -translate-x-full bg-dark transition-transform duration-200 md:visible md:relative md:mt-0 md:inline md:translate-x-0"
>
<ul class="overflow-y-auto overflow-x-visible"> <ul class="overflow-y-auto overflow-x-visible">
{ {
categories.map((category) => ( categories.map((category) => (

3
src/layouts/Layout.astro
View file

@ -57,7 +57,8 @@
</div> </div>
<script> <script>
import "../scripts/menu.js"; import "../scripts/menu.js";
import "../scripts/snow.js"; import "../scripts/sidebarToggle.js";
/* import "../scripts/snow.js"; */
import { Fireworks } from "fireworks-js"; import { Fireworks } from "fireworks-js";

6
src/scripts/sidebarToggle.js Normal file
View file

@ -0,0 +1,6 @@
document.getElementById("sidebar-show").addEventListener("click", () => {
document.getElementById("sidebar-show").classList.remove("hidden");
document.getElementById("sidebar").classList.toggle("translate-x-0");
document.getElementById("sidebar").classList.remove("invisible");
document.getElementById("open-arrow").classList.toggle("rotate-180");
});

4
tailwind.config.cjs
View file

@ -13,7 +13,5 @@ module.exports = {
}, },
}, },
}, },
plugins: [ plugins: [require("@tailwindcss/typography")],
require("@tailwindcss/typography")
],
}; };