From f9d3ff29ed286e5066301ce554126b41217b5a6d Mon Sep 17 00:00:00 2001
From: wea_ondara <wea_ondara@cutiepie.at>
Date: Thu, 21 Sep 2023 19:08:21 +0200
Subject: [PATCH] added nav bar

---
 src/App.vue                                   | 11 +++-
 src/components/NavBar.vue                     | 60 ++++++++++++++++++
 src/components/UserSearch.vue                 | 21 +++++++
 .../BootstrapThemeSwitch.vue                  | 62 +++++++++++++++++++
 .../bootstrapThemeSwitch/assets/moon.svg      |  8 +++
 .../bootstrapThemeSwitch/assets/sun.svg       |  8 +++
 .../bootstrapThemeSwitch/assets/sun_focus.svg |  8 +++
 7 files changed, 175 insertions(+), 3 deletions(-)
 create mode 100644 src/components/NavBar.vue
 create mode 100644 src/components/UserSearch.vue
 create mode 100644 src/components/bootstrapThemeSwitch/BootstrapThemeSwitch.vue
 create mode 100644 src/components/bootstrapThemeSwitch/assets/moon.svg
 create mode 100644 src/components/bootstrapThemeSwitch/assets/sun.svg
 create mode 100644 src/components/bootstrapThemeSwitch/assets/sun_focus.svg

diff --git a/src/App.vue b/src/App.vue
index 3cd64e6..761c702 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,11 +1,13 @@
-<script lang="ts"  >
+<script lang="ts">
 import {RouterView} from 'vue-router';
 import {Options, Vue} from 'vue-class-component';
 import DocumentLocaleSetter from '@/components/locale/DocumentLocaleSetter.vue';
+import NavBar from '@/components/NavBar.vue';
 
 @Options({
   name: 'App',
   components: {
+    NavBar,
     DocumentLocaleSetter,
     RouterView,
   },
@@ -16,6 +18,9 @@ export default class App extends Vue {
 </script>
 
 <template>
-  <DocumentLocaleSetter/>
-  <RouterView/>
+  <div>
+    <DocumentLocaleSetter/>
+    <NavBar/>
+    <RouterView/>
+  </div>
 </template>
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
new file mode 100644
index 0000000..023c45f
--- /dev/null
+++ b/src/components/NavBar.vue
@@ -0,0 +1,60 @@
+<script lang="ts">
+import {Options, Vue} from 'vue-class-component';
+import BootstrapThemeSwitch from '@/components/bootstrapThemeSwitch/BootstrapThemeSwitch.vue';
+import UserSearch from '@/components/UserSearch.vue';
+
+@Options({
+  name: 'NavBar',
+  components: {
+    UserSearch,
+    BootstrapThemeSwitch,
+  },
+})
+export default class NavBar extends Vue {
+}
+
+</script>
+
+<template>
+  <nav class="navbar navbar-expand">
+    <div class="container-fluid">
+<!--      <a class="navbar-brand" href="#">Navbar</a>-->
+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
+              aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarSupportedContent">
+<!--        <ul class="navbar-nav me-auto mb-2 mb-lg-0">-->
+<!--          <li class="nav-item">-->
+<!--            <a class="nav-link active" aria-current="page" href="#">Home</a>-->
+<!--          </li>-->
+<!--          <li class="nav-item">-->
+<!--            <a class="nav-link" href="#">Link</a>-->
+<!--          </li>-->
+<!--          <li class="nav-item dropdown">-->
+<!--            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">-->
+<!--              Dropdown-->
+<!--            </a>-->
+<!--            <ul class="dropdown-menu">-->
+<!--              <li><a class="dropdown-item" href="#">Action</a></li>-->
+<!--              <li><a class="dropdown-item" href="#">Another action</a></li>-->
+<!--              <li>-->
+<!--                <hr class="dropdown-divider">-->
+<!--              </li>-->
+<!--              <li><a class="dropdown-item" href="#">Something else here</a></li>-->
+<!--            </ul>-->
+<!--          </li>-->
+<!--          <li class="nav-item">-->
+<!--            <a class="nav-link disabled">Disabled</a>-->
+<!--          </li>-->
+<!--        </ul>-->
+        <div class="mx-auto">
+          <UserSearch/>
+        </div>
+        <div>
+          <BootstrapThemeSwitch/>
+        </div>
+      </div>
+    </div>
+  </nav>
+</template>
diff --git a/src/components/UserSearch.vue b/src/components/UserSearch.vue
new file mode 100644
index 0000000..828f885
--- /dev/null
+++ b/src/components/UserSearch.vue
@@ -0,0 +1,21 @@
+<script lang="ts">
+import {Options, Vue} from 'vue-class-component';
+import BootstrapThemeSwitch from '@/components/bootstrapThemeSwitch/BootstrapThemeSwitch.vue';
+
+@Options({
+  name: 'UserSearch',
+  components: {},
+})
+export default class UserSearch extends Vue {
+}
+
+</script>
+
+<template>
+  <div class="input-group">
+    <input class="form-control" type="search" placeholder="Search" aria-label="Search">
+    <button class="btn btn-primary">
+      <i class="fa fa-search"></i>
+    </button>
+  </div>
+</template>
diff --git a/src/components/bootstrapThemeSwitch/BootstrapThemeSwitch.vue b/src/components/bootstrapThemeSwitch/BootstrapThemeSwitch.vue
new file mode 100644
index 0000000..12e9e97
--- /dev/null
+++ b/src/components/bootstrapThemeSwitch/BootstrapThemeSwitch.vue
@@ -0,0 +1,62 @@
+<script lang="ts">
+import {Options, Vue} from 'vue-class-component';
+
+@Options({
+  name: 'BootstrapThemeSwitch',
+})
+export default class BootstrapThemeSwitch extends Vue {
+  private darkInternal: boolean = false;
+
+  mounted(): void {
+    this.readSetting();
+    this.updateTheme();
+  }
+
+  private get dark(): boolean {
+    return this.darkInternal;
+  }
+
+  private set dark(value: boolean) {
+    this.darkInternal = value;
+    this.updateSetting();
+    this.updateTheme();
+  }
+
+  private readSetting(): void {
+    this.darkInternal = localStorage.getItem('darkmode') === ('' + true)
+  }
+
+  private updateSetting(): void {
+    localStorage.setItem('darkmode', '' + this.darkInternal);
+  }
+
+  private updateTheme(): void {
+    if (this.darkInternal) {
+      document.documentElement.setAttribute('data-bs-theme', 'dark');
+    } else {
+      document.documentElement.removeAttribute('data-bs-theme');
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="form-check form-switch light-dark-switch">
+    <input class="form-check-input" type="checkbox" role="switch" v-model="dark">
+  </div>
+</template>
+
+<style scoped>
+.light-dark-switch .form-check-input {
+  --bs-form-switch-bg: url(assets/sun.svg) !important;
+}
+
+.light-dark-switch .form-check-input:focus {
+  --bs-form-switch-bg: url(assets/sun_focus.svg) !important;
+}
+
+.light-dark-switch .form-check-input:checked,
+.light-dark-switch .form-check-input:checked:focus {
+  --bs-form-switch-bg: url(assets/moon.svg) !important;
+}
+</style>
diff --git a/src/components/bootstrapThemeSwitch/assets/moon.svg b/src/components/bootstrapThemeSwitch/assets/moon.svg
new file mode 100644
index 0000000..ea8c681
--- /dev/null
+++ b/src/components/bootstrapThemeSwitch/assets/moon.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <g transform="scale(0.75 0.75) translate(92 92)" fill="#fff">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
+            <!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
+            <path d="M144.7 98.7c-21 34.1-33.1 74.3-33.1 117.3c0 98 62.8 181.4 150.4 211.7c-12.4 2.8-25.3 4.3-38.6 4.3C126.6 432 48 353.3 48 256c0-68.9 39.4-128.4 96.8-157.3zm62.1-66C91.1 41.2 0 137.9 0 256C0 379.7 100 480 223.5 480c47.8 0 92-15 128.4-40.6c1.9-1.3 3.7-2.7 5.5-4c4.8-3.6 9.4-7.4 13.9-11.4c2.7-2.4 5.3-4.8 7.9-7.3c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-3.7 .6-7.4 1.2-11.1 1.6c-5 .5-10.1 .9-15.3 1c-1.2 0-2.5 0-3.7 0c-.1 0-.2 0-.3 0c-96.8-.2-175.2-78.9-175.2-176c0-54.8 24.9-103.7 64.1-136c1-.9 2.1-1.7 3.2-2.6c4-3.2 8.2-6.2 12.5-9c3.1-2 6.3-4 9.6-5.8c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-3.6-.3-7.1-.5-10.7-.6c-2.7-.1-5.5-.1-8.2-.1c-3.3 0-6.5 .1-9.8 .2c-2.3 .1-4.6 .2-6.9 .4z"/>
+        </svg>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/components/bootstrapThemeSwitch/assets/sun.svg b/src/components/bootstrapThemeSwitch/assets/sun.svg
new file mode 100644
index 0000000..28a8533
--- /dev/null
+++ b/src/components/bootstrapThemeSwitch/assets/sun.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <g transform="scale(0.75 0.75) translate(92 92)" fill="rgba(0,0,0,0.25)">
+        <svg viewBox="0 0 512 512">
+            <!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
+            <path d="M375.7 19.7c-1.5-8-6.9-14.7-14.4-17.8s-16.1-2.2-22.8 2.4L256 61.1 173.5 4.2c-6.7-4.6-15.3-5.5-22.8-2.4s-12.9 9.8-14.4 17.8l-18.1 98.5L19.7 136.3c-8 1.5-14.7 6.9-17.8 14.4s-2.2 16.1 2.4 22.8L61.1 256 4.2 338.5c-4.6 6.7-5.5 15.3-2.4 22.8s9.8 13 17.8 14.4l98.5 18.1 18.1 98.5c1.5 8 6.9 14.7 14.4 17.8s16.1 2.2 22.8-2.4L256 450.9l82.5 56.9c6.7 4.6 15.3 5.5 22.8 2.4s12.9-9.8 14.4-17.8l18.1-98.5 98.5-18.1c8-1.5 14.7-6.9 17.8-14.4s2.2-16.1-2.4-22.8L450.9 256l56.9-82.5c4.6-6.7 5.5-15.3 2.4-22.8s-9.8-12.9-17.8-14.4l-98.5-18.1L375.7 19.7zM269.6 110l65.6-45.2 14.4 78.3c1.8 9.8 9.5 17.5 19.3 19.3l78.3 14.4L402 242.4c-5.7 8.2-5.7 19 0 27.2l45.2 65.6-78.3 14.4c-9.8 1.8-17.5 9.5-19.3 19.3l-14.4 78.3L269.6 402c-8.2-5.7-19-5.7-27.2 0l-65.6 45.2-14.4-78.3c-1.8-9.8-9.5-17.5-19.3-19.3L64.8 335.2 110 269.6c5.7-8.2 5.7-19 0-27.2L64.8 176.8l78.3-14.4c9.8-1.8 17.5-9.5 19.3-19.3l14.4-78.3L242.4 110c8.2 5.7 19 5.7 27.2 0zM256 368a112 112 0 1 0 0-224 112 112 0 1 0 0 224zM192 256a64 64 0 1 1 128 0 64 64 0 1 1 -128 0z"/>
+        </svg>
+    </g>
+</svg>
diff --git a/src/components/bootstrapThemeSwitch/assets/sun_focus.svg b/src/components/bootstrapThemeSwitch/assets/sun_focus.svg
new file mode 100644
index 0000000..0a4ae56
--- /dev/null
+++ b/src/components/bootstrapThemeSwitch/assets/sun_focus.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <g transform="scale(0.75 0.75) translate(92 92)" fill="#86b7fe">
+        <svg viewBox="0 0 512 512">
+            <!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
+            <path d="M375.7 19.7c-1.5-8-6.9-14.7-14.4-17.8s-16.1-2.2-22.8 2.4L256 61.1 173.5 4.2c-6.7-4.6-15.3-5.5-22.8-2.4s-12.9 9.8-14.4 17.8l-18.1 98.5L19.7 136.3c-8 1.5-14.7 6.9-17.8 14.4s-2.2 16.1 2.4 22.8L61.1 256 4.2 338.5c-4.6 6.7-5.5 15.3-2.4 22.8s9.8 13 17.8 14.4l98.5 18.1 18.1 98.5c1.5 8 6.9 14.7 14.4 17.8s16.1 2.2 22.8-2.4L256 450.9l82.5 56.9c6.7 4.6 15.3 5.5 22.8 2.4s12.9-9.8 14.4-17.8l18.1-98.5 98.5-18.1c8-1.5 14.7-6.9 17.8-14.4s2.2-16.1-2.4-22.8L450.9 256l56.9-82.5c4.6-6.7 5.5-15.3 2.4-22.8s-9.8-12.9-17.8-14.4l-98.5-18.1L375.7 19.7zM269.6 110l65.6-45.2 14.4 78.3c1.8 9.8 9.5 17.5 19.3 19.3l78.3 14.4L402 242.4c-5.7 8.2-5.7 19 0 27.2l45.2 65.6-78.3 14.4c-9.8 1.8-17.5 9.5-19.3 19.3l-14.4 78.3L269.6 402c-8.2-5.7-19-5.7-27.2 0l-65.6 45.2-14.4-78.3c-1.8-9.8-9.5-17.5-19.3-19.3L64.8 335.2 110 269.6c5.7-8.2 5.7-19 0-27.2L64.8 176.8l78.3-14.4c9.8-1.8 17.5-9.5 19.3-19.3l14.4-78.3L242.4 110c8.2 5.7 19 5.7 27.2 0zM256 368a112 112 0 1 0 0-224 112 112 0 1 0 0 224zM192 256a64 64 0 1 1 128 0 64 64 0 1 1 -128 0z"/>
+        </svg>
+    </g>
+</svg>