LS menu in toolbar

public/css/style.css

@@ -2032,6 +2032,12 @@ body.in-iframe .main-row > .sidebar {
     right: 0;
     z-index: 1;
 }
+.on-click-menu [menu][bottom] {
+    bottom: 100%;
+    top: auto;
+    left: 0;
+    right: auto;
+}
 .zero-height {
     height: 0 !important;
     padding: 0 !important;

resources/views/app/patient/note/dashboard.blade.php

@@ -2264,6 +2264,20 @@
                                 <span>Goals</span>
                             </div>
                         </div>
+                        <div class="nbt-container px-2 py-1 border-right border-info d-inline-flex align-self-stretch">
+                            <div class="position-relative on-click-menu d-inline-flex align-items-center">
+                                <span class="">Lifestyle <i class="fa fa-caret-up"></i></span>
+                                <div menu bottom class="bg-white border">
+                                    <a href="#" class="ls-segment-trigger px-2 py-1 text-nowrap d-block" data-target="lifestyle_general">General</a>
+                                    <a href="#" class="ls-segment-trigger px-2 py-1 text-nowrap d-block" data-target="lifestyle_nutrition">Nutrition</a>
+                                    <a href="#" class="ls-segment-trigger px-2 py-1 text-nowrap d-block" data-target="lifestyle_physical_activity">Physical Activity</a>
+                                    <a href="#" class="ls-segment-trigger px-2 py-1 text-nowrap d-block" data-target="lifestyle_sleep">Sleep</a>
+                                    <a href="#" class="ls-segment-trigger px-2 py-1 text-nowrap d-block" data-target="lifestyle_social">Social Relationships</a>
+                                    <a href="#" class="ls-segment-trigger px-2 py-1 text-nowrap d-block" data-target="lifestyle_substances">Substance Use</a>
+                                    <a href="#" class="ls-segment-trigger px-2 py-1 text-nowrap d-block" data-target="lifestyle_stress">Stress</a>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                     @endif