Add new attribute: dropdown-right

packages/theme-switcher/README.md

@@ -121,13 +121,15 @@ A full example can be found in each application in the `index.html` of the `app-
         themes='[{"class": "light-theme", "icon": "sun", "name": "Light Mode"},
         {"class": "dark-theme", "icon": "night", "name": "Dark Mode"}]'>
         </dbp-theme-switcher>` 
-- `darkModeThemeOverride` (optional)
+- `dark-mode-theme-override` (optional)
     - Options:
-      - `darkModeThemeOverride` not set: the theme switcher detects if the browser uses the dark mode and add 
+      - `dark-mode-theme-override` not set: the theme switcher detects if the browser uses the dark mode and add 
          the `dark-theme` class automatically to the body if it is in the themes array and no user preference is set
-      - `darkModeThemeOverride` is set: the theme switcher not detects the browser color mode
-      - `darkModeThemeOverride` is set with a string: e.g.: `darkModeThemeOverride="dunkles-theme`, the theme switcher
+      - `dark-mode-theme-override` is set: the theme switcher not detects the browser color mode
+      - `dark-mode-theme-override` is set with a string: e.g.: `dark-mode-theme-override="dunkles-theme`, the theme switcher
          detects if the browser uses the dark mode and handles the given string as dark mode class
+- `dropdown-right` (optional, default: `false`): boolean which indicates that you want the dropdown from the theme menu on the right side, default on the left side
+  - example: `<dbp-file-source dropdown-right></dbp-file-source>`
       
 
 ## Note

packages/theme-switcher/src/theme-switcher.js

@@ -16,6 +16,7 @@ export class ThemeSwitcher extends ScopedElementsMixin(AdapterLitElement) {
         this.detectBrowserDarkMode = false;
         this.darkModeClass = 'dark-theme';
         this.langDir = '';
+        this.dropdownRight = false;
     }
 
     static get properties() {
@@ -24,6 +25,7 @@ export class ThemeSwitcher extends ScopedElementsMixin(AdapterLitElement) {
             lang: {type: String},
             themes: {type: Array, attribute: 'themes'},
             darkModeThemeOverride: {type: String, attribute: 'dark-mode-theme-override'},
+            dropdownRight: {type: Boolean, attribute: 'dropdown-right'},
             langDir: {type: String, attribute: 'lang-dir'},
         };
     }
@@ -223,6 +225,16 @@ export class ThemeSwitcher extends ScopedElementsMixin(AdapterLitElement) {
             .icon {
                 margin-right: 10px;
             }
+            
+            #theme-menu{
+                position: relative;
+            }
+            
+         
+            .ul-right{
+                right: 0px;
+            };
+
         `;
     }
 
@@ -230,7 +242,7 @@ export class ThemeSwitcher extends ScopedElementsMixin(AdapterLitElement) {
         const i18n = this._i18n;
 
         return html`
-            <div class="${classMap({hidden: this.themes.length <= 1})}">
+            <div id="theme-menu" class="${classMap({hidden: this.themes.length <= 1})}">
                 <a
                     class="mode-button"
                     title="${i18n.t('color-mode')}"
@@ -239,7 +251,7 @@ export class ThemeSwitcher extends ScopedElementsMixin(AdapterLitElement) {
                     }}">
                     <dbp-icon name="contrast"></dbp-icon>
                 </a>
-                <ul class="extended-menu hidden">
+                <ul class="extended-menu hidden ${classMap({'ul-right':this.dropdownRight})}">
                     ${this.themes.map(
                         (theme) => html`
                             <li class="" id="${theme.class}">