feat(navigation-bar): add theme- and language-buttons to mobile-menu

src/app/core/components/navigation-bar/navigation-bar.html

@@ -51,8 +51,24 @@
                 <a routerLink="/projects" routerLinkActive="active" (click)="showMobileMenu.set(false)">
                     {{ 'common.projects' | translate }}
                 </a>
+                <hr class="h-[1px] w-[80%] bg-(--content-color) mx-auto"/>
+                <div class="options flex flex-row gap-[10px] items-center justify-center">
+                    @if (themeSwitchService.darkMode()) {
+                        <div class="dark-mode size-[50px]" (click)="themeSwitchService.switchToLight()">
+                            <fa-icon [icon]="faMoon"/>
+                        </div>
+                    } @else {
+                        <div class="dark-mode size-[50px]" (click)="themeSwitchService.switchToDark()">
+                            <fa-icon [icon]="faSun"/>
+                        </div>
+                    }
+                    <div class="language size-[50px]" (click)="toggleLanguage()">
+                        {{ translateService.getCurrentLang().toUpperCase() }}
+                    </div>
+                </div>
             </li>
         </ul>
+
     </div>
     <div class="block md:hidden w-full h-full fixed top-0 left-0 z-40 backdrop-blur-md"></div>
 }

src/app/core/components/navigation-bar/navigation-bar.scss

@@ -1,5 +1,4 @@
-nav {
+.options > div {
-    .options > div {
         display: grid;
         place-items: center;
         cursor: pointer;
@@ -8,14 +7,13 @@ nav {
         transition: border .5s ease;
 
         &:hover {
-            border-color: var(--content-hover-background);
+            border-color: rgb(from var(--content-color) r g b / 0.5);
         }
 
         &:active {
-            border-color: var(--content-border-color);
+            border-color: var(--content-color);
         }
     }
-}
 
 ul li a {
     display: block;