Cleaning up the navbar for small screens

src/app/app.component.html

@@ -1,24 +1,23 @@
 <header id="nav">
 	<div class="fixed-top">
-		<nav id="toolbar" class="navbar navbar-dark bg-secondary">
+		<nav id="toolbar" class="navbar navbar-dark bg-secondary flex-nowrap">
+			<button mat-icon-button class="icon p-0 d-sm-none" type="button" data-toggle="collapse" data-target=".mobile-nav">
+				<mat-icon>menu</mat-icon>
+			</button>
 			<a class="navbar-brand nav-item ml-3" routerLink="/">
 				Kyoo
 			</a>
 
-			<ul class="navbar-nav flex-row">
+			<ul class="navbar-nav flex-row d-none d-sm-flex">
-				<li class="nav-item">
+				<ng-container *ngTemplateOutlet="links"></ng-container>
-					<a class="nav-link" routerLink="/browse" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">All</a>
-				</li>
-				<li class="nav-item" *ngFor="let library of this.libraries">
-					<a class="nav-link" routerLink="/browse/{{library.slug}}" routerLinkActive="active">{{library.name}}</a>
-				</li>
 			</ul>
 
-			<ul class="navbar-nav flex-row ml-auto">
+			<ul class="navbar-nav flex-row flex-nowrap ml-auto">
 				<li class="nav-item icon searchbar">
-					<input placeholder="Search" id="search" type="search" (input)="onUpdateValue($event)"/>
 					<mat-icon matTooltipPosition="below" matTooltip="Search" (click)="openSearch()">search</mat-icon>
+					<input placeholder="Search" id="search" type="search" (input)="onUpdateValue($event)"/>
 				</li>
+
 				<li class="nav-item" *ngIf="!this.isAuthenticated else accountDrop">
 					<a class="icon" (click)="this.authManager.login()" matTooltipPosition="below" matTooltip="Login">
 						<mat-icon>account_circle</mat-icon>
@@ -43,6 +42,13 @@
 				</ng-template>
 			</ul>
 		</nav>
+
+		<div class="d-sm-none navbar-dark bg-secondary">
+			<ul class="mobile-nav collapse navbar-nav">
+				<ng-container *ngTemplateOutlet="links"></ng-container>
+			</ul>
+		</div>
+
 		<mat-progress-bar *ngIf="this.isLoading" color="accent" mode="indeterminate"> </mat-progress-bar>
 	</div>
 </header>
@@ -50,3 +56,12 @@
 <main id="main">
 	<router-outlet></router-outlet>
 </main>
+
+<ng-template #links>
+	<li class="nav-item">
+		<a class="nav-link" routerLink="/browse" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">All</a>
+	</li>
+	<li class="nav-item" *ngFor="let library of this.libraries">
+		<a class="nav-link" routerLink="/browse/{{library.slug}}" routerLinkActive="active">{{library.name}}</a>
+	</li>
+</ng-template>

src/app/app.component.scss

@@ -17,6 +17,11 @@
 {
 	outline: none;
 
+	@include media-breakpoint-down(sm)
+	{
+		text-align: center;
+	}
+
 	> a
 	{
 		outline: none;
@@ -51,14 +56,24 @@
 	}
 }
 
-.navbar-brand:hover
+.navbar-brand
 {
-	color: var(--accentColor);
+	&:hover
+	{
+		color: var(--accentColor);
+	}
+
+	@media (max-width: 350px)
+	{
+		display: none;
+	}
 }
 
 .searchbar
 {
 	border-radius: 30px;
+	display: flex !important;
+	flex-flow: row-reverse nowrap;
 
 	> input
 	{
@@ -69,13 +84,14 @@
 		border-bottom: 1px solid #cfcfcf;
 		width: 0;
 		padding: 0;
+		max-width: 20rem;
 		transition: width 0.4s ease-in-out;
 
 		&:focus, &.searching
 		{
-			width: 12rem;
+			width: 100%;
 
-			@include media-breakpoint-up(sm)
+			@include media-breakpoint-up(md)
 			{
 				width: 20rem;
 			}
@@ -93,12 +109,14 @@ input::-webkit-search-cancel-button
 	padding: 8px;
 	display: inline-block;
 	opacity: 0.7;
+	outline: none;
 
 	&:host-context(.hoverEnabled) &:hover
 	{
 		cursor: pointer;
 		opacity: 1;
 	}
+
 }
 
 .profilePicture

src/app/app.component.ts

@@ -76,7 +76,7 @@ export class AppComponent
 		{
 			event.target.classList.add("searching");
 			this.router.navigate(["/search", query], {
-				replaceUrl: true
+				replaceUrl: this.router.url.startsWith("/search")
 			});
 		}
 		else