Issue with Angular 2 sidebar collapsing in Twitter Bootstrap$action

I'm a beginner with bootstrap and I'm using a sidemenu template. It's rendering fine, but when I click on an item, it's not collapsing. I'm utilizing this template (). No errors are appearing in the console.

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
   <div class="nav-side-menu">
    <div class="brand">Brand Logo</div>
    <i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-
   target="#menu-content"></i>

        <div class="menu-list">

            <ul id="menu-content" class="menu-content collapse out">
                <li>
                  <a href="#">
                  <i class="fa fa-dashboard fa-lg"></i> Dashboard
                  </a>
                </li>

                <li  data-toggle="collapse" data-target="#products" class="collapsed active">
                  <a href="#"><i class="fa fa-gift fa-lg"></i> UI Elements <span class="arrow"></span></a>
                </li>
                <ul class="sub-menu collapse" id="products">
                    <li class="active"><a href="#">CSS3 Animation</a></li>
                    <li><a href="#">General</a></li>
                    <li><a href="#">Buttons</a></li>
                    <li><a href="#">Tabs & Accordions</a></li>
                    <li><a href="#">Typography</a></li>
                    <li><a href="#">FontAwesome</a></li>
                    <li><a href="#">Slider</a></li>
                    <li><a href="#">Panels</a></li>
                    <li><a href="#">Widgets</a></li>
                    <li><a href="#">Bootstrap Model</a></li>
                </ul> 
                 <li>
                  <a href="#">
                  <i class="fa fa-user fa-lg"></i> Profile
                  </a>
                  </li>

                 <li>
                  <a href="#">
                  <i class="fa fa-users fa-lg"></i> Users
                  </a>
                </li>
            </ul>
     </div>
</div>

I have installed the beta version of bootstrap -- npm install [email protected]

javascriptcsstwitter-bootstrapangularangular-ui-bootstrap

Answer №1

.nav-side-menu {
  overflow: auto;
  font-family: verdana;
  font-size: 12px;
  font-weight: 200;
  background-color: #2e353d;
  position: fixed;
  top: 0px;
  width: 300px;
  height: 100%;
  color: #e1ffff;
}
.nav-side-menu .brand {
  background-color: #23282e;
  line-height: 50px;
  display: block;
  text-align: center;
  font-size: 14px;
}
.nav-side-menu .toggle-btn {
  display: none;
}
.nav-side-menu ul,
.nav-side-menu li {
  list-style: none;
  padding: 0px;
  margin: 0px;
  line-height: 35px;
  cursor: pointer;
    
    .collapsed{
       .arrow:before{
                 font-family: FontAwesome;
                 content: "\f053";
                 display: inline-block;
                 padding-left:10px;
                 padding-right: 10px;
                 vertical-align: middle;
                 float:right;
            }
     }

}
.nav-side-menu ul :not(collapsed) .arrow:before,
.nav-side-menu li :not(collapsed) .arrow:before {
  font-family: FontAwesome;
  content: "\f078";
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
  vertical-align: middle;
  float: right;
}
.nav-side-menu ul .active,
.nav-side-menu li .active {
  border-left: 3px solid #d19b3d;
  background-color: #4f5b69;
}
.nav-side-menu ul .sub-menu li.active,
.nav-side-menu li .sub-menu li.active {
  color: #d19b3d;
}
.nav-side-menu ul .sub-menu li.active a,
.nav-side-menu li .sub-menu li.active a {
  color: #d19b3d;
}
.nav-side-menu ul .sub-menu li,
.nav-side-menu li .sub-menu li {
  background-color: #181c20;
  border: none;
  line-height: 28px;
  border-bottom: 1px solid #23282e;
  margin-left: 0px;
}
.nav-side-menu ul .sub-menu li:hover,
.nav-side-menu li .sub-menu li:hover {
  background-color: #020203;
}
.nav-side-menu ul .sub-menu li:before,
.nav-side-menu li .sub-menu li:before {
  font-family: FontAwesome;
  content: "\f105";
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
  vertical-align: middle;
}
.nav-side-menu li {
  padding-left: 0px;
  border-left: 3px solid #2e353d;
  border-bottom: 1px solid #23282e;
}
.nav-side-menu li a {
  text-decoration: none;
  color: #e1ffff;
}
.nav-side-menu li a i {
  padding-left: 10px;
  width: 20px;
  padding-right: 20px;
}
.nav-side-menu li:hover {
  border-left: 3px solid #d19b3d;
  background-color: #4f5b69;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}
@media (max-width: 767px) {
  .nav-side-menu {
    position: relative;
    width: 100%;
    margin-bottom: 10px;
  }
  .nav-side-menu .toggle-btn {
    display: block;
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 10 !important;
    padding: 3px;
    background-color: #ffffff;
    color: #000;
    width: 40px;
    text-align: center;
  }
  .brand {
    text-align: left !important;
    font-size: 22px;
    padding-left: 20px;
    line-height: 50px !important;
  }
}
@media (min-width: 767px) {
  .nav-side-menu .menu-list .menu-content {
    display: block;
  }
}
body {
  margin: 0px;
  padding: 0px;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
<div class="nav-side-menu">
    <div class="brand">Brand Logo</div>
    <i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
  
        <div class="menu-list">
  
            <ul id="menu-content" class="menu-content collapse out">
                <li>
                  <a href="#">
                  <i class="fa fa-dashboard fa-lg"></i> Dashboard
                  </a>
                </li>

                <li  data-toggle="collapse" data-target="#products" class="collapsed active">
                  <a href="#"><i class="fa fa-gift fa-lg"></i> UI Elements <span class="arrow"></span></a>
                </li>
                <ul class="sub-menu collapse" id="products">
                    <li class="active"><a href="#">CSS3 Animation</a></li>
                    <li><a href="#">General</a></li>
                    <li><a href="#">Buttons</a></li>
                    <li><a href="#">Tabs & Accordions</a></li>
                    <li><a href="#">Typography</a></li>
                    <li><a href="#">FontAwesome</a></li>
                    <li><a href="#">Slider</a></li>
                    <li><a href="#">Panels</a></li>
                    <li><a href="#">Widgets</a></li>
                    <li><a href="#">Bootstrap Model</a></li>
                </ul>


                <li data-toggle="collapse" data-target="#service" class="collapsed">
                  <a href="#"><i class="fa fa-globe fa-lg"></i> Services <span class="arrow"></span></a>
                </li>  
                <ul class="sub-menu collapse" id="service">
                  <li>New Service 1</li>
                  <li>New Service 2</li>
                  <li>New Service 3</li>
                </ul>


                <li data-toggle="collapse" data-target="#new" class="collapsed">
                  <a href="#"><i class="fa fa-car fa-lg"></i> New <span class="arrow"></span></a>
                </li>
                <ul class="sub-menu collapse" id="new">
                  <li>New New 1</li>
                  <li>New New 2</li>
                  <li>New New 3</li>
                </ul>


                 <li>
                  <a href="#">
                  <i class="fa fa-user fa-lg"></i> Profile
                  </a>
                  </li>

                 <li>
                  <a href="#">
                  <i class="fa fa-users fa-lg"></i> Users
                  </a>
                </li>
            </ul>
     </div>
</div>

The provided code template has been utilized in this answer. You only need to insert the Bootstrap CDN for it to work properly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing JavaScript to interact with a web service

I created a JavaScript client for my web service that is hosted on my localhost at port 7788. The JavaScript client code is provided below. However, I am facing issues connecting to the web service from the client. Can anyone help me with connecting to the ...

javascripthtmlapacheweb-services

In Safari, non-ascii characters are incorrectly stored in document.cookies as trash

Below is a snippet of JavaScript code that I am working with: wdata['account'] = {"value": $(input).val(), "title": "Номер карты получения"}; var r = { "ipayway": ipw_selected, "wpayway": wpw_selected, "amount_type" ...

javascriptjsoncookiessafaricross-browser

Utilizing ng-content repeatedly

I am working on an angular 2 component called my-panel which is designed to show the supplied content using ng-content. However, I am facing an issue where I need to display the same content in an expanded modal as well, but it seems that I can only refere ...

angular

Setting a cap on the maximum page length using CSS

Running a Vue application with Vuetify, I encountered the challenge of limiting the maximum length of the page to eliminate scrolling. Ideally, I want to display multiple formatted screens with routing in full screen mode. However, if the user resizes the ...

javascripthtmlcsssassvuetify.js

Python web scraping: Extracting data from HTML tag names

Seeking help with extracting user data from a website by retrieving User IDs directly from tag names. I am utilizing python selenium and beautiful soup to extract the UID specifically from the div tag. For instance: <"div id="UID_**60CE07D6DF5C02A987E ...

javascriptpythonhtmlseleniumbeautifulsoup

What is the best way to update a Textfield in each row of a table using PHP and AJAX when a different textfield in the same row is changed

My JavaScript code adds a row with two cells to a table when a button is clicked. One cell contains a livesearch textfield, and the other cell has a quantity textfield whose value is supposed to dynamically change based on the livesearch results. I'v ...

javascriptjqueryajaxformsevent-handling

Implement dynamic changes to CSS variable values using Typescript during runtime

My angular 4 web application requires dynamic styling based on color values and image URLs received from the backend. While I have successfully set up the app to load images from the server, handling color values poses a greater challenge. The primary colo ...

cssangulartypescript

Break free/Reenter a function within another function

Is there a way to handle validation errors in multiple task functions using TypeScript or JavaScript, and escape the main function if an error occurs? I am working in a node environment. const validate = () => { // Perform validation checks... // ...

javascriptnode.jstypescript

The issue I'm facing with my CSS is that the Doctype is causing some styles to

Hey there! I've been pondering the use of !DOCTYPE html lately. I recently put together a basic webpage that looked great on most browsers except for IE. After doing some digging, it was recommended to me to use !DOCTYPE html. However, this ended up ...

htmlcssasp-classic

Guide on extracting FormData from a POST request in Node.js using Multer

I have a specific challenge where I need to store formData on a mongodb schema, using nodejs and express for the backend, along with multer as middleware. This particular formData consists of both a string and a blob. My main issue is capturing and saving ...

node.jsangularexpressmulter

Animating Vue components for a popup menu

In my Vue project, I am exploring the use of transitions to create a popup menu positioned at the bottom of the sidebar. The closed menu displays the user icon, username, and an arrow that should move downwards when closed and rotate 180 degrees when opene ...

javascriptcssvue.jscss-transitions

Angular template variables in VS Code now have the ability to automatically update their names when renamed

Here is a snippet from the controller: /* Local copies of Enumerators to use on template */ MeasurementOriginEnum: typeof MeasurementOriginEnum = MeasurementOriginEnum; And here is how it is used in the template: <button *ngIf="element.getMeasure ...

angularvisual-studio-code

limit footer scrolling restrictions

My Html page has a menu bar created in the footer area. Currently, the entire page is scrollable. How can I prevent scrolling only for the footer and restrict it to the content of the page? The code for the footer menu bar is shown below: #menu-bar { ...

htmlcss

I keep encountering a Vuex error stating ReferenceError is not defined. What is the correct way to properly set a value

I have a question regarding Vuex. How can I properly set a value for signupError in my function signUp()? I attempted using the following code snippets: commit(signupError, null) and $state.commit(signupError, null) , but I encountered an error stating "R ...

javascriptvue.jsvuejs2vuex

To enable communication between methods, you can easily add a property to a JavaScript class component

Is there a better way to communicate between methods in a class? class T extends React.Component { constructor(props) { super(props) this.a = false; } methodA { //will set 'a' in this method, maybe async. } ...

javascriptreactjsdesign-patterns

Why does Angular 15 unit test fail with "Cannot access properties of a readonly constant"?

I've encountered an issue while trying to run unit tests with Angular 15.2.10 and Karma 6.3.12, even after attempting Karma 6.4.3 without success. Strangely, the error occurs in a readonly constant rather than a variable. Interestingly, the code r ...

angulartypescriptunit-testingkarma-runner

When I navigate using state.go in my controller, the Ionic slide menu fails to appear

Hello everyone, I am currently using Ionic to develop my application and have implemented a slide menu. However, I encountered an issue where the slide menu fails to work when changing views using "$state.go". How can I resolve this? The Router : "use st ...

javascriptangularjsionic-framework

Display various divs simultaneously based on the quantity of items in the dropdown menu

In my project, there is a dynamic select list that retrieves items from the database. Users have the ability to add or delete items from this list. Below is some code related to this functionality: <div class="form-group col-md-3"> <la ...

javascripthtmljquerysynchronous

Looking out for JavaScript errors using Selenium?

Currently, I am utilizing Selenium through Python and employing the web driver with the Chrome backend. My goal is to verify that at the completion of each test there were no JavaScript exceptions thrown throughout the execution -- essentially mimicking t ...

javascriptpythonselenium

Utilize ViewBag to dynamically add classes to <li> elements for navigation, incorporating a sub level dependency in MVC architecture

I admire the layout and design of the TFS website, so I decided to challenge myself by recreating it using ASP.NET MVC. My current focus is on replicating the 2-tiered horizontal navigation bar from the TFS website. Despite my efforts, I am struggling to ...

cssasp.netasp.net-mvchtml-listsviewbag