diff --git a/app/src/components/layout/sidebarLeft/Assets.tsx b/app/src/components/layout/sidebarLeft/Assets.tsx
index 824062f..47e797a 100644
--- a/app/src/components/layout/sidebarLeft/Assets.tsx
+++ b/app/src/components/layout/sidebarLeft/Assets.tsx
@@ -2,7 +2,11 @@ import React, { useEffect, useState } from "react";
import Search from "../../ui/inputs/Search";
import { getCategoryAsset } from "../../../services/factoryBuilder/asset/assets/getCategoryAsset";
import { fetchAssets } from "../../../services/marketplace/fetchAssets";
-import { useDecalStore, useDroppedDecal, useSelectedItem } from "../../../store/builder/store";
+import {
+ useDecalStore,
+ useDroppedDecal,
+ useSelectedItem,
+} from "../../../store/builder/store";
// images -------------------
import vehicle from "../../../assets/image/categories/vehicles.png";
@@ -17,6 +21,7 @@ import decal from "../../../assets/image/categories/decal.png";
import SkeletonUI from "../../templates/SkeletonUI";
import {
AlertIcon,
+ ArrowIcon,
DecalInfoIcon,
HangTagIcon,
NavigationIcon,
@@ -164,7 +169,9 @@ const Assets: React.FC = () => {
-
Results for {searchValue}
+
+ Results for '{searchValue}'
+
{categoryAssets?.map((asset: any, index: number) => (
@@ -210,7 +217,7 @@ const Assets: React.FC = () => {
if (selectedCategory) {
return (
-
+
{selectedCategory}
@@ -231,8 +241,9 @@ const Assets: React.FC = () => {
{activeSubcategories.map((cat, index) => (
{
fetchCategoryDecals(cat.name);
setSelectedSubCategory(cat.name);
@@ -308,7 +319,7 @@ const Assets: React.FC = () => {
category: asset.category,
decalName: asset.decalName,
decalImage: asset.decalImage,
- decalId: asset.id
+ decalId: asset.id,
});
}}
/>
@@ -337,7 +348,7 @@ const Assets: React.FC = () => {
return (
-
Categories
+
Categories
{Array.from(
new Set(categoryList.map((asset) => asset.category))
diff --git a/app/src/styles/layout/sidebar.scss b/app/src/styles/layout/sidebar.scss
index aa8e84e..e3dd706 100644
--- a/app/src/styles/layout/sidebar.scss
+++ b/app/src/styles/layout/sidebar.scss
@@ -1984,17 +1984,51 @@
max-height: 50vh;
overflow: auto;
- h2,
- .searched-content {
+ .header,
+ .searched-content,
+ .categories-header {
color: var(--text-color);
- font-family: $large;
font-weight: $bold-weight;
- padding: 8px;
+ padding: 4px 8px;
@include flex-space-between;
-
- .back-button {
- cursor: pointer;
+ position: sticky;
+ top: 0;
+ z-index: 4;
+ background: var(--background-color);
+ border-radius: 0 0 12px 12px;
+ backdrop-filter: blur(4px);
+ .search-for{
+ display: inline-block;
+ color: var(--accent-color);
+ max-width: 238px;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
+ .back-button {
+ padding: 4px 12px;
+ border-radius: 20px;
+ transition: background 0.2s;
+ display: flex;
+ align-items: center;
+ .back-arrow {
+ margin-right: 2px;
+ transform: translateX(0) translateY(-1px) scale(1.6) rotate(90deg);
+ transition: all 0.2s;
+ }
+ &:hover {
+ background: var(--background-color-solid);
+ .back-arrow {
+ transform: translateX(-2px) translateY(-1px) scale(1.6)
+ rotate(90deg);
+ }
+ }
+ }
+ }
+
+ .categories-header,
+ .searched-content {
+ position: relative;
+ padding: 8px;
}
.categories-container {
@@ -2132,6 +2166,7 @@
border: 1px solid #564b69;
padding: 12px 10px;
border-radius: 15px;
+ margin-bottom: 4px;
.catogory-asset-filter-wrapper {
display: flex;