Implement the Inventory tab's sub-navigation (closes #97)

styles/mixins/_partials.scss

@@ -1,4 +1,5 @@
 @use "../vars" as *;
+@use "./material" as material;
 
 @mixin input-generic {
 	border-width: 2px;
@@ -12,4 +13,14 @@
 	&:active {
 		transform: scale(103%);
 	}
-}
+}
+
+@mixin sub-nav($parent, $group, $display) {
+	nav.#{$group} {
+		@include material.elevate(1);
+		display: none;
+	}
+	&:has(nav.#{$parent} .active[data-tab="#{$group}"]) nav.#{$group} {
+		display: #{$display};
+	}
+}

styles/sheets/actor/char-sheet/pages/inventory.scss

@@ -0,0 +1,9 @@
+.dotdungeon .actor--pc-v2 .active .inventory-page {
+	margin-bottom: 100px;
+}
+
+.dotdungeon .actor--pc-v2 .active .inventory-page .tab[data-tab="player"] {
+	display: grid;
+	gap: 16px;
+	grid-template-columns: 1fr 4fr;
+}

styles/sheets/actor/char-sheet/pages/stats.scss

@@ -1,6 +1,5 @@
-.dotdungeon .actor--pc .active.stats-panel {
+.dotdungeon .actor--pc-v2 .active.stats-page {
 	display: grid;
-	height: 100%;
 	gap: 16px;
 	grid-template-columns: 1fr 1fr;
 	grid-template-rows: auto auto auto;

styles/sheets/actor/char-sheet/themes/dark.scss

@@ -9,7 +9,7 @@ $on-surface: white;
 $on-primary: $t;
 $on-secondary: $t;
 
-.actor--pc {
+.actor--pc-v2 {
 	--sheet-bg: #{$background};
 	--nav-bg: #{$surface};
 

styles/sheets/actor/char-sheet/v2.scss

@@ -1,13 +1,11 @@
 @use "./themes/dark.scss";
 @use "../../../mixins/material" as material;
+@use "../../../mixins/partials" as partials;
 
 @use "./pages/stats.scss";
 
-.dotdungeon .actor--pc {
+.dotdungeon .actor--pc-v2 {
 	background-color: var(--sheet-bg);
-	position: relative;
-
-	color: white;
 
 	.e-0dp { @include material.elevate(0); }
 	.e-1dp { @include material.elevate(1); }
@@ -20,12 +18,33 @@
 	.e-16dp { @include material.elevate(16); }
 	.e-24dp { @include material.elevate(24); }
 
-	nav {
-		background-color: var(--nav-bg);
-		@include material.elevate(02);
+	.nav-bar {
+		@include material.elevate(8);
+		background: color-mix(in lab, var(--nav-bg), white 5%);
 		position: absolute;
 		bottom: 0;
-		width: 100%;
+		width: calc(100% - 6px);
+
+		nav {
+			display: flex;
+			flex-direction: row;
+			flex-wrap: wrap;
+			gap: 8px;
+			padding: 8px;
+		}
+
+		@include partials.sub-nav("page", "inventory", flex);
+
+		button {
+			@include material.elevate(2);
+			height: 36px;
+			box-sizing: border-box;
+
+			&:hover {
+				// background: color-mix(in lab, inherit, currentColor 4%);
+				@include material.elevate(4);
+			}
+		}
 	}
 
 	.page-content {