svg

public/lib/app/app.css

@@ -0,0 +1,80 @@
+html,
+body {
+    height: 100%
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+}
+
+.avatar{
+    border-radius: 100%;
+    width:40px;
+    height:40px;
+}
+
+.navbar-brand img {
+    width: 40px;
+    margin-right: 10px;
+}
+
+.navbar-toggler {
+    border: none;
+    box-shadow: none !important;
+}
+
+main {
+    display: flex;
+    flex-grow: 1;
+    align-items: stretch;
+}
+
+sidebar {
+    width: 300px;
+    padding: 15px;
+    background-color: rgba(var(--bs-dark-rgb));
+    display: flex;
+    flex-direction: column;
+}
+
+sidebar div {
+    display: flex;
+    flex-direction: column;
+    border-bottom: 1px solid var(--bs-body-color);
+    padding-bottom: 10px;
+}
+
+sidebar a {
+    text-decoration: none;
+    color: var(--bs-body-color);
+    ;
+    opacity: 0.6;
+    margin: 5px 0px;
+}
+
+sidebar a:hover {
+    text-decoration: none;
+    opacity: 1;
+}
+
+content {
+    flex-grow: 1;
+    align-items: stretch;
+    padding: 15px;
+}
+
+@media (max-width: 991px) {
+    sidebar {
+        width: 70px;
+    }
+
+    sidebar i {
+        font-size: 200%;
+    }
+
+    sidebar span {
+        display: none;
+    }
+}

public/lib/app/app.js

@@ -0,0 +1,4 @@
+function ModalLoad(idmodal,title,path) {
+	$("#"+idmodal+" .modal-header h4").text(title);
+	$("#"+idmodal+" #framemodal").attr("src",path);
+}