We Keep Coding

Collapsible sidebar with Bootstrap 5 was working before but not now

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');});

MyBB Logo position does not change

So It's a theme without a responsive logo and
I've been messing around trying to fix it but with any position it doesn't change /:
I wasted days trying to fix this but still it would not work
Does anyone have any suggestions or solutions how to fix this?
Html Code :
<a name="top" id="top"></a> <br /> <br />
<div id="mainwidth">
<div id="container">
<div id="content">
<div class="menu">
<ul>
<li id="nav-portal"><i style="font-size: 12px;" class="fa fa-home fa-fw"></i> Home</li>
<li id="nav-forums"> <i style="font-size: 12px;" class="fa fa-comments fa-fw"></i> Forums</li>
<li id="nav-search"> <i style="font-size: 12px;" class="fa fa-search fa-fw"></i> {$lang->toplinks_search}</li>
<li id="nav-member"> <i style="font-size: 12px;" class="fa fa-users fa-fw"></i> Members</li>
<li id="nav-instructions"><img src="img/new-icon.jpg" style="width: 20px;position:center;cursor:pointer;"> <i style="font-size: 12px;" class="fa fa-question-circle fa-fw"></i> Forum Instructions</li>
<li id="nav-calendar"> <i style="font-size: 12px;" class="fa fa-calendar fa-fw"></i> {$lang->toplinks_calendar}</li>
<li id="nav-help"> <i style="font-size: 12px;" class="fa fa-info fa-fw"></i> {$lang->toplinks_help}</li>
<li><i style="font-size: 14px;" class="fa fa-angle-down fa-fw"></i>More</li>
<ul>
</div>
<div id="extraslink_popup" class="popup_menu" style="display: none;">
<div class="popup_item_container">
Logout
</div>
<div class="popup_item_container">
Show team
</div>
<div class="popup_item_container">
{$lang->welcome_newposts}
</div>
<div class="popup_item_container">
{$lang->welcome_todaysposts}
</div>
<div class="popup_item_container">
Link five here
</div>
</div>
<div class="topbar">
<table width="100%" cellspacing="0" cellpadding="{$theme['tablespace']}" border="0">
<tr>
<td valign="top">
<!--- LOGOO CODE STARTS HERE -->
<div class="logo-b">
<img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" />
</div>
<!--- LOGOO CODE ENDS HERE -->
</td>
<td> </td>
<td valign="bottom">
<div style="margin-top: 120px;"><div class="userbg">{$welcomeblock}</div></div>
</td>
</tr>
</table>
</div>
<br />
<div class="wrapper">
{$pm_notice}
{$bannedwarning}
{$bbclosedwarning}
{$unreadreports}
{$pending_joinrequests}
{$awaitingusers}
<navigation>
<br />
<script type="text/javascript">
// <!--
if(use_xmlhttprequest == "1")
{
$("#extraslink").popupMenu();
}
// -->
</script>
And the CSS code :
#logo {
padding: 10px 0;
margin-top: 40px;
text-align: center;
max-width: 150px;
}
I've messed around alot with the CSS code but heres the original one

First of all, you didn't add an element with logo id, add it in html and change it in css. If the problem is still not resolved, check if you have added your css file to html. If the problem still persists, add display: block property to your logo in css and give margin

How to modify arrows in bootstrap accordion?

I wrote some JavaScript and tried to replace the class whenever the aria-expanded element is true or false but nothing seems to be happening
The first card is open when the page loads because the aria-expanded ="true".
I want to find a way to replace the class in whenever the value of the aria-expanded element is changed. I'm new to jQuery and webdev so all of your help is appreciated.
Edit-I used bootstrap accordion to make sure only one can be open at a time
<div id="headingOne">
<h5 class="card-title">
Or Files
<a data-toggle="collapse" class="float-right" href="#collapseFiles"
role="button" aria-expanded="true" data-target="#collapseFiles"
aria-controls="collapseNotes">
<i class="fas fa-angle-up></i>
</a>
</h5>
</div>
<div id="headingTwo">
<h5 class="card-title">
Or Notes
<a data-toggle="collapse" class="float-right" href="#collapseNotes" role="button" aria-expanded="false" data-target="#collapseNotes" aria-controls="collapseNotes">
<i class="fas fa-angle-down"></i>
</a>
</h5>
</div>
<div id="headingThree">
<h5 class="card-title">
Or Names
<a data-toggle="collapse" class="float-right" href="#collapseNames" role="button" aria-expanded="false" data-target="#collapseNames" aria-controls="collapseNotes">
<i class="fas fa-angle-down"></i>
</a>
</h5>
</div>
and this is the jquery.
if ($('a').attr('aria-expanded').val() == 'true') {
$("a i").attr("class", "fa-angle-down");
} else {
$("a i").attr("class", "fa-angle-up");
}

I know you might want to do it using JavaScript, but I have a pure CSS way to do it:
HTML
I removed all unnecessary attributes on the anchor tag. I also removed fa-angle-down on the icon. The icon state will be set via CSS.
<div id="headingOne">
<h5 class="card-title">
Or Files
<a data-toggle="collapse" class="float-right" data-target="#collapseFiles">
<i class="fas"></i>
</a>
</h5>
<div class="card-body">
<p id="collapseFiles" class="card-text collapse show">
Some quick example text to build on the card title and make up the bulk of
the card's content.
</p>
</div>
</div>
<div id="headingTwo">
<h5 class="card-title">
Or Notes
<a data-toggle="collapse" class="float-right" data-target="#collapseNotes">
<i class="fas"></i>
</a>
</h5>
<div class="card-body">
<p id="collapseNotes" class="card-text collapse show">
Some quick example text to build on the card title and make up the bulk of
the card's content.
</p>
</div>
</div>
<div id="headingThree">
<h5 class="card-title">
Or Name
<a data-toggle="collapse" class="float-right" data-target="#collapseNames">
<i class="fas"></i>
</a>
</h5>
<div class="card-body">
<p id="collapseNames" class="card-text collapse show">
Some quick example text to build on the card title and make up the bulk of
the card's content.
</p>
</div>
</div>
CSS
You can write CSS to target any anchor tag that has data-toggle="collapse" attribute. When it collapses, Bootstraps adds .collapsed class so that you can use it to style the icon accordingly.
a[data-toggle="collapse"] i.fas:before {
content: "\f107"; /* angle-down */
}
a[data-toggle="collapse"].collapsed i.fas:before {
content: "\f106"; /* angle-up */
}
Screenshots
Fiddle Demo
https://jsfiddle.net/davidliang2008/og1t8ksj/26/

You need to use events to catch a change, for example
https://api.jquery.com/on/

Try this:-
$('[data-toggle="collapse"]').on('click', function(){
if ($(this).attr('aria-expanded') == 'true') {
$(this).find('i').addClass('fa-angle-up').removeClass('fa-angle-down');
} else {
$(this).find('i').addClass('fa-angle-down').removeClass('fa-angle-up');
}
});
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel='stylesheet'>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div id="headingTwo">
<h5 class="card-title">
Or Notes
<a data-toggle="collapse" class="float-right" href="#collapseNotes" role="button" aria-expanded="false" data-target="#collapseNotes" aria-controls="collapseNotes">
<i class="fa fa-angle-up"></i>
</a>
</h5>
</div>
<div class="collapse" id="collapseNotes">
Anim pariatur cliche reprehenderit
</div>

It's been a while, but I think this is probably a good answer to this question:
NO NEED TO USE JAVASCRIPT for this. Take advantage of the class 'collapsed' which is added to the wrapping 'a' when the accordion is collapsed.
<a data-toggle="collapse" class="float-right" href="#collapseFiles"
role="button" aria-expanded="true" data-target="#collapseFiles"
aria-controls="collapseNotes">
<span class="arrowup"> <i class="fas fa-angle-up></i> </span>
<span class="arrowdown"> <i class="fas fa-angle-dowm></i> </span>
</a>
then on your stylesheet:
.accordion .arrowdown {
display: none
}
----------
.accordion .collapsed .arrowup {
display: none
}
---------
.accordion .collapsed .arrowdown{
display: block
}

Vue recursive component causing Bootstrap's collapse to jump

I have a Vue.js project and I am using Bootstrap's collapse on a recursive component. The collapse works ok but it is jumpy and not smooth, it was suggested online that padding could be the issue, but I removed all styling and the problem still persists.
Edit: I have found out that the problem is being caused by the amount of children in the recursion. If there is 1 child, the animation is still smooth, but if there is more than 1 child, then it will jump over all of the children past the first one.
What is the best way of handling this?
Demo: http://grabilla.com/0a50a-342e7df2-bad8-4c57-9c10-92aad292396f.html
.media-buttons {
margin-top: 5px;
margin-bottom: 20px;
}
.media-comment {
font-size: 15px;
}
.media-heading{
margin-bottom: 5px;
}
<template>
<div class="media">
<img class="mr-3 comments-img" src="http://placekitten.com/100/100" alt="Generic placeholder image">
<div class="media-body">
<h6 class="media-heading">{{firstName + " " + lastName}}<small><i> {{GetDateFromNow(dateTime)}}</i></small></h6>
<div class="media-comment">{{ commentBody }}</div>
<div class="media-buttons">
<i class="far fa-thumbs-up"></i> 32
<i class="fas fa-reply"></i> Reply
<i class="fas fa-trash-alt"></i> Delete
<i :id="`replies-chevron-${mainId}`" class="fas fa-chevron-circle-down rotate"></i> See Replies
</div>
<div :id="`children-${mainId}`" class="row collapse">
<div>
<div>
<tree-comments v-if="children.length && !maxDepthReached"
v-for="child in children"
:id="child.id"
:main-id="mainId"
:req-id="reqId"
:req-index="reqIndex"
:parent-id="child.parentId"
:comment-index="commentIndex"
:user-id="child.userId"
:current-user="child.currentUser"
:first-name="child.firstName"
:last-name="child.lastName"
:date-time="child.dateTime"
:children="child.children || []"
:comment-body="child.commentBody"
:depth="depth + 1" />
</div>
</div>
<hr v-if="parentId == null" />
</div>
</div>
</div>
</template>

unexpected closing tag angular error

Writing an angular app in bulma, copied the template directly from the template site for testing and I get this error. I have checked and checked and everything is closed properly, yet somehow I keep getting an unclosed nav error. Oddly enough when I delete the closing nav tag, the site compiles correctly, but is broken. I have no idea what to do.
Code
<section class="hero is-info is-fullheight">
<div class="hero-head">
<nav class="navbar">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item" href="../">
<img src="http://bulma.io/images/bulma-type-white.png" alt="Logo">
</a>
<span class="navbar-burger burger" data-target="navbarMenu">
<span></span>
<span></span>
<span></span>
</span>
</div>
<div id="navbarMenu" class="navbar-menu">
<div class="navbar-end">
<span class="navbar-item">
<a class="button is-white is-outlined" href="#">
<span class="icon">
<i class="fa fa-home"></i>
</span>
<span>Home</span>
</a>
</span>
<span class="navbar-item">
<a class="button is-white is-outlined" href="#">
<span class="icon">
<i class="fa fa-superpowers"></i>
</span>
<span>Examples</span>
</a>
</span>
<span class="navbar-item">
<a class="button is-white is-outlined" href="#">
<span class="icon">
<i class="fa fa-book"></i>
</span>
<span>Documentation</span>
</a>
</span>
<span class="navbar-item">
<a class="button is-white is-outlined" href="https://github.com/dansup/bulma-templates/blob/master/templates/landing.html">
<span class="icon">
<i class="fa fa-github"></i>
</span>
<span>View Source</span>
</a>
</span>
</div>
</div>
</nav>
</div>
<div class="hero-body">
<div class="container has-text-centered">
<div class="column is-6 is-offset-3">
<h1 class="title">
Coming Soon
</h1>
<h2 class="subtitle">
$this is the best software platform for running an internet business. We handle billions of dollars every year for forward-thinking businesses around the world.
</h2>
<div class="box">
<div class="field is-grouped">
<p class="control is-expanded">
<input class="input" type="text" placeholder="Enter your email">
</p>
<p class="control">
<a class="button is-info">
Notify Me
</a>
</p>
</div>
</div>
</div>
</div>
</div>
Error
`compiler.js:486 Uncaught Error: Template parse errors:
Unexpected closing tag "nav". It may happen when the tag has already
been closed by another tag. For more info see
https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-
implied-end-tags ("
</div>
</div>
[ERROR ->]</nav>
</div>`

in my case I was forgetting a detail in the tag
<button class="btn btn-primary" (click) "handleClickMe()
">Click me !</button>
I forgot to put the "=" in (click)="handleClickMe()

Usually if you see an "Unexpected closing tag <something>" the problem isn't actually with that <something> but rather with an adjacent element that hasn't been properly closed. Paste stuff here: https://validator.w3.org or any similar HTML validator service, or use a better editor/IDE that offers syntax highlighting to help you find these errors.
You are missing a closing </div> tag.
You close navbar-brand, navbar-menu and navbar-end but you do not close <div class='container'>
As this missing </div> tag ought to be directly before </nav>, you get the error telling you, in fact, exactly where you ought to look. "I found a </nav> I wasn't expecting to see!" ... Ok, so go look at wherever you have a </nav> and figure out what element nearby is missing or has typos, etc.

Adding for future reference, for Angular
I've also seen this where you have invalid html like this
<p>
<div>
</div>
</p>
Change the p to a div and it'll work