Archive/clean-cuts
1
0
Fork 0
mirror of https://github.com/BlossomiShymae/clean-cuts.git synced 2025-12-06 10:10:47 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Change nav layout

Browse Source
This commit is contained in:
BlossomiShymae
2024-09-12 16:04:31 -05:00
parent d7e00e6eef
commit 41d937ae6f
2 changed files with 71 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
layouts/default.vue
View File

@@ -16,45 +16,77 @@
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between"> <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1"> <ul class="navbar-nav flex-grow-1">
<li class="nav-item"> <li class="nav-item">
<NuxtLink class="nav-link" to="/champions"> <div class="dropdown">
<MaterialIcon name="account-group" :size="24" /> Champions <button class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown">
</NuxtLink> League
</button>
<ul class="dropdown-menu p-2">
<li>
<NuxtLink class="nav-link" to="/champions">
<MaterialIcon name="account-group" :size="24" /> Champions
</NuxtLink>
</li>
<li>
<NuxtLink class="nav-link" to="/items">
<MaterialIcon name="magic-staff" :size="24" /> Items
</NuxtLink>
</li>
<li>
<NuxtLink class="nav-link" to="/runes">
<MaterialIcon name="shield" :size="24" /> Runes
</NuxtLink>
</li>
<li>
<NuxtLink class="nav-link" to="/ward-skins">
<MaterialIcon name="floor-lamp" :size="24" /> Ward Skins
</NuxtLink>
</li>
</ul>
</div>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<NuxtLink class="nav-link" to="/items"> <div class="dropdown">
<MaterialIcon name="magic-staff" :size="24" /> Items <button class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown">
</NuxtLink> TFT
</button>
<ul class="dropdown-menu p-2">
<li>
<NuxtLink class="nav-link" to="/companions">
<MaterialIcon name="penguin" :size="24" /> Companions
</NuxtLink>
</li>
</ul>
</div>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<NuxtLink class="nav-link" to="/runes"> <div class="dropdown">
<MaterialIcon name="shield" :size="24" /> Runes <button class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown">
</NuxtLink> Shared
</li> </button>
<li class="nav-item"> <ul class="dropdown-menu p-2">
<NuxtLink class="nav-link" to="/summoner-icons"> <li>
<MaterialIcon name="image" :size="24" /> Summoner Icons <NuxtLink class="nav-link" to="/summoner-icons">
</NuxtLink> <MaterialIcon name="image" :size="24" /> Summoner Icons
</li> </NuxtLink>
<li class="nav-item"> </li>
<NuxtLink class="nav-link" to="/ward-skins"> <li>
<MaterialIcon name="floor-lamp" :size="24" /> Ward Skins <NuxtLink class="nav-link" to="/summoner-emotes">
</NuxtLink> <MaterialIcon name="face-woman-shimmer" :size="24" /> Emotes
</li> </NuxtLink>
<li class="nav-item"> </li>
<NuxtLink class="nav-link" to="/summoner-emotes"> <li>
<MaterialIcon name="face-woman-shimmer" :size="24" /> Emotes <NuxtLink class="nav-link" to="/loots">
</NuxtLink> <MaterialIcon name="treasure-chest" :size="24" /> Loots
</li> </NuxtLink>
<li class="nav-item"> </li>
<NuxtLink class="nav-link" to="/companions"> </ul>
<MaterialIcon name="penguin" :size="24" /> Companions </div>
</NuxtLink>
</li>
<li class="nav-item">
<NuxtLink class="nav-link" to="/loots">
<MaterialIcon name="treasure-chest" :size="24" /> Loots
</NuxtLink>
</li> </li>
<div class="ms-2 d-flex align-items-center">
<NuxtLink class="text-decoration-none text-light nav-item" to="/settings">
<MaterialIcon name="cog" :size="24" /> Settings
</NuxtLink>
</div>
</ul> </ul>
</div> </div>
</div> </div>
@@ -73,9 +105,6 @@
<a class="text-decoration-none text-light" href="https://github.com/BlossomiShymae/clean-cuts" referrerpolicy="no-referrer"> <a class="text-decoration-none text-light" href="https://github.com/BlossomiShymae/clean-cuts" referrerpolicy="no-referrer">
<MaterialIcon name="github" :size="24" /> GitHub <MaterialIcon name="github" :size="24" /> GitHub
</a> </a>
<NuxtLink class="text-decoration-none text-light" to="/settings">
<MaterialIcon name="earth" :size="24" /> Settings
</NuxtLink>
<a class="text-decoration-none text-light" href="https://blossomishymae.github.io/" referrerpolicy="no-referrer">blossomishymae.github.io</a> <a class="text-decoration-none text-light" href="https://blossomishymae.github.io/" referrerpolicy="no-referrer">blossomishymae.github.io</a>
<a class="text-decoration-none text-light" href="https://communitydragon.org" referrerpolicy="no-referrer">CommunityDragon</a> <a class="text-decoration-none text-light" href="https://communitydragon.org" referrerpolicy="no-referrer">CommunityDragon</a>
<!-- <a class="text-decoration-none text-light" href="https://discord.com/invite/riotgamesdevrel" referrerpolicy="no-referrer">DevRel Discord</a> --> <!-- <a class="text-decoration-none text-light" href="https://discord.com/invite/riotgamesdevrel" referrerpolicy="no-referrer">DevRel Discord</a> -->

5
public/css/app.css
View File

@@ -79,6 +79,11 @@ table > tbody > tr:hover > * {
background-color: #0008 !important; background-color: #0008 !important;
} }
ul.dropdown-menu {
background: transparent;
backdrop-filter: blur(0.4rem);
}
.background { .background {
height: 100%; height: 100%;
width: 100%; width: 100%;