adding theme support advanced

updated readme
updated social media logos

Author: prabhuignoto

README.md

@@ -5,9 +5,7 @@
 ![Snyk Vulnerabilities for GitHub Repo](https://img.shields.io/snyk/vulnerabilities/github/prabhuignoto/float-menu)
 [![Depfu](https://badges.depfu.com/badges/3597df88718d346a7b41f08e31fe1331/overview.svg)](https://depfu.com/github/prabhuignoto/float-menu?project_id=15010)
 
-![logo](./readme-assets/logo.png)
-
->Customizable Floating Menu for Vue 3
+![logo](./readme-assets/social-media-logo-small.png)
 
 ![app-home](./readme-assets/app-home.png)
 
@@ -104,6 +102,7 @@ export default {
 | menu-data        | Object   | Array data to generate the nested menu's.                                                                                        |
 | on-selected      | Function | Hook that is called on selection.                                                                                                |
 | flip-on-edges    | Boolean  | Flips the Menu content automatically, when there is no space to display nested menus.                                            |
+| theme            | Object   | prop to customize the color schemes. refer [theme](#theme) for usage.                                                            |
 
 ### Dimension
 
@@ -160,6 +159,7 @@ prop to set the `height` and `width` of the menu.
     :menu-dimension="{height: 400, width: 300}"
     position="bottom right"
     menu-orientation="bottom"
+  >
     <BoxIcon />
   </float-menu>
 ```
@@ -206,7 +206,8 @@ const menuData = [
     :menu-dimension="{height: 400, width: 300}"
     :menu-data="menuData"
     position="bottom right"
-    menu-orientation="bottom">
+    menu-orientation="bottom"
+  >
     <BoxIcon />
   </float-menu>
 ```
@@ -224,7 +225,8 @@ hook for the menu item selection event.
     :menu-dimension="{height: 400, width: 300}"
     :menu-data="{items: [{name: 'File'}, {name: 'Open'}]}"
     on-select="handleSelection"
-    menu-orientation="bottom">
+    menu-orientation="bottom"
+  >
     <BoxIcon />
   </float-menu>
 ```
@@ -239,7 +241,8 @@ setting this prop `flips` the menu content on the right edges of the screen. Thi
     position="bottom right"
     flip-on-edges
     on-select="handleSelection"
-    menu-orientation="bottom">
+    menu-orientation="bottom"
+  >
     <BoxIcon />
   </float-menu>
 ```
@@ -254,24 +257,47 @@ To customize the Menu Icon, simply pass any content in between the `float-menu`
   <float-menu
     :dimension=50
     :menu-data="menuData"
-    menu-orientation="bottom">
+    menu-orientation="bottom"
+  >
     <BoxIcon />
   </float-menu>
 ```
 
-and here we render a custom text inside the Menu handle
+and here we render a text `Click` inside the Menu handle
 
 ```sh
   <float-menu
     :dimension=50
     :menu-data="menuData"
-    menu-orientation="bottom">
-    Click Me
+    menu-orientation="bottom"
+  >
+    Click
   </float-menu>
 ```
 
 ![example2](./readme-assets/example2.png)
 
+### Theme
+
+Customize the color schemes with the `theme` prop.
+
+```sh
+  <float-menu
+    :dimension=50
+    :theme="{
+      primary: '#00539C',
+      textColor: '#000',
+      menuBgColor: '#fff',
+      textSelectedColor: '#fff',
+    }"
+    menu-orientation="bottom"
+  >
+    Click
+  </float-menu>
+```
+
+![theme](./readme-assets/theme.png)
+
 ## Build Setup
 
 ``` bash

readme-assets/social-media-logo-small.png

@@ -1,5 +1,4 @@
 $black: #000;
-$blue: #0080ff;
 $white: #fff;
 $light-gray: #e5e5e5;
 $shadow: rgba(0, 0, 0, 0.2) 2px 2px 10px 2px;
@@ -14,8 +13,7 @@ $shadow: rgba(0, 0, 0, 0.2) 2px 2px 10px 2px;
 
 .sub-menu-wrapper {
   animation: show 0.2s ease-in;
-  background: $white;
-  border-radius: 0.25rem;
+  border-radius: 0.5rem;
   box-shadow: $shadow;
   left: 102%;
   min-width: 150px;
@@ -44,31 +42,37 @@ $shadow: rgba(0, 0, 0, 0.2) 2px 2px 10px 2px;
 
 .menu-list-item {
   align-items: center;
-  color: $black;
+  color: var(--menu-text-color);
   cursor: pointer;
   display: flex;
   font-size: 0.9rem;
   height: 2.5rem;
   justify-content: flex-start;
   position: relative;
   width: 100%;
+  background: var(--menu-background);
 
   &:not(:last-child) {
     border-bottom: 1px solid $light-gray;
   }
 
   &:first-child {
-    border-top-left-radius: 0.25rem;
-    border-top-right-radius: 0.25rem;
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+  }
+
+  &:last-child {
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
   }
 
   &.selected {
     background: var(--background);
-    color: $white;
+    color: var(--text-selected-color);
   }
 
   &:hover:not(.selected) {
-    background: $light-gray;
+    background: rgba(0, 0, 0, 0.1);
     color: $black;
   }
 

readme-assets/social-media-logo.png

@@ -1,6 +1,11 @@
 <template>
-  <div class="menu-wrapper">
-    <ul class="menu-list">
+  <div
+    class="menu-wrapper"
+  >
+    <ul
+      class="menu-list"
+      :style="getTheme"
+    >
       <li
         v-for="item of menuItems"
         :key="item.id"
@@ -13,18 +18,20 @@
         <span class="name">{{ item.name }}</span>
         <span
           v-if="item.subMenu"
-          class="chev-icon"
+          class="chev-icon" 
         >
           <ChevRightIcon />
         </span>
         <span
           v-if="item.subMenu && item.showSubMenu"
           class="sub-menu-wrapper"
+          :style="getTheme"
         >
           <component
             :is="SubMenuComponent"
             :data="item.subMenu.items"
             :on-selection="onSelection"
+            :theme="theme"
           />
         </span>
       </li>
@@ -74,9 +81,19 @@ export default defineComponent({
       default: null,
     },
     theme: {
-      type: Object as PropType<{ primary: string }>,
+      type: Object as PropType<{
+        primary: string;
+        textColor: string;
+        menuBgColor: string;
+        textSelectedColor: string;
+      }>,
       required: false,
-      default: { primary: "#0080ff" },
+      default: {
+        primary: "#0080ff",
+        textColor: "#000",
+        menuBgColor: "#fff",
+        textSelectedColor: "#fff",
+      },
     },
   },
   setup(props) {
@@ -115,6 +132,9 @@ export default defineComponent({
 
     const getTheme = computed(() => ({
       "--background": props.theme.primary,
+      "--menu-background": props.theme.menuBgColor,
+      "--menu-text-color": props.theme.textColor,
+      "--text-selected-color": props.theme.textSelectedColor,
     }));
 
     return {

readme-assets/social-media-logo.svg

@@ -41,7 +41,7 @@ $cubic: cubic-bezier(0.25, 0.46, 0.45, 0.94);
 
 .menu-container {
   align-items: flex-start;
-  border-radius: 0.45rem;
+  border-radius: 6px;
   box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 10px 2px;
   display: flex;
   justify-content: flex-start;

readme-assets/theme.png

@@ -106,9 +106,19 @@ export default defineComponent({
       default: false,
     },
     theme: {
-      type: Object as PropType<{ primary: string }>,
+      type: Object as PropType<{
+        primary: string;
+        textColor: string;
+        menuBgColor: string;
+        textSelectedColor: string;
+      }>,
       required: false,
-      default: { primary: "#0080ff" },
+      default: {
+        primary: "#0080ff",
+        textColor: "#000",
+        menuBgColor: "#fff",
+        textSelectedColor: "#fff",
+      },
     },
   },
   setup(props, { slots }) {

src/components/Menu.scss

@@ -6,6 +6,12 @@
       :menu-data="items"
       :on-selected="handleSelection"
       :flip-on-edges="true"
+      :theme="{
+        primary: '#00539C',
+        textColor: '#000',
+        menuBgColor: '#fff',
+        textSelectedColor: '#fff',
+      }"
       menu-orientation="bottom"
     >
       <BoxIcon />