added settings Page and components

layouts/Navigationbar.vue

@@ -1,7 +1,7 @@
 <template>
   <aside
     :class="['navbar', darkMode ? 'navbar-darkmode' : 'navbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
-    <div class="toggle">
+    <div class="toggleNavbar">
       <div v-if="isExpanded" :class="['icon', darkMode ? 'back-darkmode' : 'back-lightmode']" id="back-icon">
         <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/Back-Icon.svg" />
       </div>
@@ -142,7 +142,7 @@ aside.is-expanded {
 }
 
 
-.toggle {
+.toggleNavbar {
   display: flex;
   flex-direction: row;
   height: 2.5rem;
@@ -237,6 +237,13 @@ a {
   transition: 0.2s ease-out;
 }
 
+.back-darkmode:hover,
+.back-lightmode:hover,
+.indicator-darkmode:hover,
+.indicator-lightmode:hover {
+  cursor: pointer;
+}
+
 
 img {
   width: 1.25rem;
@@ -267,4 +274,5 @@ img {
 
 .label-lightmode {
   color: #000000;
-}</style>
+}
+</style>