Home > Software design >  Collapsible navbar doesn't minimize after refresh
Collapsible navbar doesn't minimize after refresh

Time：10-26

I have the following issue with the following code. I have tried to implement a collapsible sidebar menu in my development. I have researched many resources online and I tried to customize it for for myself after following along a Youtube tutorial. However, the collapsing functionally seems to work except at the the time of refreshing the page. I have researched other Stackoverflow solutions (i.e session storage) but I couldn't be able to implement it in my case. Can somebody please help?

Here is my HTML page

        let arrow = document.querySelectorAll(".arrow");
        
        for (var i = 0; i < arrow.length; i  ) {
            arrow[i].addEventListener("click", (e)=>{
                
            let arrowParent = e.target.parentElement.parentElement;
            arrowParent.classList.toggle("showMenu");



            })
        }

        let sidebar = document.querySelector(".sidebar");
        let sidebarBtn = document.querySelector(".bx-menu");
        sidebarBtn.addEventListener("click" , ()=>{
            sidebar.classList.toggle("close");
        });

    
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* fonts */
@import url('https://fonts.googleapis.com/css2?family=Cabin&family=Roboto Condensed:wght@400;700&display=swap');

html {
  font-size: 100%;
} /*16px*/

:root {
  /* colors */
  --primary-50: #e0fcff;
  --primary-100: #bef8fd;
  --primary-200: #87eaf2;
  --primary-300: #54d1db;
  --primary-400: #38bec9;
  --primary-500: #2cb1bc;
  --primary-600: #14919b;
  --primary-700: #0e7c86;
  --primary-800: #0a6c74;
  --primary-900: #044e54;

  /* grey */
  --grey-50: #f0f4f8;
  --grey-100: #d9e2ec;
  --grey-200: #bcccdc;
  --grey-300: #9fb3c8;
  --grey-400: #829ab1;
  --grey-500: #627d98;
  --grey-600: #486581;
  --grey-700: #334e68;
  --grey-800: #243b53;
  --grey-900: #102a43;
  /* rest of the colors */
  --black: #222;
  --white: #fff;
  --blue: #2336e2;
  --red-light: #f8d7da;
  --red-dark: #842029;
  --green-light: #d1e7dd;
  --green-dark: #0f5132;

  /* fonts  */
  --headingFont: 'Roboto Condensed', Sans-Serif;
  --bodyFont: 'Cabin', Sans-Serif;
  --small-text: 0.875rem;
  --extra-small-text: 0.7em;
  /* rest of the vars */
  --backgroundColor: var(--grey-50);
  --textColor: var(--grey-900);
  --borderRadius: 0.25rem;
  --letterSpacing: 1px;
  --transition: 0.3s ease-in-out all;
  --max-width: 1120px;
  --fixed-width: 500px;
  --fluid-width: 90vw;
  --breakpoint-lg: 992px;
  --nav-height: 6rem;
  /* box shadow*/
  --shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

body {
  background: var(--backgroundColor);
  font-family: var(--bodyFont);
  font-weight: 400;
  line-height: 1.75;
  color: var(--textColor);
}

p {
  margin-bottom: 1.5rem;
  max-width: 40em;
}

h1,
h2,
h3,
h4,
h5 {
  margin: 0;
  margin-bottom: 1.38rem;
  font-family: var(--headingFont);
  font-weight: 400;
  line-height: 1.3;
  text-transform: capitalize;
  letter-spacing: var(--letterSpacing);
}

h1 {
  margin-top: 0;
  font-size: 3.052rem;
}

h2 {
  font-size: 2.441rem;
}

h3 {
  font-size: 1.953rem;
}

h4 {
  font-size: 1.563rem;
}

h5 {
  font-size: 1.25rem;
}

small,
.text-small {
  font-size: var(--small-text);
}

a {
  text-decoration: none;
  letter-spacing: var(--letterSpacing);
}
a,
button {
  line-height: 1.15;
}
button:disabled {
  cursor: not-allowed;
}
ul {
  list-style-type: none;
  padding: 0;
}

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    background: var(--white);
    height: 100%;
    width: 260px;
    z-index: 100;
    transition: var(--transition);
}

.sidebar.close {
    width: 78px;
}



.logo-details {
    width: 100px;
    height: 60px;
    display: flex;
    align-items: center;
}

.logo-details span:first-child {
    font-size: 30px;
    /* color:  #94EB58; */
    color: var(--primary-600);
    height: 50px;
    min-width: 78px;
    text-align: left;
    line-height: 50px;
}

.logo_name img {
    width: 140px;
    height: 100px;
    margin-top: 8px;
    transition: 0.3s ease;
    transition-delay: 0.1s;
}

.logo_name {
    transition-delay: 0s;
    opacity: 0;
    pointer-events: none;
}


.nav-links {
    height: 100%;
    padding-top: 30px 0 150px 0;
    overflow: auto;
}

.nav-links {
    overflow: visible;

}

.nav-links::-webkit-scrollbar{
    display: none;
}

.nav-links li {
    position: relative;
    transition: var(--transition);
}

.nav-links li:hover {
    background: var(--green-light);
}

.nav-links li span {
    height: 50px;
    min-width: 78px;
    text-align: center;
    line-height: 50px;
    color: var(--primary-500);
    font-size: 23px;
    cursor: pointer;
    transition: var(--transition);
}

.nav-links li.showMenu span.arrow {
    transform: rotate(-180deg);
}

.sidebar.close .nav-links span.arrow {
    display: none;
}

.link_name {
    font-size: 18px;
    font-weight: 400;
    color: var(--grey-700);
    transition: var(--transition);
}

.sidebar.close .nav-links li a .link_name{
    opacity: 0;
    pointer-events: none;
  }

.nav-links li a {
    display: flex;
    align-items: center;
}

.icon-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sidebar .nav-links li .sub-menu {
    padding: 6px 6px 14px 80px;
    margin-top: -10px;
    background: var(--green-light);
    display: none;
}

.sidebar .nav-links li.showMenu .sub-menu{
    display: block;
}

.sidebar .nav-links li .sub-menu a {
    color: var(--primary-900);
    font-size: 15px;
    padding: 5px 0;
    white-space: nowrap;
    opacity: 0.6;
    transition: var(--transition);
}

.sidebar .nav-links li .sub-menu a:hover {
    opacity: 1;
}


.sidebar.close .nav-links li .sub-menu {
    position: absolute;
    left: 100%;
    top: -10px;
    margin-top: 0;
    padding: 10px 20px;
    border-radius: 0 6px 6px 0;
    opacity: 0;
    display: block;
    pointer-events: none;
    transition: 0s;
}

.sidebar.close .nav-links li:hover .sub-menu {
    top: 0;
    opacity: 1;
    pointer-events: auto;
    transition: var(--transition);
}


.sidebar .nav-links li .sub-menu.link_name {
    display: none;

}

.sidebar.close .nav-links li .sub-menu.link_name {
    display: none;

}

.sidebar.close .nav-links li .sub-menu .link_name {
    font-size: 18px;
    opacity: 1;
    display: block;
}

.sidebar .nav-links li .sub-menu.blank {
    opacity: 1;
    pointer-events: auto;
    padding: 3px 20px 6px 16px;
    opacity: 0;
    pointer-events: none;
}

.sidebar .nav-links li:hover .sub-menu.blank {
    top: 50%;
    transform: translateY(-50%);
}
.sidebar .profile-details {
    position: fixed;
    bottom: 0;
    width: 260px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--green-light);
    padding: 12px 0;
    transition: var(--transition);
}

.sidebar.close .profile-details{
    background: none;
  }

.sidebar.close .profile-details{
    width: 78px;
}

.profile-content {
    display: flex;
    align-items: center;
}

.sidebar .profile-details img {
    height: 52px;
    width: 52px;
    object-fit: cover;
    border-radius: 16px;
    margin: 0 14px 0 12px;
    background: var(--white);
    transition: var(--transition);
}

.sidebar.close .profile-details img{
    padding: 10px;
  }

.profile_name, .job {
    color: var(--grey-700);
    font-size: 18px;
    font-weight: 500;
    white-space: nowrap;
}

.sidebar.close .profile-details i,
.sidebar.close .profile-details .profile_name,
.sidebar.close .profile-details .job{
  display: none;
}

.job {
    font-size: 12px;

}


.home-section {
    position: relative;
    background: var(--backgroundColor);
    height: 100vh;
    left: 260px;
    width: calc(100%-260px);
    transition: var(--transition);
    
}

.sidebar.close ~ .home-section {
    left: 78px;
    width: calc(100% -78px);
}

.home-content {
    height: 60px;
    display: flex;
    align-items: center;
}

.home-content span:first-child,
.text {
    color: var(--grey-700);
    font-size: 35px;
}

.home-content span:first-child {
    margin: 0 15px;
    cursor: pointer;
}

.home-section .home-content .text{
    font-size: 26px;
    font-weight: 600;
}
@media (max-width: 400px) {
    .sidebar.close .nav-links li .sub-menu{
        display: none;
    }
    .sidebar{
        width: 78px;
    }
    .sidebar.close{
        width: 0;
    }
    .home-section{
        left: 78px;
        width: calc(100% - 78px);
        z-index: 100;
    }
    .sidebar.close ~ .home-section{
        width: 100%;
        left: 0;
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="admindashcss.css">
    <link href="https://fonts.googleapis.com/icon?family=Material Icons Sharp" rel="stylesheet">
    <title>Admin Dashboard</title>
</head>
<body>
    <div >
        <div >
            <span >radio_button_checked</span>
            <span ><img src="images/logowhite.svg" alt=""></span>   
        </div>
        <ul >
            <li>
                <a href="#">
                    <span >grid_view</span>
                      <span >Dashboard</span>
                </a>
                <!-- <ul >
                    <li><a  href="#">Category</a></li>
                </ul> -->
            </li>
            <li>
                <div >
                    <a href="#">
                        <span >contact_page</span>
                          <span >Contacts</span>
                    </a>
                    <span >expand_more</span>
                </div>
                <ul >
                    <li><a  href="#">Category</a></li>
                    <li><a href="#">Customer</a></li>
                    <li><a href="#">Resources</a></li>
                </ul>
            </li>
            <li>
                <div >
                    <a href="#">
                        <span >task</span>
                          <span >Projects</span>
                    </a>
                    <span >expand_more</span>
                </div>
                <ul >
                    <li><a  href="#">Projects</a></li>
                    <li><a href="#">Project details</a></li>
                    <li><a href="#">Job</a></li>
                </ul>
            </li>
            <li>
                <div >
                    <a href="#">
                        <span >payments</span>
                          <span >Invoices</span>
                    </a>
                    <span >expand_more</span>
                </div>
                <ul >
                    <li><a  href="#">Invoices</a></li>
                    <li><a href="#">Recivables</a></li>
                    <li><a href="#">Paybles</a></li>
                </ul>
            </li>
            <li>
                <div >
                    <a href="#">
                        <span >query_stats</span>
                          <span >Queries</span>
                    </a>
                    <span >expand_more</span>
                </div>
                <ul >
                    <li><a  href="#">Categories</a></li>
                    <li><a href="#">Recivables</a></li>
                    <li><a href="#">Payables</a></li>
                    <li><a href="#">Gross Profit</a></li>
                    <li><a href="#">Gross Profit Summary</a></li>
                </ul>
            </li>
            <li>
                <div >
                    <a href="#">
                        <span >admin_panel_settings</span>
                          <span >Admin</span>
                    </a>
                    <span >expand_more</span>
                </div>
                <ul >
                    <li><a  href="#">Categories</a></li>
                    <li><a href="#">Settings</a></li>
                    <li><a href="#">Users</a></li>
                    <li><a href="#">Documents</a></li>
                </ul>
            </li>
        <li>
            <div >
                <div >
                    <img src="images/messi.jpg" alt="profile">
                </div>
                    <div >
                        <div >Brook Beyene</div>
                        <div >Project Manager</div>
                    </div>
                    <span >logout</span>
            </div>
        </li>       
    </ul>
    </div>
    <section >
        <div >
            <span >menu</span>
            <span >Drop Down Sidebar</span>
        </div>
    </section>
   
</body>
</html>

:

CodePudding user response：

All you nedd is to add close to class list in following line:

<div >

Also if you need to keep last state of navbar, you can stor it in local storage and append it by js on load.

        let arrow = document.querySelectorAll(".arrow");
        
        for (var i = 0; i < arrow.length; i  ) {
            arrow[i].addEventListener("click", (e)=>{
                
            let arrowParent = e.target.parentElement.parentElement;
            arrowParent.classList.toggle("showMenu");



            })
        }

        let sidebar = document.querySelector(".sidebar");
        let sidebarBtn = document.querySelector(".bx-menu");
        sidebarBtn.addEventListener("click" , ()=>{
            sidebar.classList.toggle("close");
        });

    
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* fonts */
@import url('https://fonts.googleapis.com/css2?family=Cabin&family=Roboto Condensed:wght@400;700&display=swap');

html {
  font-size: 100%;
} /*16px*/

:root {
  /* colors */
  --primary-50: #e0fcff;
  --primary-100: #bef8fd;
  --primary-200: #87eaf2;
  --primary-300: #54d1db;
  --primary-400: #38bec9;
  --primary-500: #2cb1bc;
  --primary-600: #14919b;
  --primary-700: #0e7c86;
  --primary-800: #0a6c74;
  --primary-900: #044e54;

  /* grey */
  --grey-50: #f0f4f8;
  --grey-100: #d9e2ec;
  --grey-200: #bcccdc;
  --grey-300: #9fb3c8;
  --grey-400: #829ab1;
  --grey-500: #627d98;
  --grey-600: #486581;
  --grey-700: #334e68;
  --grey-800: #243b53;
  --grey-900: #102a43;
  /* rest of the colors */
  --black: #222;
  --white: #fff;
  --blue: #2336e2;
  --red-light: #f8d7da;
  --red-dark: #842029;
  --green-light: #d1e7dd;
  --green-dark: #0f5132;

  /* fonts  */
  --headingFont: 'Roboto Condensed', Sans-Serif;
  --bodyFont: 'Cabin', Sans-Serif;
  --small-text: 0.875rem;
  --extra-small-text: 0.7em;
  /* rest of the vars */
  --backgroundColor: var(--grey-50);
  --textColor: var(--grey-900);
  --borderRadius: 0.25rem;
  --letterSpacing: 1px;
  --transition: 0.3s ease-in-out all;
  --max-width: 1120px;
  --fixed-width: 500px;
  --fluid-width: 90vw;
  --breakpoint-lg: 992px;
  --nav-height: 6rem;
  /* box shadow*/
  --shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

body {
  background: var(--backgroundColor);
  font-family: var(--bodyFont);
  font-weight: 400;
  line-height: 1.75;
  color: var(--textColor);
}

p {
  margin-bottom: 1.5rem;
  max-width: 40em;
}

h1,
h2,
h3,
h4,
h5 {
  margin: 0;
  margin-bottom: 1.38rem;
  font-family: var(--headingFont);
  font-weight: 400;
  line-height: 1.3;
  text-transform: capitalize;
  letter-spacing: var(--letterSpacing);
}

h1 {
  margin-top: 0;
  font-size: 3.052rem;
}

h2 {
  font-size: 2.441rem;
}

h3 {
  font-size: 1.953rem;
}

h4 {
  font-size: 1.563rem;
}

h5 {
  font-size: 1.25rem;
}

small,
.text-small {
  font-size: var(--small-text);
}

a {
  text-decoration: none;
  letter-spacing: var(--letterSpacing);
}
a,
button {
  line-height: 1.15;
}
button:disabled {
  cursor: not-allowed;
}
ul {
  list-style-type: none;
  padding: 0;
}

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    background: var(--white);
    height: 100%;
    width: 260px;
    z-index: 100;
    transition: var(--transition);
}

.sidebar.close {
    width: 78px;
}



.logo-details {
    width: 100px;
    height: 60px;
    display: flex;
    align-items: center;
}

.logo-details span:first-child {
    font-size: 30px;
    /* color:  #94EB58; */
    color: var(--primary-600);
    height: 50px;
    min-width: 78px;
    text-align: left;
    line-height: 50px;
}

.logo_name img {
    width: 140px;
    height: 100px;
    margin-top: 8px;
    transition: 0.3s ease;
    transition-delay: 0.1s;
}

.logo_name {
    transition-delay: 0s;
    opacity: 0;
    pointer-events: none;
}


.nav-links {
    height: 100%;
    padding-top: 30px 0 150px 0;
    overflow: auto;
}

.nav-links {
    overflow: visible;

}

.nav-links::-webkit-scrollbar{
    display: none;
}

.nav-links li {
    position: relative;
    transition: var(--transition);
}

.nav-links li:hover {
    background: var(--green-light);
}

.nav-links li span {
    height: 50px;
    min-width: 78px;
    text-align: center;
    line-height: 50px;
    color: var(--primary-500);
    font-size: 23px;
    cursor: pointer;
    transition: var(--transition);
}

.nav-links li.showMenu span.arrow {
    transform: rotate(-180deg);
}

.sidebar.close .nav-links span.arrow {
    display: none;
}

.link_name {
    font-size: 18px;
    font-weight: 400;
    color: var(--grey-700);
    transition: var(--transition);
}

.sidebar.close .nav-links li a .link_name{
    opacity: 0;
    pointer-events: none;
  }

.nav-links li a {
    display: flex;
    align-items: center;
}

.icon-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sidebar .nav-links li .sub-menu {
    padding: 6px 6px 14px 80px;
    margin-top: -10px;
    background: var(--green-light);
    display: none;
}

.sidebar .nav-links li.showMenu .sub-menu{
    display: block;
}

.sidebar .nav-links li .sub-menu a {
    color: var(--primary-900);
    font-size: 15px;
    padding: 5px 0;
    white-space: nowrap;
    opacity: 0.6;
    transition: var(--transition);
}

.sidebar .nav-links li .sub-menu a:hover {
    opacity: 1;
}


.sidebar.close .nav-links li .sub-menu {
    position: absolute;
    left: 100%;
    top: -10px;
    margin-top: 0;
    padding: 10px 20px;
    border-radius: 0 6px 6px 0;
    opacity: 0;
    display: block;
    pointer-events: none;
    transition: 0s;
}

.sidebar.close .nav-links li:hover .sub-menu {
    top: 0;
    opacity: 1;
    pointer-events: auto;
    transition: var(--transition);
}


.sidebar .nav-links li .sub-menu.link_name {
    display: none;

}

.sidebar.close .nav-links li .sub-menu.link_name {
    display: none;

}

.sidebar.close .nav-links li .sub-menu .link_name {
    font-size: 18px;
    opacity: 1;
    display: block;
}

.sidebar .nav-links li .sub-menu.blank {
    opacity: 1;
    pointer-events: auto;
    padding: 3px 20px 6px 16px;
    opacity: 0;
    pointer-events: none;
}

.sidebar .nav-links li:hover .sub-menu.blank {
    top: 50%;
    transform: translateY(-50%);
}
.sidebar .profile-details {
    position: fixed;
    bottom: 0;
    width: 260px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--green-light);
    padding: 12px 0;
    transition: var(--transition);
}

.sidebar.close .profile-details{
    background: none;
  }

.sidebar.close .profile-details{
    width: 78px;
}

.profile-content {
    display: flex;
    align-items: center;
}

.sidebar .profile-details img {
    height: 52px;
    width: 52px;
    object-fit: cover;
    border-radius: 16px;
    margin: 0 14px 0 12px;
    background: var(--white);
    transition: var(--transition);
}

.sidebar.close .profile-details img{
    padding: 10px;
  }

.profile_name, .job {
    color: var(--grey-700);
    font-size: 18px;
    font-weight: 500;
    white-space: nowrap;
}

.sidebar.close .profile-details i,
.sidebar.close .profile-details .profile_name,
.sidebar.close .profile-details .job{
  display: none;
}

.job {
    font-size: 12px;

}


.home-section {
    position: relative;
    background: var(--backgroundColor);
    height: 100vh;
    left: 260px;
    width: calc(100%-260px);
    transition: var(--transition);
    
}

.sidebar.close ~ .home-section {
    left: 78px;
    width: calc(100% -78px);
}

.home-content {
    height: 60px;
    display: flex;
    align-items: center;
}

.home-content span:first-child,
.text {
    color: var(--grey-700);
    font-size: 35px;
}

.home-content span:first-child {
    margin: 0 15px;
    cursor: pointer;
}

.home-section .home-content .text{
    font-size: 26px;
    font-weight: 600;
}
@media (max-width: 400px) {
    .sidebar.close .nav-links li .sub-menu{
        display: none;
    }
    .sidebar{
        width: 78px;
    }
    .sidebar.close{
        width: 0;
    }
    .home-section{
        left: 78px;
        width: calc(100% - 78px);
        z-index: 100;
    }
    .sidebar.close ~ .home-section{
        width: 100%;
        left: 0;
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="admindashcss.css">
    <link href="https://fonts.googleapis.com/icon?family=Material Icons Sharp" rel="stylesheet">
    <title>Admin Dashboard</title>
</head>
<body>
    <div >
        <div >
            <span >radio_button_checked</span>
            <span ><img src="images/logowhite.svg" alt=""></span>   
        </div>
        <ul >
            <li>
                <a href="#">
                    <span >grid_view</span>
                      <span >Dashboard</span>
                </a>
                <!-- <ul >
                    <li><a  href="#">Category</a></li>
                </ul> -->
            </li>
            <li>
                <div >
                    <a href="#">
                        <span >contact_page</span>
                          <span >Contacts</span>
                    </a>
                    <span >expand_more</span>
                </div>
                <ul >
                    <li><a  href="#">Category</a></li>
                    <li><a href="#">Customer</a></li>
                    <li><a href="#">Resources</a></li>
                </ul>
            </li>
            <li>
                <div >
                    <a href="#">
                        <span >task</span>
                          <span >Projects</span>
                    </a>
                    <span >expand_more</span>
                </div>
                <ul >
                    <li><a  href="#">Projects</a></li>
                    <li><a href="#">Project details</a></li>
                    <li><a href="#">Job</a></li>
                </ul>
            </li>
            <li>
                <div >
                    <a href="#">
                        <span >payments</span>
                          <span >Invoices</span>
                    </a>
                    <span >expand_more</span>
                </div>
                <ul >
                    <li><a  href="#">Invoices</a></li>
                    <li><a href="#">Recivables</a></li>
                    <li><a href="#">Paybles</a></li>
                </ul>
            </li>
            <li>
                <div >
                    <a href="#">
                        <span >query_stats</span>
                          <span >Queries</span>
                    </a>
                    <span >expand_more</span>
                </div>
                <ul >
                    <li><a  href="#">Categories</a></li>
                    <li><a href="#">Recivables</a></li>
                    <li><a href="#">Payables</a></li>
                    <li><a href="#">Gross Profit</a></li>
                    <li><a href="#">Gross Profit Summary</a></li>
                </ul>
            </li>
            <li>
                <div >
                    <a href="#">
                        <span >admin_panel_settings</span>
                          <span >Admin</span>
                    </a>
                    <span >expand_more</span>
                </div>
                <ul >
                    <li><a  href="#">Categories</a></li>
                    <li><a href="#">Settings</a></li>
                    <li><a href="#">Users</a></li>
                    <li><a href="#">Documents</a></li>
                </ul>
            </li>
        <li>
            <div >
                <div >
                    <img src="images/messi.jpg" alt="profile">
                </div>
                    <div >
                        <div >Brook Beyene</div>
                        <div >Project Manager</div>
                    </div>
                    <span >logout</span>
            </div>
        </li>       
    </ul>
    </div>
    <section >
        <div >
            <span >menu</span>
            <span >Drop Down Sidebar</span>
        </div>
    </section>
   
</body>
</html>

CodePudding user response：

My suggestion is to use a cookie to store and read the value on change. It will keep the data persistant on reload that way.

Page link：https//www.codepudding.com/Softwaredesign/588747.html

Prev:How do you extend a class with hardcoded properties and no constructor arguments in JavaScript?
Next:I want to use for loop in async function with "thens" in javascript
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding