init

static/Vvvebjs/demo/landing/scss/_menutree.scss

@@ -0,0 +1,115 @@
+.menutree {
+/*
+	padding: 5px;
+	margin: 0;
+	padding: 0;
+	margin-right: -1px;
+	width: 100%;
+*/	
+	ul {
+		margin:0;
+		padding-left:0.5rem;
+		list-style: none;
+	}
+	
+	> ul {
+		padding:0;
+	}
+	
+	li {
+		
+		//padding: 20px 10px;
+		&:last-child {
+			border: 0;
+		}
+		
+		a:hover,
+		&.active > a{
+			background:var(--bs-primary-bg-subtle);
+			background:rgba(var(--bs-primary-rgb), 0.05);
+			//outline:1px solid var(--bs-primary-bg-subtle);
+			//border-right:1px solid var(--bs-primary);
+			//color :$primary;
+		}
+		
+		&.active > label > a {
+			//border-right:1px solid var(--bs-primary);
+		}
+		
+		&.expand {
+			ul {
+				visibility: hidden;
+				opacity: 0;
+				max-height: 0;
+				transition: all 0.3s;
+			}
+			input {
+				/* Show when checked */
+				&:checked {
+					& ~ ul {
+						visibility: visible;
+						opacity: 1;
+						max-height: none;
+					}
+					& ~ label {
+						&::after {
+							transform: none;
+							line-height:3;
+						}
+						
+						a {
+							//border-bottom:2px solid var(--bs-border-color);
+							//background:var(--bs-border-color);
+							//color :$primary;
+						}
+					}
+				}
+			}
+		}		
+	}
+	a {
+		display: block;
+		width: 100%;
+		text-decoration: none;
+		color: var(--bs-body-color);
+		padding: 0.4rem 0.7rem;
+	}
+	label {
+		position: relative;
+		display: block;
+		width: 100%;
+		cursor: pointer;
+	}
+	input[type=checkbox] {
+		display: none;
+	}
+	
+	label {
+		&::after {
+			content: "\2304";
+			font-size: 150%;
+			position: absolute;
+			top: 0;
+			right: 1rem;
+			height:100%;
+			//line-height:1.2;
+			transition: all 0.5s;
+            transform: rotate(-90deg);
+			/* Icon font enhancement */
+			line-height:3;
+			content: "\f107";
+            font-family:"Line Awesome Free";
+            font-weight:900;
+            font-size:80%;
+			opacity:0.5;
+		}
+	}
+	
+	&:hover { 
+		label {
+			&::after {
+				opacity:1;
+			}
+		}
+	}
+}