diff --git a/src/components/CloudGroups.vue b/src/components/CloudGroups.vue
index 9727ac6..aabc171 100644
--- a/src/components/CloudGroups.vue
+++ b/src/components/CloudGroups.vue
@@ -1,24 +1,7 @@
-<script setup lang="ts">
-import { CloudGroupServcType } from '~/typs/clouds'
-const props = defineProps<{
-  groups: Map<string, Map<string, CloudGroupServcType>>
-  search: string
-  target: string
-  title: string
-  hide: boolean
-}>()
-const emit = defineEmits(['onCloudGroup'])
-const on_group_item = (target: string, event: Event) => {
-  event.preventDefault()
-  event.stopImmediatePropagation()
-  event.stopPropagation()
-  emit('onCloudGroup', target)
-}
-</script>
 <template>
-  <div :id="props.target" class="border-t-gray-800 border-opacity-90 bg-light-600 w-full p-4 mt-4 md:mt-2 rounded-l">
-    <div class="flex flex justify-between text-2xl bg-light-800 p-3 rounded-xl" @click="on_group_item(props.target,$event)">
-      <div class=""> {{ props.title }} </div>
+  <div :id="props.target" class="border-t-gray-800 border-opacity-90 bg-light-600 dark:bg-gray-600 w-full p-4 mt-4 md:mt-2 rounded-l">
+    <div class="flex flex justify-between text-2xl bg-light-800 dark:bg-gray-400 p-3 rounded-xl" @click="on_group_item(props.target,$event)">
+      <div class="dark:text-white"> {{ props.title }} </div>
       <svg v-show="props.hide" class="fill-current" viewBox="0 0 24 24" width="24" height="24">
 				<path
 						class="heroicon-ui"
@@ -43,21 +26,36 @@ const on_group_item = (target: string, event: Event) => {
           class="flex flex-wrap -mx-2 pb-8"
         >
           <CloudServices
-            v-if="props.target === 'tsksrvcs' && srvr.tsksrvcs && srvr.tsksrvcs.length >0"
-            :source="srvr.tsksrvcs"
-            :target="props.target"
-            :filter="props.search"
-            :hostname="srvr.hostname"
-          />
-          <CloudServices
-            v-if="props.target === 'appsrvcs' && srvr.appsrvcs && srvr.appsrvcs.length >0"
-            :source="srvr.appsrvcs"
+            :source="props.target === 'tsksrvcs' ? srvr.tsksrvcs : srvr.appsrvcs"
             :target="props.target"
             :filter="props.search"
             :hostname="srvr.hostname"
+						@on-cloud-server-item="onCloudServiceItem"
           />
         </div>
       </div>
     </div>
   </div>
 </template>
+<script setup lang="ts">
+import { CloudGroupServcType,SrvcInfoType } from '~/typs/clouds'
+const props = defineProps<{
+  groups: Map<string, Map<string, CloudGroupServcType>>
+  search: string
+  target: string
+  title: string
+  hide: boolean
+}>()
+const emit = defineEmits(['onCloudGroup'])
+const on_group_item = (target: string, event: Event) => {
+  event.preventDefault()
+  event.stopImmediatePropagation()
+  event.stopPropagation()
+  emit('onCloudGroup', target)
+}
+const onCloudServiceItem = (item: SrvcInfoType) => {
+	if (item) {
+		// console.log(item)
+	}
+}
+</script>
\ No newline at end of file
diff --git a/src/components/CloudServices.vue b/src/components/CloudServices.vue
index 6651639..baaa96f 100644
--- a/src/components/CloudServices.vue
+++ b/src/components/CloudServices.vue
@@ -1,4 +1,58 @@
-
+<template>
+	<div class="shape-wrapper flex flex-wrap xyz-in" xyz="fade flip-up flip-left" v-if="props.source && props.source.length > 0">
+		<div
+			v-for="(item ,srvcindex) in props.source"
+			:key="`grp_${srvcindex}`"
+			class="shape w-1/2 md:w-1/4 lg:w-1/6 xl:w-1/7 font-light dark:bg-gray-200 bg-gray-300"
+			:class="{hidden: !filter_item(item)}"
+			@click="on_item(item,$event)"
+		>
+			<div
+				class="flex bg-white dark:bg-gray-300 rounded-lg shadow-md m-2 border-l-4 border-gray-500 dark:border-gray-500 hover:shadow-2xl hover:border-pink-500 cursor-pointer relative"
+			>
+				<div class=" p-4 pr-6 leading-normal">
+					<div class="font-medium text-xl truncate">
+						{{ item.name }}
+					</div>
+					<div
+						class="truncate text-xs text-gray-500 font-semibold pt-1 pb-2 tracking-widest"
+						v-html="map_srvc_target(item.srvc.target)"
+					>
+					</div>
+					<div class="flex font-medium">
+						<div v-if="authData.auth !== ''" class="flex-grow text-gray-400">
+							{{ item.srvc.req || 'tcp' }}
+						</div>
+						<div
+							class="flex-grow-0"
+							:class="{ 'text-indigo-500' : item.info === 'ok' , 'text-red-600' : item.info !== 'ok' && item.srvc.critical === CriticalType.yes, 'text-green-500': item.info !== 'ok' && item.srvc.critical !== CriticalType.yes}"
+						>
+							<span v-if="item.info === 'ok'" class="text-2xl">
+								<carbon-checkmark class="align-bottom" />
+							</span>
+							<span v-else class="ml-3">
+								<span v-if="authData.auth === '' && (item.srvc.critical === CriticalType.ifresized || item.srvc.critical === CriticalType.cloud) ">
+									{{ item.info }} <span class="ml-3">{{ t('srvc.pending','pending')}}</span>
+								</span>
+								<span v-else>
+									{{ item.info }} <span v-if="item.srvc.critical !== CriticalType.yes" class="ml-3">{{ item.srvc.critical }}</span>
+								</span>
+							</span>
+						</div>
+					</div>
+					<div v-if="authData.auth !== ''" class="flex mt-2 font-medium">
+						<div v-if="item.srvc.path" class="flex-grow-0 text-1xl text-blue-600 hover:text-blue-700 mr-2 block" :data="item.srvc.path">
+							<carbon-script class="inline-block" />
+						</div>
+						<div v-if="item.srvc.liveness" class="flex-grow text-xs text-blue-600 hover:text-blue-700 block" :data="item.srvc.liveness">
+							{{ item.srvc.liveness }}
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
 <script setup lang="ts">
 import {
   SrvcInfoType,
@@ -8,12 +62,20 @@ import {
 import { auth_data } from '~/hooks/utils'
 const { t } = useI18n()
 
+let shapWrapper = document.querySelector(".shape-wrapper");
 const props = defineProps<{
   source: SrvcInfoType[]
   hostname: string
   target: string
   filter: string
 }>()
+const emit = defineEmits(['onCloudServiceItem'])
+const on_item = (item: SrvcInfoType, event: Event) => {
+  event.preventDefault()
+  event.stopImmediatePropagation()
+  event.stopPropagation()
+  emit('onCloudServiceItem', item)
+}
 const authData = auth_data()
 // TODO review https://medium.com/@KevinBGreene/typescript-enums-and-polymorphism-with-type-matching-fc3dc74b031c
 const critical_matches = (val: CriticalType, match: string): boolean => {
@@ -33,7 +95,7 @@ const critical_matches = (val: CriticalType, match: string): boolean => {
   }
 }
 const map_srvc_target = (srvc_target: string): string => {
-	return srvc_target ? t(`srvc.${srvc_target}`,srvc_target).replace('::','<br>') : (authData.auth !== '' && props.hostname || '')
+	return srvc_target ? srvc_target.replace('::','<br>') : (authData.auth !== '' && props.hostname || '')
 }
 const filter_item = (item: SrvcInfoType): boolean => {
   if (authData.auth !== '') 
@@ -44,56 +106,29 @@ const filter_item = (item: SrvcInfoType): boolean => {
 	  return  props.filter === '' || item.name.includes(props.filter) || item.srvc.target.includes(props.filter)
       || item.info.includes(props.filter)
 }
+onMounted(() => {
+	shapWrapper = document.querySelector(".shape-wrapper");
+	function animate(selector: Element|null) {
+		if (selector && selector.classList.contains("xyz-in")) {
+			selector.classList.remove("xyz-in");
+			selector.classList.add("xyz-out");
+		} else if (selector) {
+			selector.classList.remove("xyz-out");
+			selector.classList.add("xyz-in");
+		}
+	}
+
+	animate(shapWrapper);
+})
 </script>
-<template>
-  <div
-    v-for="(item ,srvcindex) in props.source"
-    :key="`grp_${srvcindex}`"
-    class="w-1/2 md:w-1/4 lg:w-1/6 xl:w-1/7 font-light"
-    :class="{hidden: !filter_item(item)}"
-  >
-    <div
-      class="flex bg-white rounded-lg shadow-md m-2 border-l-4 border-white hover:shadow-2xl hover:border-pink-500 cursor-pointer relative"
-    >
-      <div class=" p-4 pr-6 leading-normal">
-        <div class="font-medium text-xl truncate">
-          {{ item.name }}
-        </div>
-        <div
-          class="truncate text-xs text-gray-500 font-semibold pt-1 pb-2 tracking-widest"
-          v-html="map_srvc_target(item.srvc.target)"
-        >
-        </div>
-        <div class="flex font-medium">
-          <div v-if="authData.auth !== ''" class="flex-grow text-gray-400">
-            {{ item.srvc.req || 'tcp' }}
-          </div>
-          <div
-            class="flex-grow-0"
-            :class="{ 'text-indigo-500' : item.info === 'ok' , 'text-red-600' : item.info !== 'ok' && item.srvc.critical === CriticalType.yes, 'text-green-500': item.info !== 'ok' && item.srvc.critical !== CriticalType.yes}"
-          >
-            <span v-if="item.info === 'ok'" class="text-2xl">
-              <carbon-checkmark class="align-bottom" />
-            </span>
-            <span v-else class="ml-3">
-						  <span v-if="authData.auth === '' && (item.srvc.critical === CriticalType.ifresized || item.srvc.critical === CriticalType.cloud) ">
-                {{ item.info }} <span class="ml-3">{{ t('srvc.pending','pending')}}</span>
-							</span>
-							<span v-else>
-                {{ item.info }} <span v-if="item.srvc.critical !== CriticalType.yes" class="ml-3">{{ item.srvc.critical }}</span>
-							</span>
-            </span>
-          </div>
-        </div>
-        <div v-if="authData.auth !== ''" class="flex mt-2 font-medium">
-          <div v-if="item.srvc.path" class="flex-grow-0 text-1xl text-blue-600 hover:text-blue-700 mr-2 block" :data="item.srvc.path">
-            <carbon-script class="inline-block" />
-          </div>
-          <div v-if="item.srvc.liveness" class="flex-grow text-xs text-blue-600 hover:text-blue-700 block" :data="item.srvc.liveness">
-            {{ item.srvc.liveness }}
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
+<style>
+.shape-wrapper {
+  justify-content: center;
+}
+.shape {
+  width: auto;
+  height: auto;
+  margin: 1rem;
+  border-radius: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 61db7f2..4e8bf59 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -1,16 +1,146 @@
-<script setup lang="ts">
-import { isDark, toggleDark } from '~/logic'
-</script>
-
 <template>
-  <nav class="text-xl mt-6">
-    <button class="icon-btn mx-2 !outline-none" @click="toggleDark">
-      <carbon-moon v-if="isDark" />
-      <carbon-sun v-else />
-    </button>
-
-    <a class="icon-btn mx-2" rel="noreferrer" href="https://github.com/antfu/vitesse-lite" target="_blank" title="GitHub">
-      <carbon-logo-github />
-    </a>
+  <nav class="text-xl mt-6  dark:bg-cool-gray-800 dark:text-white">
+    <span
+      v-for="(itm,index) in footerMenuCentral"
+      :key="`${String(index)}-${itm.title}`"
+      class="icon-btn mx-2"
+    >
+      <router-link v-if="itm.type === NavItemType.router_link && itemIf(itm)" :to="itm.to">
+        <span v-if="itm.to === '/'"> <carbon-campsite /> </span>
+        <span v-if="itm.to === '/login'"> <carbon-login /> </span>
+        <span v-if="itm.to === '/about'"> <carbon-dicom-overlay /> </span>
+      </router-link>
+      <a v-if="itm.type == NavItemType.app_link" :title="t(itm.title)" @click="itemClick(itm || '')">
+        <span v-if="itm.vif && itm.vif === 'isDark'" class="icon">
+          <svg
+            v-if="isDark"
+            aria-hidden="true"
+            focusable="false"
+            data-prefix="fal"
+            data-icon="cloud-sun"
+            class="svg-inline--fa fa-cloud-sun fa-w-20 dark:text-white text-blue-400 w-7"
+            style="margin-top: -0.8em"
+            role="img"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 640 512"
+          ><path fill="currentColor" d="M543.7 304.3C539.8 259.4 502 224 456 224c-17.8 0-34.8 5.3-49.2 15.2-22.5-29.5-57.3-47.2-94.8-47.2-66.2 0-120 53.8-120 120v.4c-38.3 16-64 53.5-64 95.6 0 57.3 46.7 104 104 104h304c57.3 0 104-46.7 104-104 0-54.8-42.6-99.8-96.3-103.7zM536 480H232c-39.7 0-72-32.3-72-72 0-32.3 21.9-60.7 53.3-69.2l13.3-3.6-2-17.2c-.3-2-.6-4-.6-6 0-48.5 39.5-88 88-88 32.2 0 61.8 17.9 77.2 46.8l10.6 19.8 15.2-16.5c10.8-11.7 25.4-18.1 41-18.1 30.9 0 56 25.1 56 56 0 1.6-.3 3.1-.8 6.9l-2.5 20 23.5-2.4c1.2-.2 2.5-.4 3.8-.4 39.7 0 72 32.3 72 72S575.7 480 536 480zM92.6 323l12.5-63.2c1.2-6.3-1.4-12.8-6.8-16.4l-53.5-35.8 53.5-35.8c5.4-3.6 8-10.1 6.8-16.4L92.6 92.1l63.2 12.5c6.4 1.3 12.8-1.5 16.4-6.8L208 44.3l35.8 53.5c3.6 5.3 9.9 8.1 16.4 6.8l63.2-12.5-12.5 63.2c-.3 1.6-.1 3.2 0 4.8.4 0 .7-.1 1.1-.1 10.1 0 20 1.1 29.6 3 .2-.5.5-.9.6-1.5l17.2-86.7c1-5.2-.6-10.6-4.4-14.4s-9.2-5.5-14.4-4.4l-76.2 15.1-43.1-64.4c-6-8.9-20.6-8.9-26.6 0l-43.2 64.5-76.1-15.1c-5.3-1.1-10.7.6-14.4 4.4-3.8 3.8-5.4 9.2-4.4 14.4l15.1 76.2-64.6 43.1c-4.4 3-7.1 8-7.1 13.3s2.7 10.3 7.1 13.3L71.6 264l-15.1 76.2c-1 5.2.6 10.6 4.4 14.4 3 3 7.1 4.7 11.3 4.7 1 0 2.1-.1 3.1-.3l32.8-6.5c6.2-13.8 14.6-26.5 25.1-37.6L92.6 323zM208 149.7c18.5 0 34.8 8.9 45.4 22.4 10.2-4.3 20.8-7.6 31.9-9.6-15.6-26.6-44.2-44.8-77.3-44.8-49.5 0-89.8 40.3-89.8 89.8 0 33 18.1 61.7 44.8 77.3 2-11.1 5.3-21.7 9.6-31.9-13.6-10.6-22.4-26.9-22.4-45.4 0-31.8 25.9-57.8 57.8-57.8z"></path></svg>
+          <svg
+            v-else
+            aria-hidden="true"
+            focusable="false"
+            data-prefix="fal"
+            data-icon="cloud-moon"
+            class="svg-inline--fa fa-cloud-moon fa-w-20 dark:text-white text-blue-400 w-7"
+            style="margin-top: -0.8em"
+            role="img"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 640 512"
+          ><path fill="currentColor" d="M351.5 313.6c-4.5-41.3-39.6-73.6-82.1-73.6-13.9 0-27.3 3.5-39.5 10.3-18.3-16.8-41.9-26.3-66.8-26.3-53.7 0-97.5 42.8-99.2 96.2-38.3 14.3-64 50.7-64 92.7C0 467.5 44.5 512 99.2 512h249.6c54.7 0 99.2-44.5 99.2-99.2 0-53.8-43-97.7-96.5-99.2zM348.8 480H99.2C62.1 480 32 449.9 32 412.8c0-31.6 21.5-58.5 52.4-65.4l14-5.9-2-14.6c-.2-1.2-.4-2.5-.4-3.8 0-37.1 30.1-67.2 67.2-67.2 20.1 0 39 9.2 52 25.2l10.1 12.5 12.4-10.1C247 276 258 272 269.4 272c27.9 0 50.6 22.7 50.6 50.6 0 1.5-.2 2.8-.7 6.4l-2.6 21.3 21.2-3.6c3.6-.6 7.2-1.2 11-1.2 37.1 0 67.2 30.2 67.2 67.2S385.9 480 348.8 480zm288.8-192.8c-4.1-8.6-12.4-13.9-21.8-13.9-1.5 0-3 .1-4.6.4-7.7 1.5-15.5 2.2-23.2 2.2-67 0-121.5-54.7-121.5-121.9 0-43.7 23.6-84.3 61.6-106 8.9-5.1 13.6-15 11.9-25.1-1.7-10.2-9.4-17.9-19.5-19.8-11.5-2-23.2-3.1-35-3.1-105.7 0-191.8 86.1-191.8 192 0 6.5.4 12.8 1.1 19.2 12.7 2.9 24.6 7.8 35.4 14.6-2.6-10.9-4.5-22-4.5-33.7 0-88.2 71.7-160 159.8-160 3 0 5.9.1 8.9.2-37.4 28.9-59.9 73.9-59.9 121.9C434.5 239 503.4 308 588 308c2.6 0 5.2-.1 7.8-.2C566.2 336.1 527 352 485.5 352c-7.5 0-14.8-.7-21.9-1.9 5.7 10.3 9.7 21.5 12.5 33.1 3.1.2 6.2.7 9.4.7 58.1 0 112.4-25.9 149-71.1 6-7.2 7.2-17.1 3.1-25.6z"></path></svg>
+        </span>
+				<IconLink v-else :typ="itm.type" :icon="itm.icon_on" :mode="itm.mode || ''" :open="false" :pfx="itm.pfx" :title="itm.title" :show_to="itm.show_to"  :name="itm.name_to" />
+      </a>
+      <a
+        v-if="itm.type == NavItemType.a_blank"
+        rel="noreferrer"
+        :href="itm.href || '#'"
+        target="_blank"
+        :title="t(itm.title)"
+      >
+        <span v-if="itm.icon_on === 'carbon-logo-github'">
+          <carbon-logo-github />
+        </span>
+      </a>
+    </span>
   </nav>
 </template>
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
+import { useRouter } from 'vue-router'
+import { isDark, toggleDark } from '~/logics'
+import { NavItemType } from '~/typs'
+import { SideMenuItemType } from '~/typs/cmpnts'
+import useState from '~/hooks/useState'
+import { auth_data } from '~/hooks/utils'
+
+// https://vitejs.dev/guide/features.html#static-assets
+const router = useRouter()
+const store = useStore()
+const { t, availableLocales, locale } = useI18n()
+
+const map_key = router.currentRoute.value.meta.uiMapkey || 'ui'
+
+const defs = computed(() => store.state.app_defs.main.get(map_key) || {})
+
+const footerMenuCentral = computed(() => {
+  return defs.value && defs.value.footer && defs.value.footer.central_items ? defs.value.footer.central_items : []
+})
+const toggleLocales = () => {
+  // change to some real logic
+  const locales = availableLocales
+  locale.value = locales[(locales.indexOf(locale.value) + 1) % locales.length]
+}
+const itemIf = (itm: SideMenuItemType) => {
+  switch (itm.vif) {
+    case 'notValidUser':
+			return auth_data().auth === '' ? true : false
+			;;
+    case 'validUser':
+			return auth_data().auth !== '' ? true : false
+			;;
+		default:
+			return true
+	}
+}
+const itemClick = (itm: SideMenuItemType) => {
+  switch (itm.click) {
+    case 'toggleDark':
+      toggleDark()
+      break
+    case 'toggleLocales':
+      toggleLocales()
+      break
+    case 'tophome':
+		 	if (useState().app_home_click.value) {
+	  		useState().app_home_click.value()
+			} else {
+				router.push('/')
+			}
+      break
+    default:
+			if (useState().side_menu_click.value) {
+				try {
+					useState().side_menu_click.value(itm)
+				} catch(e) {
+					console.log(e)
+				}
+			}
+  }
+}
+/*
+ <router-link class="icon-btn mx-2" to="/" :title="t('button.home')">
+      <carbon-campsite />
+    </router-link>
+
+    <a class="icon-btn mx-2" :title="t('button.toggle_dark')" @click="toggleDark">
+      <carbon-moon v-if="isDark" />
+      <carbon-sun v-else />
+    </a>
+
+    <a class="icon-btn mx-2" :title="t('button.toggle_langs')" @click="toggleLocales">
+      <carbon-language />
+    </a>
+
+    <router-link class="icon-btn mx-2" to="/about" :title="t('button.about')">
+      <carbon-dicom-overlay />
+    </router-link>
+
+    <a class="icon-btn mx-2" rel="noreferrer" href="https://github.com/antfu/vitesse" target="_blank" title="GitHub">
+      <carbon-logo-github />
+    </a>
+    <router-link class="icon-btn mx-2" to="/login" :title="t('button.login')">
+      <carbon-login />
+    </router-link>
+*/
+</script>
diff --git a/src/components/NavMenu.vue b/src/components/NavMenu.vue
index 0c354ae..d670afc 100644
--- a/src/components/NavMenu.vue
+++ b/src/components/NavMenu.vue
@@ -1,24 +1,4 @@
-<script setup lang="ts">
-import { MenuItemType } from '~/typs'
-import { auth_data } from '~/hooks/utils'
 
-const { t } = useI18n()
-
-const props = defineProps<{
-  title: string
-  items: Array<MenuItemType>
-}>()
-const authData = auth_data()
-
-const emit = defineEmits(['onNavMenu'])
-const isOpen = ref(false)
-const on_item = (item: MenuItemType, event: Event) => {
-  event.preventDefault()
-  event.stopImmediatePropagation()
-  event.stopPropagation()
-  emit('onNavMenu', item)
-}
-</script>
 <template>
   <nav
     class="flex items-center justify-between flex-wrap p-1 fixed w-full z-10 top-0 left-0"
@@ -33,13 +13,14 @@ const on_item = (item: MenuItemType, event: Event) => {
         class="router-link-active router-link-exact-active flex items-center text-white no-underline hover:text-white hover:no-underline"
         title="LibreCloud"
       >
-        <span class="hidden text-sm md:block mr-2">LibreCloud</span>
         <span class="w-11 h-11 rounded-full mr-2">
-          <img class="h-11 w-auto rounded" src="/assets/images/app_w.svg" alt="App">
+          <img class="max-w-7xl w-32 h-rounded" src="/assets/images/logo.svg" alt="App">
         </span>
+        <span class="hidden text-sm md:block mr-2">{{props.navtitle}}</span>
         <span
+				  v-if="usetitle"
           class="text-xl pl-2"
-        ><i class="em em-grinning"></i> {{ props.title }} </span>
+        ><i class="em em-grinning"></i> {{ t(`nav.${props.title}`,props.title) }} </span>
       </a>
     </div>
 
@@ -48,7 +29,7 @@ const on_item = (item: MenuItemType, event: Event) => {
       type="button"
       class="block lg:hidden px-2 text-gray-300 hover:text-white focus:outline-none focus:text-white"
       :class="{ 'transition transform-180': isOpen }"
-      @click="isOpen = !isOpen"
+      @click.prevent="isOpen = !isOpen"
     >
       <svg
         class="h-6 w-6 fill-current"
@@ -77,20 +58,22 @@ const on_item = (item: MenuItemType, event: Event) => {
       <ul
         class="pt-4 lg:pt-0 list-reset lg:flex justify-end flex-1 items-center"
       >
-        <li v-for="item in items" :key="item.id" class="mr-3">
+        <li v-for="item in items" :key="item.name_to" class="mr-3">
           <a
             class="inline-block py-2 px-4 text-white no-underline"
             :class="item.active ? '' : 'text-gray-400 no-underline hover:text-gray-200 hover:text-underline'"
-            :href="item.link"
-            @click="on_item(item,$event)"
-          >{{ item.title }}
+            :href="item.href"
+            @click.prevent="on_item(item)"
+          > {{ t(`nav.${item.title}`,item.title) }} 
           </a>
         </li>
+        <slot name="opslist" />
         <li class="p-1">
           <div class="bg-white flex items-center rounded-full shadow-xl">
             <slot name="search" />
           </div>
         </li>
+        <slot name="lastitems" />
 	      <li class="p-1" v-if="authData.auth !== ''">
 					<router-link class="icon-btn text-2xl text-white no-underline" to="/logout" :title="t('button.logout')">
             <carbon-logout />
@@ -105,3 +88,23 @@ const on_item = (item: MenuItemType, event: Event) => {
     </div>
   </nav>
 </template>
+<script setup lang="ts">
+import { SideMenuItemType } from '~/typs/cmpnts'
+import { auth_data } from '~/hooks/utils'
+
+const { t } = useI18n()
+
+const props = defineProps<{
+  navtitle: string
+  usetitle: boolean
+  title: string
+  items: Array<SideMenuItemType>
+}>()
+const authData = auth_data()
+
+const emit = defineEmits(['onNavMenu'])
+const isOpen = ref(false)
+const on_item = (item: SideMenuItemType) => {
+  emit('onNavMenu', item)
+}
+</script>
\ No newline at end of file
diff --git a/src/components/Profile.vue b/src/components/Profile.vue
new file mode 100644
index 0000000..a337069
--- /dev/null
+++ b/src/components/Profile.vue
@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import useState from '~/hooks/useState'
+const { t } = useI18n()
+
+const profile = ref({
+  username: 'jesusperez',
+  fullname: 'Jesús Pérez Lorenzo',
+  bgcolors: ['bg-emerald-500', 'bg-purple-500', 'bg-yellow-500', 'bg-gray-800', 'bg-pink-500'],
+  bgcolor: 'bg-dark-800',
+  photourl: 'https://avatars.githubusercontent.com/u/59666?v=4',
+})
+const profile_showsettings= ref(false)
+const profile_editing= ref('')
+const profile_saveedit = (name: string) => {
+  profile_editing.value = ''
+}
+const profile_edit = (name: string) => {
+  profile_editing.value = name
+  // this.$nextTick(() => {
+  // 	this.$refs[`${name}input`].focus()
+  // })
+}
+const profile_discard = (name: string) => {
+  // this.$refs[`${name}input`].value = this[name]
+  profile_editing.value = ''
+}
+const profile_selectcolor = (color: string) => {
+  profile.value.bgcolor = color
+}
+const onSettings = () => {
+	profile_showsettings.value= true
+}
+const onCloseSettings = () => {
+	profile_showsettings.value=false
+}
+const onLogout = () => {
+ useState().show_profile.value = false
+}
+</script>
+<template>
+  <div class="block flex flex-col w-full h-screen justify-center items-center bg-white">
+    <div class="flex flex-col w-75 shadow-md max-w-full h-70 rounded-lg transition-colors ease-in" :class="profile.bgcolor">
+      <div v-show="profile_showsettings" class="fixed z-10 flex flex-col w-75 max-w-full h-70 text-center text-white p-5 origin-top-left transform scale-0 transition-all" :class="{'scale-100': profile_showsettings}">
+        <span class="text-2xl font-bold">{{ t('profile.Settings','Settings') }}</span>
+        <div class="flex flex-col space-y-2 mt-5 flex-grow">
+          <span class="text-md font-bold">{{ t('profile.backgroud_color','Background color') }}:</span>
+          <div class="w-full flex justify-center space-x-2">
+            <span v-for="c in profile.bgcolors" :key="c">
+              <button class="flex border-4 border-white inline cursor-pointer w-8 h-8 rounded-full" :class="c" :disabled="profile.bgcolor == c" @click="profile_selectcolor(c)"></button>
+            </span>
+          </div>
+        </div>
+        <div class="flex justify-center flex-shrink align-end">
+          <button class="rounded bg-transparent font-bold text-lg fill-current text-white" @click="onCloseSettings">
+            {{ t(`profile.Close`,'Close') }}
+          </button>
+        </div>
+      </div>
+      <div v-show="!profile_showsettings">
+        <div class="flex w-full justify-between p-2 mt-1">
+          <button  @click="onSettings" class="flex space-x-1 group font-semibold items-center bg-transparent cursor-pointer text-white fill-current">
+            <svg class="w-7 h-7" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+            </svg>
+            <span class="origin-left transform scale-x-0 group-focus:scale-x-100 group-hover:scale-x-100 transition-transform ease-in select-none text-lg">{{ t('profile.Settings','Settings') }}</span>
+          </button>
+          <button @click="onLogout" class="flex space-x-1 group font-semibold items-center bg-transparent cursor-pointer text-white fill-current">
+            <span class="origin-right transform scale-x-0 group-focus:scale-x-100 group-hover:scale-x-100 transition-transform ease-in select-none text-lg">{{ t('profile.Logout','Logout') }}</span>
+            <svg class="w-7 h-7" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
+            </svg>
+          </button>
+        </div>
+        <div class="flex flex-col w-full h-full text-center">
+          <div class="flex flex-col space-y-2 items-center mb-3">
+            <img :src="profile.photourl" alt="Profile Picture" class="rounded-full select-none w-22">
+            <div class="text-center relative group">
+              <span v-show="profile_editing !== 'fullname'" class="text-xl break-words font-semibold text-white font-sans m-0 p-0 px-2 select-none" title="Double click to edit" @dblclick="profile_edit('fullname')">{{ profile.fullname }}</span>
+              <svg v-show="profile_editing != 'fullname'" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-50 inline absolute right-2 -top-3 transform scale-0 group-hover:scale-100 transition-transform" viewBox="0 0 20 20" fill="currentColor">
+                <path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z" />
+                <path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" clip-rule="evenodd" />
+              </svg>
+              <input
+                v-show="profile_editing == 'fullname'"
+                id=""
+                type="text"
+                name=""
+                class="bg-transparent text-xl font-sans w-full p-0 px-2 m-0 text-center text-white font-semibold focus:outline-none focus:animate-pulse"
+                :value="profile.fullname"
+                spellcheck="false"
+                x-ref="fullnameinput"
+                title="Enter to save, click outside to discard."
+                maxlength="20"
+                @keydown.enter="profile_saveedit('fullname')"
+                @click="profile_discard('fullname')"
+                @keydown.escape="profile_discard('fullname')"
+              >
+            </div>
+            <div class="text-center relative group">
+              <span v-show="profile_editing != 'username'" class="text-sm text-wrap font-semibold font-sans m-0 p-0 text-green-100 select-none" title="Double click to edit" @dblclick="profile_edit('username')">{{ profile.username }}</span>
+              <svg v-show="profile_editing != 'username'" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-50 inline absolute ml-1 -top-1 transform scale-0 group-hover:scale-100 transition-transform" viewBox="0 0 20 20" fill="currentColor">
+                <path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z" />
+                <path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" clip-rule="evenodd" />
+              </svg>
+              <input
+                v-show="profile_editing == 'username'"
+                id=""
+                type="text"
+                name=""
+                class="inline-block bg-transparent text-sm font-sans p-0 m-0 w-auto text-center font-semibold text-green-100 focus:outline-none focus:animate-pulse"
+                :value="profile.username"
+                spellcheck="false"
+                x-ref="usernameinput"
+                title="Enter to save, click outside to discard."
+                maxlength="15"
+                @keydown.enter="profile_saveedit('username')"
+                @click="profile_discard('username')"
+                @keydown.escape="profile_discard('username')"
+              >
+            </div>
+          </div>
+          <div class="hidden flex flex-row justify-evenly">
+            <div class="flex flex-col cursor-pointer hover:opacity-80">
+              <span class="text-lg font-bold text-white">11</span>
+              <span class="text-green-100 text-sm">Followers</span>
+            </div>
+            <div class="flex flex-col cursor-pointer hover:opacity-80">
+              <span class="text-lg font-bold text-white">52</span>
+              <span class="text-green-100 text-sm">Following</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>