upd

Code/Inventory/Ui/Inventory.razor

@@ -0,0 +1,43 @@
+@using Sasalka
+@inherits PanelComponent
+@namespace Sasalka.Ui
+
+<root class="@( Inventar.IsInventoryOpen ? "" : "hidden" )">
+	<div class="inventory-panel">
+		@foreach ( var item in PlayerInventory.Items )
+		{
+			<Sasalka.Ui.InventoryItem Item="@item" OnItemClick="@( UseItem )"/>
+		}
+	</div>
+</root>
+
+@code {
+	Dedugan Player => Dedugan.Local;
+	Inventar PlayerInventory => Player?.Inventory;
+
+
+	void UseItem( Sasalka.InventoryItem item )
+	{
+		Player?.Inventory?.EquipItem( item );
+	}
+
+	protected override void OnUpdate()
+	{
+		if ( Input.Pressed( "Score" ) )
+		{
+			Inventar.IsInventoryOpen = !Inventar.IsInventoryOpen;
+		}
+	}
+
+	protected override int BuildHash()
+	{
+		if ( !Inventar.IsInventoryOpen || PlayerInventory == null )
+			return -1;
+
+		var hash = new HashCode();
+		hash.Add( Inventar.IsInventoryOpen );
+
+		return hash.ToHashCode();
+	}
+
+}

Code/Inventory/Ui/Inventory.razor.scss

@@ -0,0 +1,34 @@
+Inventory {
+  background: linear-gradient(135deg, #0a1a2b 0%, #08111f 100%);
+  border: 3px solid #2a3d54;
+  border-radius: 14px;
+  font-family: 'Orbitron', 'Poppins', sans-serif;
+  position: absolute;
+  width: 30%;
+  height: 96vh;
+  right: 20px;
+  top: 20px;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  transition: all 0.2s ease;
+  z-index: 100;
+  overflow: hidden;
+
+  pointer-events: all;
+
+  &.hidden {
+    opacity: 0;
+  }
+}
+
+.inventory-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.hidden {
+  opacity: 0;
+}

Code/Inventory/Ui/InventoryItem.razor

@@ -0,0 +1,38 @@
+@using Sandbox.UI
+@using Sasalka
+@inherits Sandbox.UI.Panel
+@namespace Sasalka.Ui
+
+<root class="inventory-item @( Equipped ? "equipped" : "" )" @onclick="@(() => OnItemClick?.Invoke( Item ))">
+	<input type="checkbox" class="equipped-checkbox" checked="@Equipped" disabled/>
+	@if ( Item.Definition.ImageTexture.IsValid() )
+	{
+		<img src="@Item.Definition.ImageTexture.ResourcePath" alt="@Item.Definition.Name"/>
+	}
+	else if ( Item.Definition.ImageUrl.Length > 0 )
+	{
+		<img src="@Item.Definition.ImageUrl" alt="@Item.Definition.Name">
+	}
+
+	<div class="inventory-item__name">@Item?.Definition.Name</div>
+
+	<div class="inventory-item__count">@Item?.Count / @Item?.MaxCount</div>
+</root>
+
+@code {
+	public Sasalka.InventoryItem Item { get; set; }
+	public Action<Sasalka.InventoryItem> OnItemClick { get; set; }
+	public bool Equipped { get; set; }
+
+	protected override int BuildHash()
+	{
+		base.BuildHash();
+
+		var hash = new HashCode();
+
+		hash.Add( Item.Count );
+
+		return hash.ToHashCode();
+	}
+
+}

Code/Inventory/Ui/InventoryItem.razor.scss

@@ -0,0 +1,41 @@
+InventoryItem {
+  width: 100%;
+  //height: 64px;
+  background: #2a3d53;
+  display: flex;
+  gap: 24px;
+  align-items: center;
+  justify-content: flex-start;
+  border: 1px solid #666;
+  cursor: pointer;
+  transition: background 0.2s;
+  border-radius: 12px;
+  padding: 12px 24px;
+  position: relative;
+
+  &:hover {
+    background: #444;
+  }
+
+  img {
+    width: 32px;
+    height: 32px;
+  }
+
+  &.name {
+    font-size: 20px;
+  }
+
+  &.equipped {
+    border: 2px solid #4caf50;
+    background: #2e3e2e;
+  }
+
+  .equipped-checkbox {
+    position: absolute;
+    top: 6px;
+    left: 6px;
+    pointer-events: none;
+    accent-color: #4caf50;
+  }
+}