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

WORKING MOBILE NAV ?!!!!!!!

Browse source
This commit is contained in:
OLIMINATOR 2022-12-17 15:14:19 +01:00
parent e72387b39f
commit 63a21e1a8c
10 changed files with 26 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
public/icons/x.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="M18 6L6 18" stroke="#B7C8CB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6 6L18 18" stroke="#B7C8CB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 311 B

BIN
public/logo.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 32 KiB

10
src/assets/icons/discord.svg
View file

@ -1,10 +0,0 @@
<svg width="36" height="27" viewBox="0 0 36 27" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_11_2)">
<path d="M30.4955 2.26121C28.1302 1.18964 25.6333 0.429427 23.0684 0C22.7174 0.620889 22.3998 1.2597 22.117 1.91376C19.3849 1.50636 16.6065 1.50636 13.8744 1.91376C13.5915 1.25977 13.2739 0.620964 12.9231 0C10.3565 0.433054 7.85792 1.19507 5.4903 2.26681C0.789968 9.14851 -0.484218 15.8593 0.152875 22.4748C2.90551 24.4873 5.98649 26.0179 9.26189 27C9.99941 26.0184 10.652 24.977 11.2128 23.887C10.1477 23.4933 9.11965 23.0076 8.14061 22.4356C8.39827 22.2506 8.65028 22.0601 8.89379 21.8752C11.7426 23.2009 14.8519 23.8883 18 23.8883C21.1481 23.8883 24.2574 23.2009 27.1062 21.8752C27.3525 22.0741 27.6045 22.2646 27.8593 22.4356C26.8784 23.0086 25.8485 23.4952 24.7815 23.8898C25.3416 24.9793 25.9942 26.0198 26.7324 27C30.0106 26.0219 33.0939 24.492 35.8471 22.4776V22.4776C36.5946 14.8057 34.5701 8.1566 30.4955 2.26121ZM12.0198 18.4063C10.2444 18.4063 8.7777 16.812 8.7777 14.8506C8.7777 12.8892 10.1935 11.2808 12.0141 11.2808C13.8348 11.2808 15.2902 12.8892 15.2591 14.8506C15.2279 16.812 13.8291 18.4063 12.0198 18.4063ZM23.9802 18.4063C22.202 18.4063 20.7409 16.812 20.7409 14.8506C20.7409 12.8892 22.1567 11.2808 23.9802 11.2808C25.8037 11.2808 27.2477 12.8892 27.2166 14.8506C27.1854 16.812 25.7895 18.4063 23.9802 18.4063Z" fill="#5865F2"/>
</g>
<defs>
<clipPath id="clip0_11_2">
<rect width="36" height="27" fill="white"/>
</clipPath>
</defs>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 1.5 KiB

10
src/assets/icons/github.svg
View file

@ -1,10 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_11_7)">
<path d="M9 19C4 20.5 4 16.5 2 16M16 22V18.13C16.0375 17.6532 15.9731 17.1738 15.811 16.7238C15.6489 16.2738 15.3929 15.8634 15.06 15.52C18.2 15.17 21.5 13.98 21.5 8.52C21.4997 7.12383 20.9627 5.7812 20 4.77C20.4559 3.54851 20.4236 2.19835 19.91 0.999999C19.91 0.999999 18.73 0.649999 16 2.48C13.708 1.85882 11.292 1.85882 9 2.48C6.27 0.649999 5.09 0.999999 5.09 0.999999C4.57638 2.19835 4.54414 3.54851 5 4.77C4.03013 5.7887 3.49252 7.14346 3.5 8.55C3.5 13.97 6.8 15.16 9.94 15.55C9.611 15.89 9.35726 16.2954 9.19531 16.7399C9.03335 17.1844 8.96681 17.6581 9 18.13V22" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_11_7">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 890 B

5
src/assets/icons/instagram.svg
View file

@ -1,5 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17 2H7C4.23858 2 2 4.23858 2 7V17C2 19.7614 4.23858 22 7 22H17C19.7614 22 22 19.7614 22 17V7C22 4.23858 19.7614 2 17 2Z" stroke="#FFDB01" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16 11.37C16.1234 12.2022 15.9813 13.0522 15.5938 13.799C15.2063 14.5458 14.5932 15.1514 13.8416 15.5297C13.0901 15.9079 12.2385 16.0396 11.4078 15.9059C10.5771 15.7723 9.80977 15.3801 9.21485 14.7852C8.61993 14.1902 8.22774 13.4229 8.09408 12.5922C7.96042 11.7615 8.09208 10.9099 8.47034 10.1584C8.8486 9.40685 9.4542 8.79374 10.201 8.40624C10.9478 8.01874 11.7978 7.87658 12.63 8C13.4789 8.12588 14.2649 8.52146 14.8717 9.1283C15.4785 9.73515 15.8741 10.5211 16 11.37Z" stroke="#FFDB01" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M17.5 6.5H17.51" stroke="#FFDB01" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 990 B

3
src/assets/icons/twitter.svg
View file

@ -1,3 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M23 2.99998C22.0424 3.67546 20.9821 4.19209 19.86 4.52999C19.2577 3.8375 18.4573 3.34668 17.567 3.12391C16.6767 2.90115 15.7395 2.95718 14.8821 3.28444C14.0247 3.6117 13.2884 4.19439 12.773 4.9537C12.2575 5.71302 11.9877 6.61232 12 7.52998V8.52998C10.2426 8.57555 8.50127 8.1858 6.93101 7.39543C5.36074 6.60506 4.01032 5.43862 3 3.99998C3 3.99998 -1 13 8 17C5.94053 18.398 3.48716 19.0989 1 19C10 24 21 19 21 7.49998C20.9991 7.22144 20.9723 6.94358 20.92 6.66999C21.9406 5.66348 22.6608 4.3927 23 2.99998V2.99998Z" stroke="#1DA1F2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 710 B

4
src/assets/icons/youtube.svg
View file

@ -1,4 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22.54 6.42C22.4212 5.94541 22.1793 5.51057 21.8387 5.15941C21.498 4.80824 21.0708 4.55318 20.6 4.42C18.88 4 12 4 12 4C12 4 5.12002 4 3.40002 4.46C2.92927 4.59318 2.502 4.84824 2.16137 5.19941C1.82074 5.55057 1.57881 5.98541 1.46002 6.46C1.14524 8.20556 0.991258 9.97631 1.00002 11.75C0.988802 13.537 1.14279 15.3213 1.46002 17.08C1.59098 17.5398 1.83833 17.9581 2.17817 18.2945C2.518 18.6308 2.93884 18.8738 3.40002 19C5.12002 19.46 12 19.46 12 19.46C12 19.46 18.88 19.46 20.6 19C21.0708 18.8668 21.498 18.6118 21.8387 18.2606C22.1793 17.9094 22.4212 17.4746 22.54 17C22.8524 15.2676 23.0063 13.5103 23 11.75C23.0112 9.96295 22.8573 8.1787 22.54 6.42V6.42Z" stroke="#FE0000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9.75 15.02L15.5 11.75L9.75 8.48001V15.02Z" stroke="#FE0000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 990 B

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

@ -23,7 +23,9 @@ const navItems = [
>
<a class="font-extrabold text-2xl" href="/">xHyroM</a>
<nav>
<ul class="gap-10 hidden md:flex">
<ul
class="absolute top-0 left-0 md:relative nav-links gap-10 md:flex hidden md:flex-row bg-gray md:bg-transparent w-full [&_li]:my-2 [&_li]:ml-4 border-b-[1px] md:border-b-0 border-neutral-800"
>
{
navItems.map((item) => (
<li class=" hover:-translate-y-[2px] transition-all">
@ -38,11 +40,13 @@ const navItems = [
}
</ul>
</nav>
<button
><span class="sr-only">menu</span><img
src="/icons/menu.svg"
alt="hambuerger menu icon"
/>
<button class="hamburger md:hidden block">
<span class="sr-only">menu</span>
<img src="/icons/menu.svg" alt="hambuerger menu icon" />
</button>
<button class="hamburger-close md:hidden hidden z-30">
<span class="sr-only">menu</span>
<img src="/icons/x.svg" alt="hambuerger menu icon" />
</button>
</Container>
</header>

3
src/layouts/Layout.astro
View file

@ -45,5 +45,8 @@
</head>
<body class="bg-dark overflow-x-hidden font-['Source Code Pro']">
<slot />
<script>
import "../scripts/menu.js";
</script>
</body>
</html>

9
src/scripts/menu.js Normal file
View file

@ -0,0 +1,9 @@
document.querySelector(".hamburger").addEventListener("click", () => {
document.querySelector(".nav-links").classList.remove("hidden");
document.querySelector(".hamburger-close").classList.remove("hidden");
});
document.querySelector(".hamburger-close").addEventListener("click", () => {
document.querySelector(".nav-links").classList.toggle("hidden");
document.querySelector(".hamburger-close").classList.toggle("hidden");
});