@bagelink/vue 0.0.160 → 0.0.164

package/src/components/NavBar.vue

@@ -1,90 +1,93 @@
 <template>
-	<div :class="{ open: isOpen, closed: !isOpen }">
-		<slot name="top" />
-		<div
-			class="nav-expend"
-			@click="isOpen = !isOpen"
-			@keypress.enter="isOpen = !isOpen"
-			role="button"
-			aria-label="Toggle Navigation"
-			tabindex="0"
-		>
-			<div class="icon-font top-arrow">
-				chevron_right
-			</div>
-		</div>
-
-		<div class="full-nav">
-			<div class="nav-scroll">
-				<div class="nav-links-wrapper">
-					<RouterLink
-						v-for="link in links?.()"
-						class="nav-button"
-						:to="link.to"
-						:key="link.label"
-					>
-						<div class="icon-font">
-							{{ link.materialIcon }}
-						</div>
-						<div class="tooltip">
-							{{ link.localized ? link.localized : link.label }}
-						</div>
-					</RouterLink>
-				</div>
-			</div>
-
-			<div class="bot-buttons-wrapper">
-				<slot name="floor" />
-			</div>
-		</div>
-	</div>
+  <div :class="{ open: isOpen, closed: !isOpen }">
+    <slot name="top" />
+    <div
+      class="nav-expend"
+      @click="isOpen = !isOpen"
+      @keypress.enter="isOpen = !isOpen"
+      role="button"
+      aria-label="Toggle Navigation"
+      tabindex="0"
+    >
+      <div class="icon-font top-arrow">chevron_right</div>
+    </div>
+
+    <div class="full-nav">
+      <div class="nav-scroll">
+        <div class="nav-links-wrapper">
+          <RouterLink
+            v-for="link in links?.()"
+            class="nav-button"
+            :to="link.to"
+            :key="link.label"
+          >
+            <div class="icon-font">
+              {{ link.materialIcon }}
+            </div>
+            <div class="tooltip">
+              {{ link.localized ? link.localized : link.label }}
+            </div>
+          </RouterLink>
+        </div>
+      </div>
+
+      <div class="bot-buttons-wrapper">
+        <slot name="floor" />
+      </div>
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
 // import LangText from "../translation/LangText.vue"s
-import type { MaterialIcons } from '@bagelink/vue';
+import type { MaterialIcons } from "@bagelink/vue";
 
 const isOpen = $ref(true);
 
 withDefaults(
-	defineProps<{
-		links?: () => { label: string; to: string; materialIcon: MaterialIcons, localized?: string }[];
-		homeIcon?: MaterialIcons;
-		homeLabel?: string;
-		homeTo?: string;
-	}>(),
-	{
-		homeIcon: 'home',
-		homeLabel: 'Home',
-		homeTo: '/',
-	},
+  defineProps<{
+    links?: () => {
+      label: string;
+      to: string;
+      materialIcon: MaterialIcons;
+      localized?: string;
+    }[];
+    homeIcon?: MaterialIcons;
+    homeLabel?: string;
+    homeTo?: string;
+  }>(),
+  {
+    homeIcon: "home",
+    homeLabel: "Home",
+    homeTo: "/",
+  }
 );
 </script>
 
 <style>
-[dir='rtl'] .top-arrow {
-	transform: rotate(180deg);
+[dir="rtl"] .top-arrow {
+  transform: rotate(180deg);
 }
 
 .nav-expend {
-	text-align: center;
-	cursor: pointer;
-	background: var(--bgl-white);
-	color: var(--bgl-blue);
-	display: flex;
-	border-radius: 100%;
-	font-size: 13px;
-	box-shadow: 0 0 50px 0 var(--bgl-shadow);
-	height: 22px;
-	width: 22px;
-	align-items: center;
-	justify-content: center;
-	position: absolute;
-	top: 82px;
-	box-sizing: border-box;
-	padding-inline-start: 2px;
-	margin-inline-start: 55px;
-	transition: all 0.4s cubic-bezier(0.36, 0.02, 0.23, 1);
+  text-align: center;
+  cursor: pointer;
+  background: var(--bgl-white);
+  color: var(--bgl-primary);
+  display: flex;
+  border-radius: 100%;
+  font-size: 13px;
+  box-shadow: 0 0 50px 0 var(--bgl-shadow);
+  height: 22px;
+  width: 22px;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 82px;
+  box-sizing: border-box;
+  padding-inline-start: 2px;
+  margin-inline-start: 55px;
+  transition: all 0.4s cubic-bezier(0.36, 0.02, 0.23, 1);
 }
 
 /*
@@ -94,260 +97,260 @@ withDefaults(
 */
 
 .nav-expend {
-	background: white;
+  background: var(--bgl-white);
 }
 
 .nav-expend:hover {
-	filter: brightness(95%);
-	box-shadow: 0 0 20px 0 var(--bgl-blue-tint);
+  filter: brightness(95%);
+  box-shadow: 0 0 20px 0 var(--bgl-primary-tint);
 }
 
 .nav-expend:active {
-	filter: var(--bgl-active-filter);
+  filter: var(--bgl-active-filter);
 }
 
 .nav {
-	color: var(--bgl-white);
-	background: var(--bgl-blue);
-	z-index: 100;
-	width: 70px;
-	transition: all 0.4s cubic-bezier(0.36, 0.02, 0.23, 1);
-	display: flex;
-	flex-direction: column;
+  color: var(--bgl-white);
+  background: var(--bgl-primary);
+  z-index: 100;
+  width: 70px;
+  transition: all 0.4s cubic-bezier(0.36, 0.02, 0.23, 1);
+  display: flex;
+  flex-direction: column;
 }
 
 .nav * {
-	user-select: none;
+  user-select: none;
 }
 
 .nav-button {
-	text-decoration: none;
-	cursor: pointer;
-	display: flex;
-	text-align: start;
-	align-items: center;
-	position: relative;
-	color: var(--bgl-white);
-	transition: all 0.2s ease;
-	pointer-events: none;
+  text-decoration: none;
+  cursor: pointer;
+  display: flex;
+  text-align: start;
+  align-items: center;
+  position: relative;
+  color: var(--bgl-white);
+  transition: all 0.2s ease;
+  pointer-events: none;
 }
 
 .nav-button:hover {
-	width: fit-content;
-	pointer-events: all;
+  width: fit-content;
+  pointer-events: all;
 }
 
 .nav-button .icon-font {
-	font-size: 22px;
-	margin: 0.25rem 10px;
-	padding: 10px;
-	width: 50px;
-	text-align: center;
-	height: 45px;
-	flex-grow: 0;
-	flex-shrink: 0;
-	border-radius: 10px;
-	transition: all 0.2s ease;
-	pointer-events: all;
+  font-size: 22px;
+  margin: 0.25rem 10px;
+  padding: 10px;
+  width: 50px;
+  text-align: center;
+  height: 45px;
+  flex-grow: 0;
+  flex-shrink: 0;
+  border-radius: 10px;
+  transition: all 0.2s ease;
+  pointer-events: all;
 }
 
 .nav-button:hover .icon-font,
 .nav-button.router-link-active .icon-font {
-	background: var(--bgl-white);
-	color: var(--bgl-blue);
+  background: var(--bgl-white);
+  color: var(--bgl-primary);
 }
 
 .nav-button:hover .tooltip {
-	opacity: 1;
-	pointer-events: all;
+  opacity: 1;
+  pointer-events: all;
 }
 
 .tooltip {
-	background-color: var(--bgl-white);
-	color: var(--bgl-blue);
-	line-height: 1;
-	padding: 0.5rem;
-	border-radius: 10px;
-	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-	transition: all 0.2s ease;
-	border: 5px solid transparent;
-	white-space: nowrap;
-	pointer-events: none;
-	opacity: 0;
-	margin-inline-start: 1rem;
+  background-color: var(--bgl-white);
+  color: var(--bgl-primary);
+  line-height: 1;
+  padding: 0.5rem;
+  border-radius: 10px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  transition: all 0.2s ease;
+  border: 5px solid transparent;
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  margin-inline-start: 1rem;
 }
 
 .tooltip:hover {
-	filter: brightness(95%);
+  filter: brightness(95%);
 }
 
 .tooltip:active {
-	filter: brightness(90%);
+  filter: brightness(90%);
 }
 
 .bot-buttons-wrapper {
-	margin-top: auto;
-	width: 100%;
+  margin-top: auto;
+  width: 100%;
 }
 
 .nav-links-wrapper {
-	direction: ltr;
+  direction: ltr;
 }
 
-[dir='rtl'] .nav-links-wrapper {
-	direction: rtl;
+[dir="rtl"] .nav-links-wrapper {
+  direction: rtl;
 }
 
 .nav-scroll {
-	overflow-y: scroll;
-	width: 50vw;
-	direction: rtl;
-	text-align: end;
-	margin-inline-end: -7px;
-	pointer-events: none;
-	display: flex;
-	flex-direction: column;
+  overflow-y: scroll;
+  width: 50vw;
+  direction: rtl;
+  text-align: end;
+  margin-inline-end: -7px;
+  pointer-events: none;
+  display: flex;
+  flex-direction: column;
 }
 
 .nav::-webkit-scrollbar-thumb {
-	background-color: transparent;
+  background-color: transparent;
 }
 
 .nav:hover::-webkit-scrollbar-thumb {
-	background-color: var(--bgl-gray);
+  background-color: var(--bgl-gray);
 }
 
-[dir='rtl'] .nav-scroll {
-	direction: ltr;
+[dir="rtl"] .nav-scroll {
+  direction: ltr;
 }
 
 .full-nav {
-	height: 100%;
-	display: flex;
-	flex-direction: column;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
 @media screen and (min-width: 910px) {
-	.nav.open .nav-expend {
-		margin-inline-start: 189px;
-		transform: rotate(180deg);
-	}
-
-	.nav.open {
-		width: 200px;
-		text-align: start;
-	}
-
-	.nav.open .tooltip {
-		background-color: transparent;
-		color: var(--bgl-white);
-		padding: 0;
-		box-shadow: none;
-		pointer-events: all;
-		opacity: 1;
-		margin-inline-start: 0rem;
-	}
-
-	.nav.open .nav-button .icon-font {
-		margin: 0;
-		background: transparent;
-	}
-
-	.nav.open .nav-button {
-		width: 180px;
-		border-radius: 10px;
-		margin-inline-start: 10px;
-		margin-top: 10px;
-		margin-bottom: 10px;
-	}
-
-	.nav.open .nav-button:hover,
-	.nav.open .nav-button.router-link-active {
-		background: var(--bgl-white);
-		color: var(--bgl-blue);
-	}
-
-	.nav.open .nav-button:hover,
-	.nav.open .nav-button:hover .tooltip,
-	.nav.open .nav-button.router-link-active .tooltip {
-		color: var(--bgl-blue);
-	}
+  .nav.open .nav-expend {
+    margin-inline-start: 189px;
+    transform: rotate(180deg);
+  }
+
+  .nav.open {
+    width: 200px;
+    text-align: start;
+  }
+
+  .nav.open .tooltip {
+    background-color: transparent;
+    color: var(--bgl-white);
+    padding: 0;
+    box-shadow: none;
+    pointer-events: all;
+    opacity: 1;
+    margin-inline-start: 0rem;
+  }
+
+  .nav.open .nav-button .icon-font {
+    margin: 0;
+    background: transparent;
+  }
+
+  .nav.open .nav-button {
+    width: 180px;
+    border-radius: 10px;
+    margin-inline-start: 10px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+  }
+
+  .nav.open .nav-button:hover,
+  .nav.open .nav-button.router-link-active {
+    background: var(--bgl-white);
+    color: var(--bgl-primary);
+  }
+
+  .nav.open .nav-button:hover,
+  .nav.open .nav-button:hover .tooltip,
+  .nav.open .nav-button.router-link-active .tooltip {
+    color: var(--bgl-primary);
+  }
 }
 
 @media screen and (max-width: 910px) {
-	.full-nav {
-		height: auto;
-		display: flex;
-		flex-direction: row;
-		width: calc(100vw - 70px);
-		position: absolute;
-		inset-inline-end: 0;
-		overflow-x: auto;
-	}
-
-	.nav.open {
-		width: initial;
-	}
-
-	.nav {
-		width: auto;
-		display: flex;
-		flex-direction: row;
-		margin: 0;
-		overflow-x: auto;
-		justify-content: flex-start;
-	}
-
-	.tooltip {
-		opacity: 1;
-		background: transparent;
-		color: var(--bgl-white);
-		box-shadow: none;
-		font-size: 10px;
-		padding: 0;
-		margin: 0;
-	}
-
-	.nav-button {
-		flex-direction: column;
-		margin: 12px 0.25rem;
-	}
-
-	.nav-button .icon-font {
-		padding: 2px 0 0 0;
-		margin: 0;
-		height: 30px;
-		width: 30px;
-	}
-
-	.nav-links-wrapper {
-		display: flex;
-	}
-
-	.bot-buttons-wrapper {
-		margin-top: 0;
-		width: auto;
-		display: flex;
-	}
-
-	.nav-scroll {
-		overflow-y: visible;
-		width: auto;
-		direction: auto;
-		text-align: start;
-		margin-inline-end: 0px;
-		pointer-events: all;
-		display: flex;
-		flex-direction: row;
-		margin-inline-end: auto;
-	}
-
-	.nav::-webkit-scrollbar {
-		display: none;
-	}
-
-	.nav-expend {
-		display: none;
-	}
+  .full-nav {
+    height: auto;
+    display: flex;
+    flex-direction: row;
+    width: calc(100vw - 70px);
+    position: absolute;
+    inset-inline-end: 0;
+    overflow-x: auto;
+  }
+
+  .nav.open {
+    width: initial;
+  }
+
+  .nav {
+    width: auto;
+    display: flex;
+    flex-direction: row;
+    margin: 0;
+    overflow-x: auto;
+    justify-content: flex-start;
+  }
+
+  .tooltip {
+    opacity: 1;
+    background: transparent;
+    color: var(--bgl-white);
+    box-shadow: none;
+    font-size: 10px;
+    padding: 0;
+    margin: 0;
+  }
+
+  .nav-button {
+    flex-direction: column;
+    margin: 12px 0.25rem;
+  }
+
+  .nav-button .icon-font {
+    padding: 2px 0 0 0;
+    margin: 0;
+    height: 30px;
+    width: 30px;
+  }
+
+  .nav-links-wrapper {
+    display: flex;
+  }
+
+  .bot-buttons-wrapper {
+    margin-top: 0;
+    width: auto;
+    display: flex;
+  }
+
+  .nav-scroll {
+    overflow-y: visible;
+    width: auto;
+    direction: auto;
+    text-align: start;
+    margin-inline-end: 0px;
+    pointer-events: all;
+    display: flex;
+    flex-direction: row;
+    margin-inline-end: auto;
+  }
+
+  .nav::-webkit-scrollbar {
+    display: none;
+  }
+
+  .nav-expend {
+    display: none;
+  }
 }
 </style>