Profil-oppretting fungerer

src/components/Toggle.vue

+<script>
+export default {
+    data: () => {
+        return {
+            state: false,
+        }
+    },
+    emits: ['toggled'],
+    methods: {
+        emitUpdate() {
+            this.state = !this.state;
+            this.$emit('toggled');
+        }
+    }
+}
+</script>
+
+<template>
+    <label class="toggle">
+        <input type="checkbox" @change="emitUpdate">
+        <span class="toggle_slider"></span>
+    </label>
+</template>
+
+<style scoped lang="scss">
+$width: 40px;
+$height: calc(2 * $width / 3);
+
+$on-color: green;
+$off-color: #cccccc;
+
+.toggle {
+    position: relative;
+    display: inline-block;
+
+    border-radius: calc($height / 2);
+
+    width: $width;
+    height: $height;
+
+    background-color: $off-color;
+
+    input {
+        display: none;
+    }
+}
+
+.toggle_slider {
+    position: absolute;
+    cursor: pointer;
+
+    border-radius: calc($height / 2);
+
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    background-color: #ccc;
+
+    &:before {
+        position: absolute;
+        content: "";
+
+        border-radius: 50%;
+
+        height: calc(0.8 * $height);
+        width: calc(0.8 * $height);
+        left: calc(0.1 * $height);
+        top: calc(0.1 * $height);
+
+        background-color: white;
+        transition: 200ms;
+    }
+}
+
+input:checked+.toggle_slider {
+    background-color: $on-color;
+}
+
+input:focus+.toggle_slider {
+    box-shadow: 0 0 1px white;
+}
+
+input:checked+.toggle_slider:before {
+    transform: translateX(calc($width / 3));
+}
+</style>
\ No newline at end of file