zcdziura/aisle17
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Navigation looks a little better

Browse source
This commit is contained in:
Z. Charles Dziura 2025-06-08 23:05:14 -04:00
parent 1880bb4efd
commit 0ff95a4e16
4 changed files with 26 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
webapp/src/app/app.scss
View file

@ -1,4 +1,5 @@
:host { :host {
display: grid; display: grid;
grid-template-columns: min-content auto; grid-template-columns: min-content auto;
min-height: 100vh;
} }

14
webapp/src/app/components/nav-rail/nav-rail.html
View file

@ -1,16 +1,16 @@
<nav> <nav>
<ul> <ul class="nav-list">
<li> <li class="nav-list__item">
<img src="icons/calendar-dates.svg" alt="Meal Plan"> <img src="icons/calendar-dates.svg" alt="Meal Plan">
<span>Meal Plan</span> <span class="nav-list__item-label">Plan</span>
</li> </li>
<li> <li class="nav-list__item">
<img src="icons/shopping-cart.svg" alt="Grocery List"> <img src="icons/shopping-cart.svg" alt="Grocery List">
<span>Grocery List</span> <span class="nav-list__item-label">Groceries</span>
</li> </li>
<li> <li class="nav-list__item">
<img src="icons/search.svg" alt="Search"> <img src="icons/search.svg" alt="Search">
<span>Search</span> <span class="nav-list__item-label">Search</span>
</li> </li>
</ul> </ul>
</nav> </nav>

20
webapp/src/app/components/nav-rail/nav-rail.scss
View file

@ -1,15 +1,29 @@
nav { nav {
ul { background-color: var(--color-surface-container);
box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
font-size: 1.6em;
height: 100%;
.nav-list {
align-items: center; align-items: center;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
list-style: none; list-style: none;
padding-left: 0; padding: 1.2em;
li { .nav-list__item {
align-items: center; align-items: center;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
inline-size: min-content;
&:not(:last-of-type) {
margin-bottom: 1.2em;
}
.nav-list__item-label {
white-space: pre;
}
} }
} }
} }

1
webapp/src/styles.scss
View file

@ -32,5 +32,6 @@
} }
body { body {
font-size: 62.5%;
margin: 0; margin: 0;
} }