diff --git a/src/kapidox/data/htmlresource/css/kapidox.css b/src/kapidox/data/htmlresource/css/kapidox.css
deleted file mode 100644
--- a/src/kapidox/data/htmlresource/css/kapidox.css
+++ /dev/null
@@ -1,816 +0,0 @@
-/**
- *
- * Colors:
- *  bg-primary: #0057ae
- *  fg-primary: #ffffff
- */
-
-/**
- * Global
- */
-:root {
-    --base: white;
-    --on-base: black;
-    --plasma-blue: #54a3d8;
-    --on-plasma-blue: white;
-    --card: white;
-    --on-card: black;
-    --borders: rgba(0,0,0,0.3);
-    --borders-faint: rgba(0,0,0,0.1);
-}
-
-@media (prefers-color-scheme: dark) {
-    table tr:nth-child(odd) {
-        background-color: transparent !important;
-    }
-    .mdescLeft, .mdescRight, .memItemLeft, .memItemRight, .memTemplItemLeft, .memTemplItemRight, .memTemplParams {
-        background-color: transparent !important;
-    }
-    :root {
-        --base: #232629;
-        --on-base: #eff0f1;
-        --card: rgba(255,255,255,0.1);
-        --on-card: #eff0f1;
-        --borders: rgba(255,255,255,0.2);
-        --borders-faint: rgba(255,255,255,0.05);
-        --plasma-blue: #98c8e8;
-        --on-plasma-blue: black;
-
-        background-color: var(--base);
-    }
-}
-
-html {
-    margin: 0;
-}
-
-body {
-    background: var(--base);
-}
-
-body, table, div, p, dl {
-    font-family: "Noto Sans",Verdana, Geneva, Arial, sans-serif;
-    font-size: 14px;
-    line-height: 1.4em;
-}
-
-#navbar
-{
-    height: 50px;
-    background-color: var(--base);
-    color: var(--on-base);
-    border-bottom: 4px solid var(--plasma-blue);
-}
-
-#navbar .container {
-    height: 100%;
-    max-width: 800px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-}
-
-.navbar-nav.breadcrumb {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    flex-wrap: nowrap;
-}
-
-.navbar-nav.breadcrumb a {
-    padding: 13px;
-    font-size: 20px;
-}
-
-.navbar-nav > li {
-    float: initial;
-}
-
-.breadcrumb {
-    margin-bottom: 0;
-    height: 100%;
-    background-color: transparent;
-}
-
-li.active a {
-    background-color: var(--plasma-blue);
-    color: var(--on-plasma-blue);
-}
-
-#body_wrapper.container {
-    margin-right: initial;
-    display: flex;
-    justify-content: center;
-    align-content: center;
-    min-height: 100vh;
-}
-
-.api-kde-org-sidebar {
-    margin-top: 60px;
-}
-
-.navbar {
-    width: 100%;
-    min-width: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 2;
-    background-color: var(--base);
-}
-
-section {
-    margin-left: auto;
-    margin-right: auto;
-    width: 80vw;
-    max-width: 100%;
-    padding-left: 20px;
-    padding-right: 20px;
-}
-
-.body {
-    display: flex;
-    flex-direction: column;
-}
-
-.api-kde-org-sidebar {
-    background-color: var(--base);
-}
-
-@media (min-width: 768px) {
-    .api-kde-org-sidebar {
-        min-width: 300px;
-        max-width: 300px;
-        box-shadow: 0 1px 4px 0 rgba(0,0,0,.37);
-        z-index: 9999;
-        scrollbar-width: none;
-        overflow-y: scroll;
-        padding-bottom: 40px;
-        margin-top: 0;
-        scrollbar-width: 0;
-    }
-    .api-kde-org-sidebar::-webkit-scrollbar {
-        width: 0;
-    }
-
-    .navbar {
-        padding-left: 300px;
-    }
-    
-    aside {
-        margin-top: 60px;
-    }
-
-    .body {
-        flex-direction: row;
-    }
-
-    main section {
-        margin-top: 60px;
-        width: 60vw;
-    }
-}
-
-#sidebar-header {
-    height: 100px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    background-color: var(--plasma-blue);
-    color: var(--on-plasma-blue);
-}
-
-@media (prefers-color-scheme: dark) {
-    #sidebar-header {
-        background-color: var(--card);
-        color: var(--on-card);
-    }
-}
-
-#sidebar-header a {
-    color: white;
-}
-
-#sidebar-header h2 {
-    font-size: 30px;
-    font-weight: 700;
-}
-
-@media (max-width: 767px) {
-    .navbar-nav {
-        margin: 0;
-    }
-    #sidebar-header {
-        display: none;
-    }
-}
-
-#main-column {
-    width: 100%;
-    max-width: 1200px;
-}
-
-h1, h2, h3, h4, h5, h6, legend {
-    font-family: "Noto Sans", "Helvetica Neue", Arial, sans-serif;
-    margin-top: 0;
-    font-weight: 700;
-    color: var(--on-base) !important;
-}
-
-h2.groupheader {
-    color: var(--on-base) !important;
-    border-bottom: 0;
-    margin-bottom: 8px;
-}
-
-h1 {
-    font-size: 300%;
-    margin-bottom: 8px;
-}
-
-h2, h2.groupheader {
-    font-size: 240%;
-    margin-bottom: 8px;
-}
-
-h3 {
-    font-size: 180%;
-    margin-bottom: 8px;
-}
-
-h4 {
-    font-size: 140%;
-    margin-bottom: 8px;
-}
-
-h5 {
-    font-size: 120%;
-    margin-bottom: 10px;
-}
-
-#navbar .navbar-brand
-{
-    padding-top:0;
-    padding-top:0;
-}
-
-#navbar-logo {
-    width: 35px;
-    margin-top:10px;
-}
-
-#navbar-title {
-    font-size: 1.4em;
-    font-weight: bold;
-}
-
-footer {
-    margin-top: 15px;
-    padding: 15px 0px 5px 0px;
-    margin-bottom: 0px;
-}
-
-
-/* The 2 next follow breadcrumb style... should find a way*/
-.nav li a {
-    padding: 8px 15px;
-    background-color: #f5f5f5;
-}
-
-.nav li a:focus, .nav li a:hover {
-    background-color: #f5f5f5;
-    text-decoration: underline;
-}
-
-.bg-primary {
-    background-color: var(--plasma-blue) !important;
-    color: var(--on-plasma-blue) !important;
-}
-
-@media (prefers-color-scheme: dark) {
-    .bg-primary {
-        background-color: var(--card) !important;
-        color: var(--on-card) !important;
-    }
-}
-
-footer.bg-primary {
-    background-color: transparent !important;
-    color: var(--on-base) !important;
-}
-
-footer a {
-    font-weight: bold;
-    color: var(--on-base);
-}
-
-footer a:hover {
-    color: var(--on-base);
-}
-
-#left h2 {
-    font-size: 1.2em;
-}
-
-.menu-box {
-    padding: 0.7em 0 0 0;
-}
-
-.menu-box .menu-content {
-    margin: 0 7px 0 10px;
-}
-
-.menu-box ul {
-    list-style-type: none;
-    list-style-position:inside;
-    margin: 0 0 0 1.3em;
-    padding:0;
-}
-
-.menu-title {
-    margin: 0.6em 0 1.2em 0;
-    padding:0;
-    color: var(--on-plasma-blue);
-    background-color: var(--plasma-blue);
-}
-
-.sidebar-header .menu-title {
-    background-color: transparent;
-}
-
-@media (prefers-color-scheme: dark) {
-    .menu-title {
-        color: var(--on-card);
-        background-color: var(--card);
-    }
-}
-
-.menu-title h2 {
-    margin: 0;
-    padding: 0.4em 1.3em 0.2em 1.3em;
-    line-height:1.2em;
-    font-size: 1.2em;
-    font-weight: normal;
-    color: var(--on-plasma-blue) !important;
-}
-
-@media (prefers-color-scheme: dark) {
-    .menu-title h2 {
-        color: var(--on-card) !important;
-        background-color: transparent;
-    }
-    #sidebar-header .menu-title {
-        background-color: transparent;
-        color: var(--on-card);
-    }
-}
-
-a {
-    color: var(--plasma-blue);
-}
-
-.menu-content dl {
-    list-style-position: inside;
-    margin: 0;
-    padding: 0;
-}
-
-.menu-content dl dd {
-    list-style-position: inside;
-    margin: 0 0 0 1.3em;
-    padding: 0;
-}
-
-
-/**
- * Frontpage
- */
-
-.product-row {
-    background: var(--card);
-    color: var(--on-card);
-    border: 1px solid var(--borders);
-    border-radius: 3px;
-    padding: 12px;
-    margin-bottom: 15px;
-    transition: all 0.3s;
-}
-
-.product-row:hover {
-    border: 1px solid transparent;
-    box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
-    transform: translateY(-2);
-    transition: all 0.3s;
-}
-
-table.fieldtable {
-    width: initial;
-    border: 1px solid var(--borders);
-    border-radius: 0px;
-    box-shadow: none;
-}
-
-.fieldtable th {
-    background-image: none;
-    background-color: rgba(0,0,0,.2);
-    border-bottom: 1px solid var(--borders-faint);
-}
-
-.fieldtable td.fieldtype, .fieldtable td.fieldname {
-    border-bottom: 1px solid var(--borders-faint);
-    border-right: 1px solid var(--borders-faint);
-}
-
-.fieldtable td.fielddoc {
-    border-bottom: 1px solid var(--borders-faint);
-}
-
-table.params .paramname {
-    padding-right: 10px;
-}
-
-.product-logo {
-    margin-top: .5em;
-}
-
-#kde-main-row {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
-.kde-product-row {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-}
-
-.kde-product-column {
-    margin-left: 10px;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-}
-
-/**
- * Subgroup
- */
-
-table.libraries {
-    width: 100%;
-    border-collapse: collapse;
-    margin-bottom: 12px;
-}
-
-table.libraries td, table.libraries th {
-    border: solid 1px var(--borders);
-}
-
-table.libraries h3 {
-    margin: 0;
-    padding: 0;
-}
-
-table.libraries td {
-    padding: 0.5em;
-}
-
-table.libraries th {
-    background: var(--plasma-blue);
-    color: var(--on-plasma-blue);
-    font-size: 1.1em;
-    line-height: 1.7em;
-    text-align: center;
-}
-
-@media (prefers-color-scheme: dark) {
-    table.libraries th {
-        background: var(--card);
-        color: var(--on-card);
-    }
-}
-
-.library-main-column {
-    vertical-align: top;
-}
-
-.library-detail-column {
-    text-align: center;
-    width: 120px;
-}
-
-.library-fancyname {
-    font-size: 120%;
-}
-
-.library-platforms {
-    float: right;
-    font-size: 80%;
-}
-
-.library-platform {
-    color: #666;
-    padding-left: 6px;
-    margin-left: 6px;
-    border-left: 1px solid #ccc;
-}
-
-.library-platform:first-child {
-    padding-left: 0;
-    border-left: none;
-}
-
-.library-platform a {
-    text-decoration: none;
-}
-
-.library-platform-unsupported .library-platform-text {
-    text-decoration: line-through;
-    color: #aaa;
-}
-
-/* Platform filtering --------------------------------*/
-.not-available-indicator, .available-indicator {
-    display: none;
-    float: left;
-    padding-right: 0.5em;
-}
-
-.not-available .not-available-indicator {
-    display: inline;
-}
-
-.available .available-indicator {
-    display: inline;
-}
-
-.not-available {
-    background-color: rgba(233, 61, 87, 0.2);
-}
-
-.not-available .library-description {
-    display: none;
-}
-
-.library-platform-required .library-platform-text {
-    color: green;
-}
-
-.library-platform-required.library-platform-unsupported .library-platform-text {
-    color: red;
-}
-
-.warning-tooltip {
-    width: 15px;
-}
-
-/* Platform note -------------------------------------*/
-.note-tip {
-    display: none;
-    z-index: 3000;
-    position: absolute;
-
-    background-color: #222;
-    color: white;
-    padding: 6px;
-    border-radius: 5px;
-}
-
-a.note-close, a.note-close:active, a.note-close:visited {
-    color: white;
-    text-decoration: none;
-    margin-left: 6px;
-}
-
-
-
-.copyrights {
-    border-top: 1px solid var(--borders);
-    margin-top: 20px;
-    padding-top: 5px;
-    text-align: center;
-    color: var(--on-base);
-}
-
-hr {
-    border-color: var(--borders-faint);
-}
-
-/****
- * Search page loader
- * Shamelessly taken from https://www.w3schools.com/howto/howto_css_loader.asp
- ****/
- .loader {
-    border: 16px solid #f3f3f3; /* Light grey */
-    border-top: 16px solid #3498db; /* Blue */
-    border-radius: 50%;
-    width: 120px;
-    height: 120px;
-    margin: auto;
-    margin-top: 5%;
-    animation: spin 2s linear infinite;
-}
-
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-}
-
-/*****
- * Doxygen
- *****/
-
-/* Provided by Doxygen, redundant, because already in our header */
-div.headertitle, div#top {
-    display: none;
-}
-
-/* The Doxygen content feels "out of place" if it has a margin different from the rest of the page */
-div.contents {
-    margin-left: 0;
-    margin-right: 0;
-}
-
-div.header {
-    background-image: none;
-    background-color: none;
-    margin: 0px;
-    border: none;
-}
-
-/**
- * classes
- */
-
-.memtitle {
-    display: none;
-}
-
-.memdoc {
-    border: 0;
-    border-radius: 0px 0px 6px 6px;
-    box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
-}
-
-.memproto, dl.reflist dt {
-    background: var(--plasma-blue);
-    color: var(--on-plasma-blue);
-    border-radius: 0;
-}
-
-.memname {
-    color: var(--on-plasma-blue);
-    text-shadow: none;
-}
-
-@media (prefers-color-scheme: dark) {
-    table {
-        background-color: transparent !important;
-        color: var(--on-base) !important;
-    }
-    .memproto, dl.reflist dt {
-        background: var(--card) !important;
-        color: var(--on-card) !important;
-    }
-    .memname {
-        color: var(--on-card);
-    }
-    table.mlabels tr, table.memberdecls tr.heading, .mlabels tr, .memproto table tr, table.params tr {
-        background-color: transparent !important;
-        color: var(--on-base) !important;
-    }
-    div.memproto {
-        border: 0;
-    }
-}
-
-.memdoc, dl.refllist dd {
-    background: var(--card);
-    color: var(--on-card);
-}
-
-.memSeparator {
-    border-color: var(--borders);
-}
-
-.mdescLeft, .mdescRight, .memItemLeft, .memItemRight, .memTemplItemLeft, .memTemplItemRight, .memTemplParams {
-    background: var(--card);
-    color: var(--on-card);
-    border-color: var(--borders);
-}
-
-.memproto a.elRef{
-    color: #aaaabb;
-    font-weight: bold;
-}
-
-.memproto a.el {
-    color: #ccccee;
-    font-weight: bold;
-}
-
-.memproto .paramtype {
-    font-weight: bold;
-}
-
-.memproto .paramname {
-    color: #f7800a;
-    font-weight: bold;
-}
-
-.memproto span.mlabel {
-    padding: 6px;
-    border: 0;
-    border-radius: 4px;
-    background: var(--base);
-    color: var(--on-base);
-}
-
-.additional_info {
-    margin-top: 10px;
-}
-
-table.directory tr {
-    background-color: transparent !important;
-    color: var(--on-base);
-}
-table.directory tr.even {
-    background-color: transparent !important;
-    color: var(--on-base);
-}
-
-/**
- * Fragments
- */
-.fragment .line {
-    line-height: 1.4;
-    white-space: pre;
-}
-
-/* Use div.fragment, not pre.fragment. pre.fragment is used for @verbatim blocks, which must keep their border */
-div.fragment {
-    background-color: var(--card);
-    color: var(--on-card);
-    border: 1px solid var(--borders);
-    border-radius: 10px;
-    padding: 10px;
-    margin-top: 10px;
-    margin-bottom: 10px;
-    box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
-}
-
-pre.fragment {
-    background-color: var(--card);
-    color: var(--on-card);
-    border-color: var(--borders);
-    white-space: pre;
-    scrollbar-width: 0;
-}
-pre.fragment::-webkit-scrollbar {
-    width: 0;
-    height: 0;
-}
-
-span.icona {
-    display: none;
-}
-
-table.directory td {
-    padding-bottom: 20px;
-}
-
-/**
-* Listing
-*/
-span.lineno {
-    border-right: 1px solid var(--borders);
-    background-color: transparent;
-    color: var(--on-card);
-}
-
-span.lineno a {
-    background-color: transparent;
-}
-
-.d-flex {
-    display: flex;
-}
-
-.PageDoc .header::after, section .header::after, header.page-header::after {
-    display: none !important;
-}
-
-div.summary {
-    float: none;
-    width: auto;
-    margin-left: auto;
-}
-
-div.header {
-    background: none;
-}
-
-h1 {
-    word-wrap: break-word;
-}
\ No newline at end of file
diff --git a/src/kapidox/data/templates/base.html b/src/kapidox/data/templates/base.html
--- a/src/kapidox/data/templates/base.html
+++ b/src/kapidox/data/templates/base.html
@@ -1,40 +1,38 @@
 <!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">
-    <title>{% block page_title %}{% endblock %}</title>
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>{% block page_title %}{% endblock %}</title>
 
-    <style type="text/css">
-      .cp-doNotDisplay { display: none; }
-      @media aural, braille, handheld, tty { .cp-doNotDisplay { display: inline; speak: normal; }}
-      .cp-edit { text-align: right; }
-      @media print, embossed { .cp-edit { display: none; }}
-    </style>
-
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-    <meta http-equiv="Content-Style-Type" content="text/css" />
-    <link rel="meta" href="https://www.kde.org/labels.rdf" type="application/rdf+xml" title="ICRA labels" />
-    <meta name="trademark" content="KDE e.V." />
-    <meta name="description" content="KDE products API documentation" />
-    <meta name="MSSmartTagsPreventParsing" content="true" />
-    <meta name="robots" content="all" />
-    <meta name="no-email-collection" content="http://www.unspam.com/noemailcollection" />
-    {% if kapidox_version %}
-      <meta name="generator" content="kapidox {{ kapidox_version }}" />
-    {% endif %}
-    <script type="text/javascript" src="{{resources}}/3rd-party/jquery/jquery-3.1.0.min.js"></script>
-    <script type="text/javascript" src="dynsections.js"></script>
-    <link rel="shortcut icon" href="{{resources}}/favicon.ico" />
-    <link rel="icon" href="{{resources}}/favicon.ico" />
-    <link rel="stylesheet" type="text/css" href="https://cdn.kde.org/aether-devel/bootstrap.css" />
-    {% if doxygencss %}
-      <link rel="stylesheet" type="text/css" href="{{doxygencss}}" />
-    {% endif %}
-    <link rel="stylesheet" type="text/css" href="{{resources}}/css/kapidox.css" />
-{#    <link rel="stylesheet" type="text/css" href="{{resources}}/kde.css" />#}
+  <style type="text/css">
+    .cp-doNotDisplay { display: none; }
+    @media aural, braille, handheld, tty { .cp-doNotDisplay { display: inline; speak: normal; }}
+    .cp-edit { text-align: right; }
+    @media print, embossed { .cp-edit { display: none; }}
+  </style>
 
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <meta http-equiv="Content-Style-Type" content="text/css" />
+  <link rel="meta" href="https://www.kde.org/labels.rdf" type="application/rdf+xml" title="ICRA labels" />
+  <meta name="trademark" content="KDE e.V." />
+  <meta name="description" content="KDE products API documentation" />
+  <meta name="MSSmartTagsPreventParsing" content="true" />
+  <meta name="robots" content="all" />
+  <meta name="no-email-collection" content="http://www.unspam.com/noemailcollection" />
+  {% if kapidox_version %}
+    <meta name="generator" content="kapidox {{ kapidox_version }}" />
+  {% endif %}
+  <script type="text/javascript" src="{{resources}}/3rd-party/jquery/jquery-3.1.0.min.js"></script>
+  <script type="text/javascript" src="dynsections.js"></script>
+  <link rel="shortcut icon" href="{{resources}}/favicon.ico" />
+  <link rel="icon" href="{{resources}}/favicon.ico" />
+  <link rel="stylesheet" type="text/css" href="https://cdn.kde.org/aether-devel/bootstrap.css" />
+  {% if doxygencss %}
+    <link rel="stylesheet" type="text/css" href="{{doxygencss}}" />
+  {% endif %}
+  <link rel="stylesheet" type="text/css" href="https://cdn.kde.org/aether-devel/aethe-sidebar.css" />
   {% block head %}{% endblock %}
 </head>
 
@@ -45,23 +43,29 @@
     <li><a href="#cp-menu" accesskey="5">Skip to link menu</a></li>
   </ul>
 
-  <nav id="navbar" class="navbar">
-    <div class="container">
+  <main class="body no-js">
+    <header class="header">
+      <nav class="navbar">
         <ol class="breadcrumb navbar-nav">
-        {% for entry in breadcrumbs.entries %}
-          <li{% if loop.last %} class="active"{% endif %}><a href="{{ entry.href }}">{{ entry.text }}</a></li>
-        {% endfor %}
+          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          {% for entry in breadcrumbs.entries %}
+            <li class="breadcrumb-link{% if loop.last %} active{% endif %}">
+              <a href="{{ entry.href }}">{{ entry.text }}</a>
+            </li>
+          {% endfor %}
         </ol>
-    </div>
-  </nav> <!-- /header -->
+      </nav>
+    </header>
 
-  <main class="body">
-    <aside class="api-kde-org-sidebar">
+    <aside class="sidebar">
       {% block sidebar %}{% endblock %}
     </aside>
 
-    <section>
-      <header class="page-header">
+    <article class="content">
+      <h1 class="content-title">
+        {% block title %}{% endblock %}
         <form action="search.html" method="get" class="form-inline">
           <div id="search" class="input-group ml-auto">
             <input type="text" id="search-input" name="query" aria-label="Search input" class="form-control" placeholder="Search...">
@@ -72,9 +76,10 @@
             </span>
           </div>
         </form>
-        <h1><a name="content"></a>{% block title %}{% endblock %}</h1>
-      </header>
+      </h1>
+
       {% block content %}{% endblock %}
+
       <footer class="footer bg-primary">
         <div id="footer-text" class="center-block col-md-7" style="float:none;">
             {% include 'footer.html' %}
@@ -85,8 +90,16 @@
         </div>
         {% endblock %}#}
       </footer>
-    </section>
+    </article>
   </main>
+  <script>
+    const toggler = document.querySelector('.navbar-toggler');
+    const body = document.querySelector('.body');
+    body.classList.remove('no-js');
+    toggler.addEventListener('click', () => {
+      body.classList.toggle('sidebar-active');
+    });
+  </script>
 
 <!--
 WARNING: DO NOT SEND MAIL TO THE FOLLOWING EMAIL ADDRESS! YOU WILL
diff --git a/src/kapidox/data/templates/subgroup-sidebar.html b/src/kapidox/data/templates/subgroup-sidebar.html
--- a/src/kapidox/data/templates/subgroup-sidebar.html
+++ b/src/kapidox/data/templates/subgroup-sidebar.html
@@ -9,20 +9,16 @@
     </div>
     <div class="menu-content">
     <ul>
-        <li>
-        <ul>
-            {% if group.libraries | selectattr('subproducts', 'none') | list | length > 0 %}
-            {% if group.subproduct | length > 0 %}
-            <li><a href="#sg-{{ nosubproduct }}">Without subgroup</a></li>
-            {% else  %}
-            <li><a href="#content">All</a></li>
-            {% endif %}
-            {% endif %}
-            {% for subproduct in group.subproducts | sort(attribute='order') %}
-            <li><a href="#sg-{{ subproduct.name }}">{{ subproduct.fancyname }}</a></li>
-            {% endfor %}
-        </ul>
-        </li>
+      {% if group.libraries | selectattr('subproducts', 'none') | list | length > 0 %}
+      {% if group.subproduct | length > 0 %}
+      <li><a href="#sg-{{ nosubproduct }}">Without subgroup</a></li>
+      {% else  %}
+      <li><a href="#content">All</a></li>
+      {% endif %}
+      {% endif %}
+      {% for subproduct in group.subproducts | sort(attribute='order') %}
+      <li><a href="#sg-{{ subproduct.name }}">{{ subproduct.fancyname }}</a></li>
+      {% endfor %}
     </ul>
     </div>
 </div>