Create toggle-switch component and use in AdminForumInfo component

frontend/src/components/AdminForumInfo.vue

@@ -13,6 +13,10 @@
 			v-model='description'
 			:error='errors.forumDescription'
 		></fancy-input>
+		<div class='admin_forum_info__label'>
+			<toggle-switch v-model='showDescription'></toggle-switch>
+			<span>Show forum description on homepage</span>
+		</div>
 		<loading-button :loading='loading' @click='save'>Save settings</loading-button>
 	</div>
 </template>
@@ -20,6 +24,7 @@
 <script>
 	import FancyInput from './FancyInput'
 	import LoadingButton from './LoadingButton'
+	import ToggleSwitch from './ToggleSwitch'
 
 	import AjaxErrorHandler from '../assets/js/errorHandler'
 
@@ -27,12 +32,14 @@
 		name: 'AdminForumInfo',
 		components: {
 			FancyInput,
-			LoadingButton
+			LoadingButton,
+			ToggleSwitch
 		},
 		data () {
 			return {
 				name: '',
 				description: '',
+				showDescription: true,
 				loading: false,
 				errors: {
 					forumName: '',
@@ -89,6 +96,15 @@
 	@import '../assets/scss/variables.scss';
 
 	.admin_forum_info {
-	
+		@at-root #{&}__label {
+			display: flex;
+			align-items: center;
+			margin-bottom: 0.5rem;
+
+			& > span {
+				font-size: 0.9rem;
+				margin-left: 0.5rem;
+			}
+		}
 	}
 </style>

frontend/src/components/ToggleSwitch.vue

@@ -0,0 +1,101 @@
+<template>
+	<label class='toggle_switch'>
+		<input type='checkbox' v-model='proxyValue' />
+		<span></span>
+	</label>
+</template>
+
+<script>
+	export default {
+		name: 'ToggleSwitch',
+		props: ['value'],
+		data () {
+			return {
+				proxyValue: this.value
+			}
+		},
+		watch: {
+			value () {
+				this.proxyValue = this.value
+			},
+			proxyValue () {
+				this.$emit('input', this.proxyValue)
+			}
+		}
+	}
+</script>
+
+<style lang='scss' scoped>
+	@import '../assets/scss/variables.scss';
+
+	.toggle_switch {
+		position: relative;
+		display: inline-block;
+		width: 4rem;
+		height: 2rem;
+		cursor: pointer;
+
+		&:active {
+			span::before {
+				width: 1.5rem;
+			}
+
+			input:checked + span::before {
+				left: calc(100% - 1.85rem);
+			}
+		}
+
+		&:hover {
+			span {
+				background-color: $color__lightgray--primary;
+			}
+
+			input:checked + span {
+				background-color: darken(rgba(109, 210, 91, 0.9), 7.5%);
+				border-color: darken(rgba(25, 165, 35, 0.2), 5%);
+
+				&::before {
+					opacity: 0.95;
+				}
+			}
+		}
+
+		input {
+			display: none;
+		}
+
+		span {
+			background-color: #fff;
+			border-radius: 5rem;
+			display: block;
+			width: 100%;
+			height: 100%;
+			border: 0.2rem solid $color__gray--darker;
+			transition: all 0.2s ease;
+
+			&::before {
+				content: '';
+				position: absolute;
+				left: 0.4rem;
+				top: 0.35rem;
+				height: 1.3rem;
+				width: 1.3rem;
+				background-color: $color__gray--darkest;
+				border-radius: 100%;
+				box-shadow: 0px 0px 2px 0 #cacacacc;
+
+				transition: all 0.2s ease;
+			}
+		}
+
+		input:checked + span {
+			background-color: rgba(109, 210, 91, 0.9);
+			border-color: rgba(25, 165, 35, 0.2);
+
+			&::before {
+				left: calc(100% - 1.65rem);
+				background-color: #fff;
+			}
+		}
+	}
+</style>