From 6da8df49decf22b87424452ffed6244f416aeded Mon Sep 17 00:00:00 2001
From: JAGFx <contact@jagfx.fr>
Date: Sun, 24 Jul 2022 17:39:12 +0200
Subject: [PATCH] :lipstick: #133 add menu section with base design

---
 src/application/ApplicationNext.vue           |  2 +-
 src/application/application.js                |  1 +
 .../components/menu/AboutTab/AboutTab.vue     |  2 +-
 .../components/menu/AboutTab/aboutTab.scss    |  6 --
 .../components/menu/ConfigurationTab.vue      | 91 ++++++++++++++++++-
 src/application/components/menu/Menu.vue      |  2 +-
 src/application/components/menu/menu.scss     |  6 +-
 src/application/components/navbar/Navbar.vue  |  2 +-
 src/application/components/navbar/navbar.scss | 10 ++
 src/application/style/abstracts/_mixins.scss  | 13 +++
 .../style/abstracts/_variables.scss           | 10 +-
 src/application/style/vendors/_bootstrap.scss | 67 +++++++++++++-
 src/application/ui/Button/Button.vue          |  4 +-
 src/application/ui/Button/button.scss         |  6 +-
 src/application/ui/Navlink/navlink.scss       |  4 +-
 src/application/ui/Switch/Switch.vue          | 31 +++++++
 src/application/ui/Switch/switch.scss         | 27 ++++++
 src/application/ui/Tag/Tag.vue                | 11 +++
 src/application/ui/Tag/tag.scss               |  8 ++
 19 files changed, 278 insertions(+), 25 deletions(-)
 create mode 100644 src/application/ui/Switch/Switch.vue
 create mode 100644 src/application/ui/Switch/switch.scss
 create mode 100644 src/application/ui/Tag/Tag.vue
 create mode 100644 src/application/ui/Tag/tag.scss

diff --git a/src/application/ApplicationNext.vue b/src/application/ApplicationNext.vue
index b2609b4..0c805ea 100644
--- a/src/application/ApplicationNext.vue
+++ b/src/application/ApplicationNext.vue
@@ -3,7 +3,7 @@
     <Menu />
   </Navbar>
 
-  <h1 class="bg-gradient-accent">New dashboard</h1>
+  <!--  <h1 class="bg-gradient-accent">New dashboard</h1>-->
   <!--  <p>{{ $t('Skins') }}</p>-->
   <!--  <code>Current locale: {{ currentLocale }}</code-->
   <!--  ><br />-->
diff --git a/src/application/application.js b/src/application/application.js
index a5459e4..c69236b 100644
--- a/src/application/application.js
+++ b/src/application/application.js
@@ -11,6 +11,7 @@ import { createApp } from 'vue';
 //import { createPinia } from 'pinia'
 import AppPlugin from '@/application/plugin.js';
 import Vue3TouchEvents from 'vue3-touch-events';
+import 'bootstrap/js/src/dropdown.js';
 
 library.add(faEarthEurope);
 library.add(faAngleDown);
diff --git a/src/application/components/menu/AboutTab/AboutTab.vue b/src/application/components/menu/AboutTab/AboutTab.vue
index 8cbc6ea..a558f92 100644
--- a/src/application/components/menu/AboutTab/AboutTab.vue
+++ b/src/application/components/menu/AboutTab/AboutTab.vue
@@ -17,7 +17,7 @@
           >
             <h2 class="m-0 mt-2 w-100 text-center">JAGFx</h2>
             <div class="author m-0 mb-2">
-              <span class="text">{{ $t('Author') }}</span>
+              <span class="text-gradient">{{ $t('Author') }}</span>
             </div>
           </div>
           <div
diff --git a/src/application/components/menu/AboutTab/aboutTab.scss b/src/application/components/menu/AboutTab/aboutTab.scss
index 192d77d..b7d107c 100644
--- a/src/application/components/menu/AboutTab/aboutTab.scss
+++ b/src/application/components/menu/AboutTab/aboutTab.scss
@@ -17,12 +17,6 @@
 	.author {
 		font-size: .9rem;
 		overflow: hidden;
-		
-		.text {
-			background-image: $gradient-accent;
-			background-clip: text;
-			-webkit-text-fill-color: transparent;
-		}
 	}
 	
 	.version {
diff --git a/src/application/components/menu/ConfigurationTab.vue b/src/application/components/menu/ConfigurationTab.vue
index 02dc8b6..7cf345d 100644
--- a/src/application/components/menu/ConfigurationTab.vue
+++ b/src/application/components/menu/ConfigurationTab.vue
@@ -1,7 +1,94 @@
 <template>
-  <h1>Configuration</h1>
+  <div>
+    <div class="row my-2 configuration-tab">
+      <div class="col-12">
+        <div class="d-flex-center-center">
+          <input
+            type="search"
+            class="form-control form-control-sm w-100 bg-acrylic"
+            placeholder="Type to search..."
+          />
+          <div class="dropdown dropdown-acrylic mx-1">
+            <button
+              type="button"
+              class="btn btn-acrylic dropdown-toggle d-flex-center-center"
+              data-bs-toggle="dropdown"
+              aria-expanded="false"
+            >
+              <i class="icon-rest_stop"></i>
+            </button>
+            <ul class="dropdown-menu">
+              <li class="d-flex-center-center">
+                <Tag class="dropdown-item">#jagfx</Tag>
+              </li>
+              <li class="d-flex-center-center">
+                <Tag class="dropdown-item">#unit</Tag>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="row my-2 h-100 configuration-tab">
+      <div class="col">
+        <div class="card bg-transparent">
+          <div class="card-body p-0">
+            <div class="list-group">
+              <div class="list-group-item bg-acrylic light text-white">
+                <div class="d-flex-center-center">
+                  <div
+                    class="d-flex justify-content-center align-items-start flex-column w-100"
+                  >
+                    <div
+                      class="d-flex justify-content-start align-items-center"
+                    >
+                      <Tag class="ms-0">#jagfx</Tag>
+                      <span class="mx-1">Lorem ipsum dolor sit amet.</span>
+                    </div>
+                    <small class="text-muted">Lorem ipsum dolor.</small>
+                  </div>
+                  <div>
+                    <Switch />
+                  </div>
+                </div>
+              </div>
+              <div class="list-group-item bg-acrylic light text-white">
+                <div class="d-flex-center-center">
+                  <div
+                    class="d-flex justify-content-center align-items-start flex-column w-100"
+                  >
+                    <div
+                      class="d-flex justify-content-start align-items-center"
+                    >
+                      <Tag class="ms-0">#unit</Tag>
+                      <span class="mx-1">Lorem ipsum dolor sit amet.</span>
+                    </div>
+                    <small class="text-muted">Lorem ipsum dolor.</small>
+                  </div>
+                  <div>
+                    <select
+                      class="form-select form-select-sm"
+                      aria-label="Default select example"
+                    >
+                      <option selected>Open this select menu</option>
+                      <option value="1">One</option>
+                      <option value="2">Two</option>
+                      <option value="3">Three</option>
+                    </select>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
-<script setup></script>
+<script setup>
+import Switch from '@/application/ui/Switch/Switch.vue';
+import Tag from '@/application/ui/Tag/Tag.vue';
+</script>
 
 <style scoped lang="scss"></style>
diff --git a/src/application/components/menu/Menu.vue b/src/application/components/menu/Menu.vue
index 86099f9..d904990 100644
--- a/src/application/components/menu/Menu.vue
+++ b/src/application/components/menu/Menu.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="menu d-flex flex-column h-100 container-fluid">
-    <div class="row my-2">
+    <div class="row">
       <div class="col">
         <nav class="nav nav-pills d-flex-center-center my-2">
           <Navlink
diff --git a/src/application/components/menu/menu.scss b/src/application/components/menu/menu.scss
index 73c1cd7..3188691 100644
--- a/src/application/components/menu/menu.scss
+++ b/src/application/components/menu/menu.scss
@@ -1,3 +1,7 @@
 @import "../../style/abstracts/variables";
 @import "../../style/abstracts/mixins";
-@import "../../style/vendors/bootstrap";
\ No newline at end of file
+@import "../../style/vendors/bootstrap";
+
+.menu {
+	overflow-x: auto;
+}
\ No newline at end of file
diff --git a/src/application/components/navbar/Navbar.vue b/src/application/components/navbar/Navbar.vue
index 49c20be..89d456b 100644
--- a/src/application/components/navbar/Navbar.vue
+++ b/src/application/components/navbar/Navbar.vue
@@ -2,7 +2,7 @@
   <div
     class="d-flex w-100 h-100 flex-column fixed-top"
     :class="{
-      'bg-acrylic': menuIsShown
+      'menu-is-shown': menuIsShown
     }"
   >
     <Transition name="fade" mode="out-in">
diff --git a/src/application/components/navbar/navbar.scss b/src/application/components/navbar/navbar.scss
index b94cc46..9a12667 100644
--- a/src/application/components/navbar/navbar.scss
+++ b/src/application/components/navbar/navbar.scss
@@ -1,13 +1,23 @@
 @import "../../style/abstracts/variables";
 @import "../../style/abstracts/effects";
+@import "../../style/abstracts/mixins";
 @import "../../style/vendors/bootstrap";
 
+.menu-is-shown {
+	background: $color-black;
+	
+	@supports (backdrop-filter: blur(30px)) {
+		@include background-acrylic;
+	}
+}
+
 nav.navbar {
 	.navbar-brand {
 		border-radius: $border-radius;
 		background: $gradient-accent;
 		padding-left: 1rem;
 		padding-right: 1rem;
+		font-size: 1.6rem;
 	}
 }
 
diff --git a/src/application/style/abstracts/_mixins.scss b/src/application/style/abstracts/_mixins.scss
index bc20310..39030de 100644
--- a/src/application/style/abstracts/_mixins.scss
+++ b/src/application/style/abstracts/_mixins.scss
@@ -1,3 +1,5 @@
+@import "variables";
+
 @mixin border-gradient( $color, $width ) {
 	position: relative;
 	
@@ -14,4 +16,15 @@
 		mask-composite: xor;
 		mask-composite: exclude;
 	}
+}
+
+@mixin background-acrylic(){
+	background: $color-white-transparent-10;
+	border: none;
+	box-shadow: rgb(37 43 54 / 3%) 10px 10px 10px;
+	
+	@supports (backdrop-filter: blur(30px)) {
+		background: rgba($color-white, 0.05);
+		backdrop-filter: blur(30px);
+	}
 }
\ No newline at end of file
diff --git a/src/application/style/abstracts/_variables.scss b/src/application/style/abstracts/_variables.scss
index 0698897..edcb30c 100644
--- a/src/application/style/abstracts/_variables.scss
+++ b/src/application/style/abstracts/_variables.scss
@@ -3,6 +3,8 @@
 $color-black: #122333;
 $color-black-2:  #272727;
 $color-black-light-5: color.adjust($color-black, $lightness: 5%);
+$color-black-light-15: color.adjust($color-black, $lightness: 15%);
+$color-black-light-30: color.adjust($color-black, $lightness: 30%);
 $color-black-transparent-high: color.adjust($color-black, $lightness: 3%);
 $color-white: #eee8d5;
 $color-white-2: #eaeaea;
@@ -15,8 +17,14 @@ $color-yellow: #f5bb00;
 $color-blue: #26d2e2;
 $color-accent-1: #4967ff;
 $color-accent-2: #00f6f5;
+$color-white-transparent-25: rgba($color-white, 0.25);
+$color-white-transparent-90: rgba($color-white, 0.9);
+$color-white-transparent-10: rgba($color-white, 0.10);
+$color-accent-2-transparent-25: rgba($color-accent-2, 0.25);
+$color-accent-2-transparent-10: rgba($color-accent-2, 0.10);
+$color-acrylic-compatibility: #293744;
 $gradient-accent: linear-gradient(-45deg, $color-accent-1, $color-accent-2);
-$border-radius: 5rem;
+$border-radius: 1.1rem;
 $input-btn-padding-y: 0.375rem;
 $button-width-open: 9rem;
 $button-width-close: 2rem;
diff --git a/src/application/style/vendors/_bootstrap.scss b/src/application/style/vendors/_bootstrap.scss
index 1700e87..bacb51b 100644
--- a/src/application/style/vendors/_bootstrap.scss
+++ b/src/application/style/vendors/_bootstrap.scss
@@ -1,22 +1,38 @@
+@use "sass:color";
+
 @import "../abstracts/variables";
+@import "../abstracts/mixins";
 @import "bootstrap/scss/functions";
 
 // <editor-folder> Custom variables
 $body-bg: $color-black;
 $body-color: $color-white;
 $primary: $color-accent-2;
+$secondary: $color-accent-1;
 $dark: $color-black;
 $black: $color-black;
+$text-muted: $color-white-transparent-25;
 $badge-padding-x: 0;
 $badge-padding-y: 0;
 $badge-color: $color-accent-1;
 $nav-link-color: $color-white;
-$nav-link-hover-color: $color-accent-1;
+$nav-link-hover-color: $color-white;
 $nav-pills-link-active-color: $color-white;
 $nav-pills-border-radius: $border-radius;
+$nav-link-padding-y: .25rem;
 $card-border-width: 0;
 $btn-padding-x: 0;
 $btn-padding-y: 0;
+$border-radius-sm: $border-radius;
+$input-bg: $color-white-transparent-10;
+$input-border-color: transparent;
+$input-placeholder-color: $text-muted;
+$input-focus-border-color: transparent;
+$form-switch-color: $color-white;
+$form-select-indicator-color: $color-white-transparent-25;
+$dropdown-padding-x: .25rem;
+$dropdown-border-color: transparent;
+$dropdown-font-size: .875rem;
 
 // $theme-colors: (
 //	"accent-1": $color-accent-1,
@@ -39,6 +55,9 @@ $btn-padding-y: 0;
 @import "bootstrap/scss/nav";
 @import "bootstrap/scss/card";
 @import "bootstrap/scss/buttons";
+@import "bootstrap/scss/list-group";
+@import "bootstrap/scss/forms";
+@import "bootstrap/scss/dropdown";
 
 // Helpers
 @import "bootstrap/scss/helpers";
@@ -55,10 +74,7 @@ $btn-padding-y: 0;
 }
 
 .bg-acrylic {
-	background-color: rgba($color-black, 0.2);
-	border-color: initial;
-	box-shadow: rgb(37 43 54 / 3%) 10px 10px 10px;
-	backdrop-filter: blur(30px);
+	@include background-acrylic;
 }
 
 .text-accent-1 {
@@ -73,6 +89,47 @@ $btn-padding-y: 0;
 	color: $color-black;
 }
 
+.text-gradient {
+	background-image: $gradient-accent;
+	background-clip: text;
+	-webkit-text-fill-color: transparent;
+}
+
+.btn.btn-acrylic {
+	@include background-acrylic;
+	
+	@supports not (backdrop-filter: blur(30px)) {
+		@include button-variant(
+			$color-acrylic-compatibility,
+			transparent,
+			$color-white,
+			$hover-color:$color-white,
+			$active-color: $color-white
+		);
+	}
+	
+	@supports (backdrop-filter: blur(30px)) {
+		@include button-variant(
+			$color-white-transparent-10,
+			transparent,
+			$color-white,
+			$hover-color:$color-white,
+			$active-color: $color-white
+		);
+	}
+	
+	&.dropdown-toggle {
+		padding: 0.3rem 0.5rem;
+		font-size: 1.2rem;
+	}
+}
+
+.dropdown.dropdown-acrylic{
+	.dropdown-menu {
+		background: $color-acrylic-compatibility;
+	}
+}
+
 .d-flex-center-center {
 	display: flex;
 	justify-content: center;
diff --git a/src/application/ui/Button/Button.vue b/src/application/ui/Button/Button.vue
index 30b1f89..8fdaa5b 100644
--- a/src/application/ui/Button/Button.vue
+++ b/src/application/ui/Button/Button.vue
@@ -2,7 +2,7 @@
   <a
     v-if="asLink"
     :href="href"
-    class="btn btn-dark mx-1 my-1 d-flex-center-center"
+    class="btn btn-acrylic mx-1 my-1 d-flex-center-center"
     :class="{
       animate: hover,
       left: side === 'left',
@@ -23,7 +23,7 @@
   </a>
   <button
     v-else
-    class="btn btn-dark mx-1 my-1 d-flex-center-center"
+    class="btn btn-acrylic mx-1 my-1 d-flex-center-center"
     :class="{
       animate: hover,
       left: side === 'left',
diff --git a/src/application/ui/Button/button.scss b/src/application/ui/Button/button.scss
index a331847..a22b7ad 100644
--- a/src/application/ui/Button/button.scss
+++ b/src/application/ui/Button/button.scss
@@ -9,8 +9,8 @@
 	width: $button-width-close;
 	
 	.icon {
-		background: $gradient-accent;
-		border-radius: 5rem;
+		background: $color-white-transparent-25;
+		border-radius: $border-radius;
 		padding: 0.5rem;
 		color: $color-white;
 		z-index: 1;
@@ -68,7 +68,7 @@
 		
 		&.toggle {
 			.icon {
-				background: $color-black !important;
+				background: $color-white-transparent-25 !important;
 			}
 			
 			&:hover, &:active, &.active {
diff --git a/src/application/ui/Navlink/navlink.scss b/src/application/ui/Navlink/navlink.scss
index ffe02f3..9532b3f 100644
--- a/src/application/ui/Navlink/navlink.scss
+++ b/src/application/ui/Navlink/navlink.scss
@@ -2,7 +2,9 @@
 @import "../../style/vendors/bootstrap";
 
 .nav-item > .nav-link{
-	background: $color-black-light-5;
+	background: $color-white-transparent-10;
+	box-shadow: rgb(37 43 54 / 3%) 10px 10px 10px;
+	backdrop-filter: blur(30px);
 	
 	i[class^=icon] {
 		font-size: 1.4rem;
diff --git a/src/application/ui/Switch/Switch.vue b/src/application/ui/Switch/Switch.vue
new file mode 100644
index 0000000..1f42328
--- /dev/null
+++ b/src/application/ui/Switch/Switch.vue
@@ -0,0 +1,31 @@
+<template>
+  <button
+    class="btn switch d-flex justify-content-between align-items-center"
+    :class="{
+      'flex-row-reverse': !currentState,
+      enabled: currentState
+    }"
+    @click="switchState"
+  >
+    <small v-if="currentState" class="mx-2 text-uppercase">On</small>
+    <small v-else class="mx-2 text-uppercase text-off">Off</small>
+    <div class="dot">&nbsp;</div>
+  </button>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const emits = defineEmits(['change']);
+
+const currentState = ref(false);
+
+const switchState = () => {
+  currentState.value = !currentState.value;
+  emits('change', currentState.value);
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'switch';
+</style>
diff --git a/src/application/ui/Switch/switch.scss b/src/application/ui/Switch/switch.scss
new file mode 100644
index 0000000..913a3ef
--- /dev/null
+++ b/src/application/ui/Switch/switch.scss
@@ -0,0 +1,27 @@
+@import "../../style/abstracts/variables";
+@import "../../style/vendors/bootstrap";
+
+.btn.switch {
+	background: $color-white-transparent-10;
+	
+	.text-off {
+		color: $color-white-transparent-25;
+	}
+	
+	.dot {
+		background: $color-white-transparent-25;
+		border-radius: $border-radius;
+		padding: 0.5rem;
+		z-index: 1;
+		width: 1.3rem;
+		height: 1.3rem;
+	}
+	
+	&.enabled {
+		background: $gradient-accent;
+		
+		.dot {
+			background: $color-white;
+		}
+	}
+}
\ No newline at end of file
diff --git a/src/application/ui/Tag/Tag.vue b/src/application/ui/Tag/Tag.vue
new file mode 100644
index 0000000..e917bf8
--- /dev/null
+++ b/src/application/ui/Tag/Tag.vue
@@ -0,0 +1,11 @@
+<template>
+  <small class="tag badge text-white m-1 p-1">
+    <slot />
+  </small>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+@import 'tag';
+</style>
diff --git a/src/application/ui/Tag/tag.scss b/src/application/ui/Tag/tag.scss
new file mode 100644
index 0000000..0be4961
--- /dev/null
+++ b/src/application/ui/Tag/tag.scss
@@ -0,0 +1,8 @@
+@import "../../style/abstracts/variables";
+@import "../../style/vendors/bootstrap";
+
+.tag {
+	font-size: .6rem;
+	background: $color-accent-2-transparent-25;
+	border: 1px solid $color-accent-2-transparent-10;
+}
\ No newline at end of file