1. #[component]
  2. #[allow(non_snake_case)]
  3. pub fn MobileView() -> impl IntoView {
  4.     let products = create_resource(|| (), |_| async move { get_products().await });
  5.     let categories = create_resource(|| (), |_| async move { get_categories().await });
  6.    
  7.     view! {
  8.         <Body/>
  9.         <ul class="list-unstyled ps-0 overflow-x-hidden overflow-y-scroll">
  10.             <Suspense fallback=move || {
  11.                 view! {
  12.                     <span id="loading-text" class="text-bold fs-4">
  13.                         "Caricamento..."
  14.                     </span>
  15.                 }
  16.             }>
  17.                 <ErrorBoundary fallback=move |errors| view! { <ErrorTemplate errors=errors/> }>
  18.                     <For
  19.                         each=move || categories.get().unwrap().unwrap()
  20.                         key=move |category| category.id.to_owned()
  21.                         children=move |category: Category| {
  22.                             view! {
  23.                                 <li class="mb-1">
  24.                                     <div class="d-flex gap-1 align-items-center category">
  25.                                         <svg
  26.                                             xmlns="http://www.w3.org/2000/svg"
  27.                                             width="20"
  28.                                             height="20"
  29.                                             fill="currentColor"
  30.                                             class="bi bi-caret-right-fill carretRight"
  31.                                             viewBox="0 0 16 16"
  32.                                         >
  33.                                             <path d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z"></path>
  34.                                         </svg>
  35.                                         <button
  36.                                             class="categoryBtn btn btn-toggle align-items-center rounded collapsed vw-100 text-start border-0"
  37.                                             attr:data-bs-toggle="collapse"
  38.                                             attr:data-bs-target="#home-collapse"
  39.                                             attr:aria-expanded="false"
  40.                                             style="padding: 0.3rem !important; border: solid black;border-radius: 5px; font-size: 20px; font-weight: 700;"
  41.                                         >
  42.                                             {category.name}
  43.                                         </button>
  44.                                     </div>
  45.                                     <div class="collapse" id="home-collapse">
  46.                                         <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small ps-4">
  47.                                             <For
  48.                                                 each=move || {
  49.                                                     products
  50.                                                         .get()
  51.                                                         .unwrap()
  52.                                                         .unwrap()
  53.                                                         .iter()
  54.                                                         .filter(|product| {
  55.                                                             product.category_id == category.id
  56.                                                         })
  57.                                                         .collect::<Vec<_>>()
  58.                                                 }
  59.                                                 key=move |product| product.id.to_owned()
  60.                                                 children=move |product| {}
  61.                                             />
  62.                                         </ul>
  63.                                     </div>
  64.                                 </li>
  65.                             }
  66.                         }
  67.                     />
  68.  
  69.                 </ErrorBoundary>
  70.             </Suspense>
  71.         </ul>
  72.     }
  73. }