fix: Using svg for menu icon for mobile view

frappe/public/scss/website/navbar.scss

@@ -13,6 +13,10 @@
 .navbar-light {
 	border-bottom: 1px solid $border-color;
 	background: $navbar-bg;
+
+	.navbar-toggler .icon {
+		stroke: none;
+	}
 }
 
 .navbar-primary {
@@ -25,6 +29,10 @@
 		}
 	}
 
+	.navbar-brand {
+		color: white;
+	}
+
 	.navbar-search {
 		background-color: var(--blue-400);
 		width: 300px;
@@ -36,6 +44,14 @@
 		}
 	}
 
+	.navbar-toggler {
+		border-color: rgba(255,255,255, 0.1);
+		
+		.icon {
+			stroke: none;
+		}
+	}
+
 
 	svg use {
 		--icon-stroke: white;

frappe/templates/doc.html

@@ -30,7 +30,11 @@
 						aria-controls="navbarSupportedContent"
 						aria-expanded="false"
 						aria-label="Toggle navigation">
-						<span class="navbar-toggler-icon"></span>
+						<span>
+							<svg class="icon icon-lg">
+								<use href="#icon-menu"></use>
+							</svg>
+						</span>
 					</button>
 				</div>
 			</div>

frappe/templates/includes/navbar/navbar.html

@@ -15,7 +15,11 @@
 			aria-controls="navbarSupportedContent"
 			aria-expanded="false"
 			aria-label="Toggle navigation">
-			<span class="navbar-toggler-icon"></span>
+			<span>
+				<svg class="icon icon-lg">
+					<use href="#icon-menu"></use>
+				</svg>
+			</span>
 		</button>
 
 		<div class="collapse navbar-collapse" id="navbarSupportedContent">

frappe/website/web_template/primary_navbar/primary_navbar.html

@@ -1,4 +1,4 @@
-<nav class="navbar navbar-primary navbar-expand-lg navbar-dark">
+<nav class="navbar navbar-primary navbar-expand-lg">
 	<div class="container">
 		<a class="navbar-brand" href="{{ url_prefix }}{{ home_page or "/" }}">
 			{%- if brand_html -%}
@@ -15,7 +15,11 @@
 			aria-controls="navbarSupportedContent"
 			aria-expanded="false"
 			aria-label="Toggle navigation">
-			<span class="navbar-toggler-icon"></span>
+			<span>
+				<svg class="icon icon-lg">
+					<use href="#icon-menu"></use>
+				</svg>
+			</span>
 		</button>
 
 		<div class="collapse navbar-collapse" id="navbarSupportedContent">