artemis/subtle-storm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added the hamburger button for the sidebar

Browse Source
This commit is contained in:
Artemiy Solopov
2026-03-11 15:24:45 +02:00
parent 8412103349
commit 5a7cc10f23
3 changed files with 32 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/elements/site_sidebar.js
+19 -17
View File
@@ -41,21 +41,17 @@ export class SiteSidebar extends LitElement {
padding-inline: var(--padding); padding-inline: var(--padding);
} }
.toggle-button { .toggle-button-container {
display: inline-block; background-color: var(--pico-muted-border-color);
border: 3px solid var(--pico-muted-color);
font-size: 1.5rem; border-radius: 1000px;
height: var(--_button-size); corner-shape: squircle;
width: var(--_button-size);
padding: 0;
text-align: center;
vertical-align: middle;
border-radius: 50%;
box-sizing: border-box;
position: absolute; position: absolute;
left: calc(100% + var(--_button-offset)); left: calc(100% + var(--_button-offset));
/* Mostly to fix the oversized hamburger */
scale: 60%;
transform-origin: 0 50%;
} }
.bg { .bg {
@@ -89,9 +85,9 @@ export class SiteSidebar extends LitElement {
return html` return html`
<aside class="${classMap(classes)}"> <aside class="${classMap(classes)}">
<button class="toggle-button" @click="${this._toggleOpen}"> <div class="toggle-button-container">
<img src="${this.open ? closeIcon : openIcon}"> <slot name="toggle-button" @click="${this._toggleOpen}"></slot>
</button> </div>
<div class="padding"> <div class="padding">
<slot></slot> <slot></slot>
</div> </div>
@@ -106,7 +102,13 @@ export class SiteSidebar extends LitElement {
return html`<div class="bg" @click="${this._toggleOpen}"></div>` return html`<div class="bg" @click="${this._toggleOpen}"></div>`
} }
_toggleOpen() { _toggleOpen(event) {
// let button = event.target.closest('button')
let nodes = this.shadowRoot.querySelector('slot[name="toggle-button"]').assignedNodes()
let button = nodes.find(e => e.nodeName == 'BUTTON')
this.open = !this.open this.open = !this.open
button.classList.toggle('is-active', this.open)
button.setAttribute('aria-pressed', this.open.toString())
} }
} }
app/views/layouts/application.html.erb
+6
View File
@@ -18,6 +18,7 @@
<link rel="apple-touch-icon" href="/icon.png"> <link rel="apple-touch-icon" href="/icon.png">
<%= stylesheet_link_tag 'pico.jade.min.css', "data-turbo-track": "reload" %> <%= stylesheet_link_tag 'pico.jade.min.css', "data-turbo-track": "reload" %>
<%= stylesheet_link_tag 'hamburgers-1.2.0.min.css', "data-turbo-track": "reload" %>
<%# Includes all stylesheet files in app/assets/stylesheets %> <%# Includes all stylesheet files in app/assets/stylesheets %>
<%= stylesheet_link_tag :app, "data-turbo-track": "reload" %> <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %> <%= javascript_importmap_tags %>
@@ -25,6 +26,11 @@
<body> <body>
<site-sidebar id="global_sidebar"> <site-sidebar id="global_sidebar">
<button slot="toggle-button" class="hamburger hamburger--vortex" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
<h1>Subtle Storm</h1> <h1>Subtle Storm</h1>
<%= render partial: 'projects_selector' %> <%= render partial: 'projects_selector' %>
vendor/stylesheets/hamburgers-1.2.0.min.css
Vendored
+7
View File
File diff suppressed because one or more lines are too long