I want to set sidebar menu active when clicked. Now only the first menu is selected as active. If other menus are selected, the first menu still remains as active menu. How to implement this ?
My code:
<div id="mobile_sidebar_display">
<div
class="logo_section d-flex justify-content-center align-items-center"
>
<a v-on:click="closeSideDrawer" :href="base + '/'">
<img src="../../assets/images/logo_2.svg" class="w-100" />
</a>
</div>
<div style="height: 10px"></div>
<a
v-on:click="closeSideDrawer"
class="sidebar_link active"
:href="base + '/'"
><i class="fas fa-home"></i> <span class="ml-2">Home</span></a
>
<a v-on:click="closeSideDrawer" class="sidebar_link" href="#"
><i class="far fa-user"></i> <span class="ml-2">Courses</span></a
>
<router-link class="sidebar_link" to="/QuizGrid"
><i class="fas fa-puzzle-piece"></i>
<span v-on:click="closeSideDrawer" class="ml-2"
>Puzzles</span
></router-link
>
</div>
Related
I have this sidebar
which should be toggled when the button on the right corner of the photo is clicked. Unfortunately it is not working now but it was worked before. I have no idea what might be the problem.
Here is the HTML output for the sidebar
<nav id="sidebar">
<div class="bg-dark h-100" id="sidebar-wrapper">
<div class="sidebar-heading bg-dark text-light fw-bold newFont2">
<i class="fa-solid fa-globe me-1"></i> domain.com
</div>
<div class="list-group list-group-flush">
<a class="list-group-item bg-sidebar px-3 py-2" href="https://example.com/company/dashboard" current-page="absolute">
<i class=" fa-solid fa-house-user text-info "></i>
<span class="align-middle">Home</span>
</a>
<a class="list-group-item bg-sidebar px-3 py-2" href="https://example.com/company/dashboard/reviews">
<i class=" fa-solid fa-star-half-stroke "></i>
<span class="align-middle">Reviews</span>
</a>
<a class="list-group-item bg-sidebar px-3 py-2" href="https://example.com/company/dashboard/invitations">
<i class=" fa-solid fa-envelope "></i>
<span class="align-middle">Invitations</span>
</a>
<a class="list-group-item bg-sidebar px-3 py-2" href="https://example.com/company/dashboard/settings">
<i class=" fa-solid fa-wrench "></i>
<span class="align-middle">Settings</span>
</a>
<div class="border-top my-3" href="#"></div>
<div class="plan-overview px-3">
<span class="text-white-50 newFont d-block">Selected plan: <span class="fw-bold text-light">Expert Plan</span>
<br>Available actions: <span class="fw-bold text-light ">646 left</span>
<br>
</span>
</div>
</div>
</div>
</nav>
And here's the button
<button class="btn navbar-toggler2" id="sidebarToggle"><i class="navbar-toggler-icon"></i></button>
I'm using Bootstrap v5.0.2. I can actually see following the scripts that are loaded on the page, that I'm using something called Simple Sidebar
/*!
* Start Bootstrap - Simple Sidebar v6.0.3 (https://startbootstrap.com/template/simple-sidebar)
* Copyright 2013-2021 Start Bootstrap
* Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-simple-sidebar/blob/master/LICENSE)
*/
window.addEventListener("DOMContentLoaded",(e=>{const t=document.body.querySelector("#sidebarToggle");t&&t.addEventListener("click",(e=>{e.preventDefault(),document.body.classList.toggle("sb-sidenav-toggled"),localStorage.setItem("sb|sidebar-toggle",document.body.classList.contains("sb-sidenav-toggled"))}))}));
First check if on click of the button, does body toggles class sb-sidenav-toggled, if it does, check your css as it works on css, the #sidebar-wrapper should get margin-left after the class toggles.
Otherwise it's js problem, not loaded/somethings stops it before it get's triggered, or some errors within ?
EDIT:
So it was just something preventing or not declared properly onclick, so declaring on click was solution:
$("#sidebarToggle").on('click', function() {$('body').toggleClass('sb-sidenav-toggled');});
js computes the structure below, i need a dropdown when the button is hovered whereas onclick should trigger the form submit.
nothing happens when i hover the button area. Is it because of is-active missing?
In Bulma's official docs about the dropdown menu, the example's indent can be confusing.
The "dropdown-menu" 'div' is a childnode of the main dropdown 'div'.
<div class="dropdown is-hoverable">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu4">
<span>Hover me</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu4" role="menu">
<div class="dropdown-content">
<div class="dropdown-item">
<p>You can insert <strong>any type of content</strong> within the dropdown menu.</p>
</div>
</div>
</div>
</div>
<ul class="col-12">
<div v-for="(todo, n) in todos">
<i class="fas fa-cart-arrow-down mr-1 ml-2"></i>
**<li class="mt-2 todo" #click="myFilter(n)"** :class="todo.isActive ? 'active' : '' ">
<!-- {{ todo.name }} -->
</li>
<li class="button-container bg-light">
**<button** class="ml-1 btn btn-primary rounded-circle btn-sm" #click="toggleHidden(n)" v-
if="todo.isHidden == true" **:disabled='false'**><i class="fas fa-pencil-alt"></i>
</button>
</li>
</div>
</ul>
I have this code and I want that, when you click on li with "myFilter (n)", in the button :disabled it changes from "false" to "true"
I have a problem with my drowpdown I can't customize selected items I tried to search how can I limit dropdown choices by I didn't found a solution.
so i have 20items to show in a dropdown ,my goals is to show just 5 items and a selected item called "showMore" that after I click into it, display me a popup contains the rest of my items for example :
mylist=[a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t]
my_showing_list_in_dropdown=[a,b,c,d,e,showMore]
<div class="btn-group">
<button type="button" class="btn btn-light dropdown-toggle dropbtn" data-toggle="dropdown" (click)="onUpdateData()">
</button>
<div class="dropdown-menu dropdown-menu-right dropdwn" >
<a
class="dropdown-item p-1 small "
*ngFor="let x of mylist" (click)="selectedItem(x,index)"
>
<span class="mr-2"
><small style="color: gray;"
>{{x}}</small></span
>
</a>
<li class="divider"></li>
<a
class="dropdown-item p-1 small "
(click)="creation()"
>
<span class="mr-2"
><small style="color: gray;"
>SHOW More</small></span
>
</a>
</div>
</div>
How can I do it?
In html A i am calling html B which contain tab as shown is the image. now the "Save " and "Save All" button is in html B i have used css to move to the top but this is not the right way to do. I need "Save" and "Save All" button in html A but for this i need to know which tab is selected.
HTML B
<div id="confi">
<div class="row">
<section widget-grid id="widget-grid">
<div class="col col-md-12">
<div ng-if="currComp" jarvis-widget id="script-widget" data-widget-color="darken" data-widget-colorbutton="false" data-widget-editbutton="false"
data-widget-deletebutton="false">
<header>
<span class="widget-icon">
<i class="fa fa-gear"></i>
</span>
<h2>Script Configuration for {{comp}}</h2>
</header>
<div class="widget-body padding-10">
<ul id="scriptTabs" class="nav nav-tabs bordered">
<li ng-repeat="s in scripts track by $index">
<a id="s{{$index}}tab" href="#s{{$index}}" data-toggle="tab">
<i class="fa fa-fw fa-lg fa-file"></i> {{s}}
<!-- <span class="badge bg-color-blue txt-color-white">6</span> -->
</a>
</li>
</ul>
<!-- style="height:400px;margin-bottom: 30px;" -->
<div id="scriptTabsContent" class="tab-content padding-10">
<div class="tab-pane active" id="s{{$index}}" ng-repeat="s in scripts track by $index">
<div style="height:753px;width: 100%;">
<div id="{{ s }}" style="height:100%;width: 100%"></div>
<div style=" position: absolute;margin-top: -910px;right: 0px;">
<button class="btn btn-sm btn-primary pull-right" style="margin-top: 20px;" ng-click="save(s)">Save</button>
<button class="btn btn-sm btn-primary pull-right" style="margin-top: 20px;margin-right: 20px;" ng-click="saveAll('all')">Save All</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
Currently i am using button in TabsContent so that i can get the value of "s" to the controller B and i cont use ng-click it is giving me error
<li ng-repeat="s in services track by $index" ng-click="functionInScope(s)">
<a id="s{{$index}}tab" href="#s{{$index}}" data-toggle="tab">
<i class="fa fa-fw fa-lg fa-file" ></i> {{s}}
</a>
</li>
please help me to get the value of "s" with out using the ng-click, so that i can send the value of "s" to the controller A for the save function.
Just a suggestion, Can't we create a variable named "selectedTab" and when you click the tab just generate a KeyUp event from that tab and in this event you can change the value this variable and while posting just get the value from that "selectedTab" variable.
For reference how to generate an click event
https://angular.io/guide/user-input