alecodes/mini-strap
2
0
Fork 0
Code Issues 3 Pull requests Projects Releases Packages 2 Wiki Activity Actions

feat(components): add offcanvas component

Browse source
This commit is contained in:
Alexander Navarro 2024-12-26 19:49:08 -03:00
parent e0ed5a5ddd
commit c47a2eff89
14 changed files with 233 additions and 129 deletions
Download patch file Download diff file Expand all files Collapse all files

1
packages/website/js/index.ts
View file

@ -1,2 +1,3 @@
import "@mini-strap/components/accordion/index.ts";
import "@mini-strap/components/offcanvas/index.ts";
console.log("hello world!");

1
packages/website/sass/@mini-strap/core/style.scss Symbolic link
View file

@ -0,0 +1 @@
/home/aleidk/Repos/Projects/mini-strap/packages/core/src/style.scss

1
packages/website/sass/style.scss
View file

@ -1,6 +1,7 @@
@use "@mini-strap/core";
@use "@mini-strap/components/navbar/navbar.scss";
@use "@mini-strap/components/accordion/accordion.scss";
@use "@mini-strap/components/offcanvas/style.scss";
html {
// background-color: red;

35
packages/website/templates/base.html
View file

@ -1,25 +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-position-sticky msp-py-1 msp-py-lg-3">
{% include "partials/header.html" %}
</header>
<main>
{% block content %}{% endblock %}
</main>
</body>
<body transition:animate="fade">
<header class="msp-py-1 msp-py-lg-3">
{% include "partials/header.html" %}
</header>
<main>
{% block content %}{% endblock %}
</main>
</body>
</html>

53
packages/website/templates/partials/header.html
View file

@ -1,20 +1,35 @@
<ul class="msp-list-unstyle msp-accordion">
<li>
<a href="/">Overview</a>
</li>
<aside id="main-offcanvas" class="msp-offcanvas">
<div class="msp-offcanvas-backdrop msp-offcanvas-toggle"
data-msp-target="#main-offcanvas"></div>
{% for item in get_taxonomy(kind="section") | get(key="items") %}
<li class="msp-accordion-item">
<a class="msp-accordion-header" href="{{ get_url(path="@/" ~ item.slug ~ "/_index.md") }}">{{ item.name | title }}</a>
<div class="msp-accordion-collapse">
<ul class="msp-list-unstyle msp-accordion-content">
{% for page in item.pages %}
<li class="">
<a href="{{ page.permalink }}">{{ page.title | default(value=page.slug) | title }}</a>
</li>
{% endfor %}
</ul>
</div>
</li>
{% endfor %}
</ul>
<div class="msp-offcanvas-content">
<div class="msp-offcanvas-body">
<ul class="msp-list-unstyle msp-accordion">
<li>
<a href="/">Overview</a>
</li>
{% for item in get_taxonomy(kind="section") | get(key="items") %}
<li class="msp-accordion-item">
<a class="msp-accordion-header" href="{{ get_url(path="@/" ~ item.slug ~ "/_index.md") }}">{{ item.name |
title
}}</a>
<div class="msp-accordion-collapse">
<ul class="msp-list-unstyle msp-accordion-content">
{% for page in item.pages %}
<li class="">
<a href="{{ page.permalink }}">{{ page.title | default(value=page.slug) | title }}</a>
</li>
{% endfor %}
</ul>
</div>
</li>
{% endfor %}
</ul>
</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>