mirror of
https://github.com/xHyroM/website.git
synced 2024-11-12 18:48:06 +01:00
mobile sidebar
This commit is contained in:
parent
52a75e2acd
commit
baf6ad9812
7 changed files with 31 additions and 7 deletions
4
public/icons/chevrons-left.svg
Normal file
4
public/icons/chevrons-left.svg
Normal 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>
|
After Width: | Height: | Size: 324 B |
4
public/icons/chevrons-right.svg
Normal file
4
public/icons/chevrons-right.svg
Normal 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>
|
After Width: | Height: | Size: 323 B |
|
@ -28,7 +28,7 @@ const navItems = [
|
|||
<a class="text-2xl font-extrabold" href="/">xHyroM</a>
|
||||
<nav>
|
||||
<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) => (
|
||||
|
|
|
@ -1,6 +1,9 @@
|
|||
---
|
||||
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");
|
||||
for (let i = 0; i < 100; i++) {
|
||||
files.push(files[0]);
|
||||
|
@ -19,8 +22,16 @@ const sections = files.reduce((acc, file) => {
|
|||
const categories = Object.keys(sections);
|
||||
---
|
||||
|
||||
<aside aria-label="Sidebar">
|
||||
<nav class="mr-16 w-full py-4">
|
||||
<aside aria-label="Sidebar" class="">
|
||||
<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">
|
||||
{
|
||||
categories.map((category) => (
|
||||
|
|
|
@ -57,7 +57,8 @@
|
|||
</div>
|
||||
<script>
|
||||
import "../scripts/menu.js";
|
||||
import "../scripts/snow.js";
|
||||
import "../scripts/sidebarToggle.js";
|
||||
/* import "../scripts/snow.js"; */
|
||||
|
||||
import { Fireworks } from "fireworks-js";
|
||||
|
||||
|
|
6
src/scripts/sidebarToggle.js
Normal file
6
src/scripts/sidebarToggle.js
Normal 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");
|
||||
});
|
|
@ -13,7 +13,5 @@ module.exports = {
|
|||
},
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
require("@tailwindcss/typography")
|
||||
],
|
||||
plugins: [require("@tailwindcss/typography")],
|
||||
};
|
||||
|
|
Loading…
Reference in a new issue