js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

add layout toggling (#294)

Browse Source 
* Add nav toggling

* fix comments

* fix comments

* prettier

* add comments / docs

* prettier

* fix up page stuff

* prettier

* Add comment

* minor fixes

* prettier
This commit is contained in:
Konnor Rogers
2024-12-10 13:53:08 -05:00
committed by GitHub
parent 414b29b046
commit e3fdf61e4a
5 changed files with 79 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
docs/_includes/base.njk
View File

@@ -85,7 +85,7 @@
</head>
<body class="layout-{{ layout | stripExtension }}">
<!-- use view="desktop" as default to reduce layout jank on desktop site. -->
<wa-page view="desktop">
<wa-page view="desktop" disable-navigation-toggle="">
<header slot="header">
{# Logo #}
<div id="docs-branding">
@@ -93,6 +93,7 @@
<wa-button appearance="text" size="small" data-toggle-nav>
<wa-icon name="bars" label="Toggle navigation"></wa-icon>
</wa-button>
<a href="/" aria-label="Web Awesome">
<span class="only-desktop">{% include "logo.njk" %}</span>
<span class="only-mobile">{% include "logo-simple.njk" %}</span>

2
docs/_includes/page-demo.njk
View File

@@ -6,7 +6,7 @@
<legend>Slots</legend>
<div class="options">
{% for slot in slots %}
{% if slot.name != "skip-to-content" %}
{% if (slot.name != "skip-to-content") and (slot.name != "navigation-toggle-icon") %}
<wa-checkbox name="slot" value="{{ slot.name }}" {{ 'checked' if slot.name != "menu" | safe}} class="{{ 'default' if not slot.name }}"
data-description="{{ slot.description | inlineMarkdown }}" title="{{ slot.description | inlineMarkdown | striptags | safe }}">
{{ slot.name or "(default)" }}

4
docs/docs/components/page.md
View File

@@ -46,7 +46,7 @@ The following sections of a page are "sticky" by default, meaning they remain in
- `banner`
- `header`
- `sub-header`
- `navigation` (or `menu`)
- `menu` (`navigation` itself is not sticky, but its parent `menu` is)
- `aside`
This is often desirable, but you can change this behavior using the `disable-sticky` attribute. Use a space-delimited list of names to tell the page which sections should not be sticky.
@@ -795,4 +795,4 @@ A sample media app page using `header`, `navigation-header`, `main-header`, and
padding: 1.5rem;
}
</style>
```
```