How to show menu dynamically in Laravel - php

Question

I'm trying to show menu in laravel dynamically.
I have two table, One holds Main Category and other one Holds Sub category
Here is the structure of Category table
----------------------------------
| id | title | slug | type |
| 1 | title1 | slug1 | Android |
| 2 | title2 | slug2 | Android |
| 3 | title3 | slug3 | Android |
| 4 | title4 | slug4 | Ubuntu |
| 5 | title5 | slug5 | Ubuntu |
----------------------------------
Sub Category Structure
-----------------------------------------------
| id | title | slug | category_of|
| 1 | title1 | slug1 | 1 |
| 2 | title2 | slug2 | 1 |
| 3 | title3 | slug3 | 1 |
| 4 | title4 | slug4 | 2 |
| 5 | title5 | slug5 | 1 |
-----------------------------------------------
Here is What I've tried
<?php
$category = App\Models\Menu::where('categories.type', 'Android')
->select('categories.*', 'sub_category.slug as sub_slug', 'sub_category.title')
->join('sub_category', 'sub_category.category_of', '=', 'categories.id')
->get();
?>
#foreach ($category as $value)
<li class="inner-dropdown-item">
<p>
{{ucwords(str_replace('-', ' ', $value->slug))}}
</p>
</li>
<li class="inner-dropdown-item">
{{ucwords(str_replace('-', ' ', $value->sub_slug))}}
</li>
#endforeach
The Problem I'm facing is, it is duplicating main category every time due to foreach loop, for e.g
<li class="inner-dropdown-item">
<p>
Android
</p>
</li>
<li class="inner-dropdown-item">
Calendars
</li>
<!-- /INNER DROPDOWN ITEM -->
<!-- /This Below Android category should not be shown again -->
<li class="inner-dropdown-item">
<p>
Android
</p>
</li>
<li class="inner-dropdown-item">
Database Abstractions
</li>
As you see it is duplicating main category every time sub category is shown. How can i show Main category Once and then all sub category following under it
I have another Template which has different menu HTML Structure
<!-- MENU ITEM -->
<li class="menu-item sub">
<a href="#">
Designer
<!-- SVG ARROW -->
<svg class="svg-arrow">
<use xlink:href="#svg-arrow"></use>
</svg>
<!-- /SVG ARROW -->
</a>
<div class="content-dropdown">
<!-- FEATURE LIST BLOCK -->
<?php $m_des = ''; ?>
#foreach ($design_category as $des_value)
#if($m_des != $des_value->slug)
<div class="feature-list-block">
<a href="{{ Config::get('constants.url.BASE_URL') }}category/{{$des_value->slug}}/">
<h6 class="feature-list-title">{{ucwords(str_replace('-', ' ', $des_value->slug))}}</h6></a>
<hr class="line-separator">
<?php $m_des = $des_value->slug; ?>
#endif
<!-- FEATURE LIST -->
<ul class="feature-list">
<li class="feature-list-item">
{{ucwords(str_replace('-', ' ', $des_value->sub_slug))}}
</li>
</ul>
<!-- /FEATURE LIST -->
</div>
#endforeach
</div>
</li>
<!-- /MENU ITEM -->
It is generating ul and div again and again which causes html errors

Answer 1

There may be a better solution for it. But you can try this. Do order by categories.id then in loop check main category is printed last time or not
<?php
$category = App\Models\Menu::where('categories.type', 'Android')
->select('categories.*', 'sub_category.slug as sub_slug', 'sub_category.title')
->join('sub_category', 'sub_category.category_of', '=', 'categories.id')
->orderBy('categories.id');
->get();
$latest_category = "";
?>
#foreach ($category as $value)
<?php if($latest_category != $value->slug){ ?>
<li class="inner-dropdown-item">
<p>
{{ucwords(str_replace('-', ' ', $value->slug))}}
</p>
</li>
<?php
$latest_category = $value->slug;
} ?>
<li class="inner-dropdown-item">
{{ucwords(str_replace('-', ' ', $value->sub_slug))}}
</li>
#endforeach
EDIT
<div class="content-dropdown">
<!-- FEATURE LIST BLOCK -->
<?php $m_des = '';
$end_div = '';
?>
#foreach ($design_category as $des_value)
#if($m_des != $des_value->slug)
{{$end_div}}
<div class="feature-list-block">
<a href="{{ Config::get('constants.url.BASE_URL') }}category/{{$des_value->slug}}/">
<h6 class="feature-list-title">{{ucwords(str_replace('-', ' ', $des_value->slug))}}</h6></a>
<hr class="line-separator">
<?php $m_des = $des_value->slug;
$end_div = "</div>";
?>
#endif
<!-- FEATURE LIST -->
<ul class="feature-list">
<li class="feature-list-item">
{{ucwords(str_replace('-', ' ', $des_value->sub_slug))}}
</li>
</ul>
<!-- /FEATURE LIST -->
#endforeach
{{$end_div}}
</div>