feat(components): allow to only hide offcanvas on breakpoint

This commit is contained in:
Alexander Navarro 2024-12-27 12:54:09 -03:00
parent c47a2eff89
commit 37a1551699
4 changed files with 62 additions and 40 deletions

View file

@ -1,26 +1,26 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="description" content="Astro description" />
<meta name="viewport" content="width=device-width" />
<title>alecodes.page</title>
<ViewTransitions />
<head>
<meta charset="UTF-8" />
<meta name="description" content="Astro description" />
<meta name="viewport" content="width=device-width" />
<title>alecodes.page</title>
<ViewTransitions />
{% block scripts %}
<script src="/js/index.js"></script>{% endblock %}
<link rel="stylesheet" href="/css/style.css" />
{% block scripts %}<script src="/js/index.js"></script>{% endblock %}
<link rel="stylesheet" href="/css/style.css" />
</head>
</head>
<body transition:animate="fade">
<header class="msp-py-1 msp-py-lg-3">
<body transition:animate="fade">
{% include "partials/header.html" %}
</header>
<main>
{% block content %}{% endblock %}
</main>
</body>
<main>
<nav class="msp-d-flex msp-justify-content-end">
<button class="msp-offcanvas-toggle" data-msp-target="#main-offcanvas">Toggle</button>
</nav>
{% block content %}{% endblock %}
</main>
</body>
</html>

View file

@ -1,4 +1,4 @@
<aside id="main-offcanvas" class="msp-offcanvas">
<aside id="main-offcanvas" class="msp-offcanvas msp-offcanvas-sm">
<div class="msp-offcanvas-backdrop msp-offcanvas-toggle"
data-msp-target="#main-offcanvas"></div>
@ -29,7 +29,3 @@
</div>
</div>
</aside>
<nav class="msp-d-flex msp-justify-content-end">
<button class="msp-offcanvas-toggle" data-msp-target="#main-offcanvas">Toggle</button>
</nav>