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

Side sidebar V1.1

Browse Source
This commit is contained in:
Artemiy Solopov
2025-07-30 02:27:55 +03:00
parent c813f35957
commit 3d06ec05b7
7 changed files with 20 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/application.css
+5
View File
@@ -9,6 +9,11 @@
* Consider organizing styles into separate files for maintainability.
*/
body {
display: flex;
flex-flow: row nowrap;
}
site-sidebar {
--background: var(--pico-primary);
}
app/javascript/elements/site_sidebar.js
+10 -7
View File
@@ -1,9 +1,13 @@
import {html, css, LitElement, classMap} from 'lit'
const openIcon = RAILS_ASSET_URL('/mingcute/hamburger_line.svg')
const closeIcon = RAILS_ASSET_URL('/mingcute/close_fill.svg')
export class SiteSidebar extends LitElement {
static styles = css`
:host {
--padding: 0.25rem;
flex-basis: 2rem;
}
aside {
@@ -45,9 +49,10 @@ export class SiteSidebar extends LitElement {
vertical-align: middle;
border-radius: 50%;
box-sizing: border-box;
position: relative;
left: 100%;
position: absolute;
left: calc(100% + 2px);
}
`
@@ -66,11 +71,9 @@ export class SiteSidebar extends LitElement {
}
return html`<aside class="${classMap(classes)}">
<div>
<button class="toggle-button" @click="${this._toggleOpen}">
${this.open ? "⯇" : "⯈"}
</button>
</div>
<button class="toggle-button" @click="${this._toggleOpen}">
<img src="${this.open ? closeIcon : openIcon}">
</button>
<div class="padding">
<slot></slot>
</div>
app/views/layouts/application.html.erb
+1 -1
View File
@@ -24,7 +24,7 @@
</head>
<body>
<site-sidebar id="global_sidebar" data-turbo-permanent>
<site-sidebar id="global_sidebar">
<%= render partial: 'projects_selector' %>
</site-sidebar>
<main class="container">
vendor/assets/images/mingcute/close_fill.svg
Vendored
+1
View File
@@ -0,0 +1 @@
<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><g fill='none' fill-rule='evenodd'><path d='M24 0v24H0V0zM12.593 23.258l-.011.002-.071.035-.02.004-.014-.004-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01-.017.428.005.02.01.013.104.074.015.004.012-.004.104-.074.012-.016.004-.017-.017-.427c-.002-.01-.009-.017-.017-.018m.265-.113-.013.002-.185.093-.01.01-.003.011.018.43.005.012.008.007.201.093c.012.004.023 0 .029-.008l.004-.014-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014-.034.614c0 .012.007.02.017.024l.015-.002.201-.093.01-.008.004-.011.017-.43-.003-.012-.01-.01z'/><path fill='#09244BFF' d='m12 14.122 5.303 5.303a1.5 1.5 0 0 0 2.122-2.122L14.12 12l5.304-5.303a1.5 1.5 0 1 0-2.122-2.121L12 9.879 6.697 4.576a1.5 1.5 0 1 0-2.122 2.12L9.88 12l-5.304 5.304a1.5 1.5 0 1 0 2.122 2.12z'/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 870 B

vendor/assets/images/mingcute/hamburger_line.svg
Vendored
+1
View File
@@ -0,0 +1 @@
<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><g fill='none' fill-rule='evenodd'><path d='M24 0v24H0V0zM12.594 23.258l-.012.002-.071.035-.02.004-.014-.004-.071-.036c-.01-.003-.019 0-.024.006l-.004.01-.017.428.005.02.01.013.104.074.015.004.012-.004.104-.074.012-.016.004-.017-.017-.427c-.002-.01-.009-.017-.016-.018m.264-.113-.014.002-.184.093-.01.01-.003.011.018.43.005.012.008.008.201.092c.012.004.023 0 .029-.008l.004-.014-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014-.034.614c0 .012.007.02.017.024l.015-.002.201-.093.01-.008.003-.011.018-.43-.003-.012-.01-.01z'/><path fill='#09244BFF' d='M5.844 4.566C7.446 3.643 9.619 3 12 3s4.554.643 6.156 1.566c.8.462 1.488 1.01 1.987 1.615.49.595.857 1.318.857 2.105 0 .792-.38 1.412-.99 1.821-.544.365-1.25.553-1.981.667-.58.09-1.259.145-2.019.177l-.786.026-.837.015-.885.006h-3.004l-.885-.006-.837-.015-.786-.026a18.59 18.59 0 0 1-2.019-.177c-.73-.114-1.437-.302-1.981-.667-.61-.41-.99-1.03-.99-1.821 0-.787.366-1.51.857-2.105.499-.604 1.186-1.153 1.987-1.615M5.4 7.454c-.19.229-.4.527-.4.839 0 .235.44.363.81.433l.233.038.236.034c.376.058.807.1 1.291.13l.608.03.66.02.712.012 1.58.01 2.154-.001.79-.005.739-.009.686-.016.323-.011.608-.03c.387-.024.74-.056 1.059-.097l.298-.042.393-.049c.379-.057.82-.17.82-.454 0-.16-.081-.446-.4-.832-.311-.377-.795-.782-1.443-1.155C15.864 5.553 14.037 5 12 5s-3.864.553-5.157 1.3c-.648.372-1.132.777-1.443 1.154m-1.064 4.454a3 3 0 0 1 3.328 0l.781.52a1 1 0 0 0 1.11 0l.78-.52a3 3 0 0 1 3.33 0l.78.52a1 1 0 0 0 1.11 0l.78-.52a3 3 0 0 1 3.33 0l.924.616a1 1 0 1 1-1.11 1.664l-.924-.616a1 1 0 0 0-1.11 0l-.78.52a3 3 0 0 1-3.33 0l-.78-.52a1 1 0 0 0-1.11 0l-.78.52a3 3 0 0 1-3.33 0l-.78-.52a1 1 0 0 0-1.11 0l-.504.346c-.152.1-.316.203-.475.287a1 1 0 1 1-.932-1.769c.072-.038.138-.077.204-.12zM4 15a1 1 0 0 0-1 1v1a4 4 0 0 0 4 4h10a4 4 0 0 0 4-4v-1a1 1 0 0 0-1-1zm3 4a2 2 0 0 1-2-2h14a2 2 0 0 1-2 2z'/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

vendor/assets/images/mingcute/mingcute.md
Vendored
+1
View File
@@ -0,0 +1 @@
Icons from [mingcute](https://www.mingcute.com/)
vendor/assets/images/mingcute/right_fill.svg
Vendored
+1
View File
@@ -0,0 +1 @@
<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><g fill='none' fill-rule='evenodd'><path d='M24 0v24H0V0h24ZM12.593 23.258l-.011.002-.071.035-.02.004-.014-.004-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01-.017.428.005.02.01.013.104.074.015.004.012-.004.104-.074.012-.016.004-.017-.017-.427c-.002-.01-.009-.017-.017-.018Zm.265-.113-.013.002-.185.093-.01.01-.003.011.018.43.005.012.008.007.201.093c.012.004.023 0 .029-.008l.004-.014-.034-.614c-.003-.012-.01-.02-.02-.022Zm-.715.002a.023.023 0 0 0-.027.006l-.006.014-.034.614c0 .012.007.02.017.024l.015-.002.201-.093.01-.008.004-.011.017-.43-.003-.012-.01-.01-.184-.092Z'/><path fill='#09244BFF' d='M16.06 10.94a1.5 1.5 0 0 1 0 2.12l-5.656 5.658a1.5 1.5 0 1 1-2.121-2.122L12.879 12 8.283 7.404a1.5 1.5 0 0 1 2.12-2.122l5.658 5.657Z'/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 829 B