E-Vote/resources/assets/js/components/common/FloatingNavbar.vue

<template>
	<nav class="navbar navbar-default navbar-fixed-top floating-header logo-header" id="nav">
		<div class="container">
			<div class="navbar-header logo-section">
				<button type="button" class="navbar-toggle" data-toggle="collapse" :data-target="'#' + collapseId">
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<Logo :href="logoHref" />
			</div>

			<div class="collapse navbar-collapse" :id="collapseId">
				<ul class="nav navbar-nav" :class="mainNavClass">
					<slot name="left" />
				</ul>

				<ul class="nav navbar-right navbar-nav">
					<slot name="right" />
				</ul>
			</div>
		</div>
	</nav>
</template>

<script>
import Logo from './Logo.vue';

export default {
	name: 'FloatingNavbar',
	components: { Logo },
	props: {
		logoHref: { type: String, required: true },
		collapseId: { type: String, default: 'myNavbar' },
		mainNavClass: { type: [String, Object, Array], default: null }
	}
};
</script>

<style>
/* Layout & structure — color tokens from theme.css (:root), loaded in app.js */
.floating-header {
	position: fixed !important;
	top: 16px !important;
	left: 16px !important;
	right: 16px !important;
	width: calc(100% - 32px) !important;
	margin: 0;
	border-radius: 16px !important;
	z-index: 2000 !important;
	transition: all 0.3s ease !important;
}

.logo-header {
	background: linear-gradient(
		135deg,
		var(--floating-header-bg-1) 0%,
		var(--floating-header-bg-2) 38%,
		var(--floating-header-bg-3) 72%,
		var(--floating-header-bg-4) 100%
	) !important;
	border: 1px solid var(--floating-header-border) !important;
	box-shadow:
		0 8px 32px var(--floating-header-shadow-1),
		0 4px 16px var(--floating-header-shadow-2) !important;
	backdrop-filter: blur(12px) !important;
	position: fixed;
	overflow: visible;
}

.logo-header::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(
		135deg,
		var(--floating-header-overlay-1) 0%,
		transparent 50%,
		var(--floating-header-overlay-2) 100%
	);
	pointer-events: none;
	z-index: 0;
}

.logo-header > * {
	position: relative;
	z-index: 1;
}

#nav.navbar {
	border: none;
	min-height: 78px;
}

#nav .container {
	width: 100%;
	padding-left: 22px;
	padding-right: 22px;
	overflow: visible;
}

#nav .navbar-nav {
	margin-left: 10px;
}

#nav .navbar-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	height: auto;
	padding: 14px 0;
	color: var(--floating-header-brand-text);
	font-weight: 700;
	text-shadow: 0 1px 2px var(--floating-header-brand-shadow);
}

.logo-title {
	display: inline-block;
	color: var(--floating-header-brand-text) !important;
	font-size: 1.8rem;
	font-weight: 700;
	text-shadow: 0 1px 2px var(--floating-header-brand-shadow);
}

#nav .nav > li > a,
#nav .navbar-toggle {
	color: var(--floating-header-nav-text);
	font-weight: 700;
	letter-spacing: 0.02em;
}

#nav .nav > li > a:hover,
#nav .nav > li.active > a,
#nav .nav > li.active > a:hover,
#nav .nav > li.active > a:focus,
#nav .navbar-brand:hover {
	color: var(--floating-header-brand-text);
	background: var(--floating-header-hover-bg);
}

#nav .nav > li > a {
	border-radius: 10px;
	margin-top: 18px;
	margin-bottom: 18px;
	padding-top: 12px;
	padding-bottom: 12px;
}

#nav .navbar-right {
	margin-right: 8px;
}

#nav .navbar-nav > li,
#nav .dropdown {
	position: relative;
}

#nav .dropdown-menu {
	margin-top: 6px;
	border: 0;
	border-radius: 12px;
	box-shadow: 0 12px 28px var(--floating-header-dropdown-menu-shadow);
	z-index: 2101;
}

#nav .dropdown-menu > li > a {
	color: var(--admin-table-text-strong);
}

#nav .dropdown-menu > li > a:hover {
	background-color: var(--floating-header-dropdown-hover-bg);
	color: var(--floating-header-dropdown-hover-text);
}

#nav .navbar-toggle {
	margin-top: 20px;
	margin-right: 18px;
	border-color: var(--floating-header-toggle-border);
	background: var(--floating-header-toggle-bg);
}

#nav .navbar-toggle .icon-bar {
	background-color: var(--floating-header-icon-bar);
}

.navbar-brand img {
	background: transparent !important;
	box-shadow: none;
}

@media (max-width: 767px) {
	.floating-header {
		top: 10px !important;
		left: 10px !important;
		right: 10px !important;
		width: calc(100% - 20px) !important;
		border-radius: 14px !important;
	}

	.logo-title {
		font-size: 1.4rem;
	}

	#nav .navbar-brand img {
		width: 120px;
	}

	#nav .navbar-collapse {
		border-top: 0;
		box-shadow: none;
		padding-bottom: 12px;
		overflow: visible;
	}

	#nav .nav > li > a {
		margin: 4px 10px;
	}

	#nav .navbar-nav .open .dropdown-menu {
		position: static;
		float: none;
		width: auto;
		margin: 0 10px 10px;
		padding: 6px;
		border-radius: 12px;
		background: var(--floating-header-mobile-submenu-bg);
		box-shadow: 0 10px 24px var(--floating-header-mobile-submenu-shadow);
	}

	#nav .navbar-nav .open .dropdown-menu > li > a {
		padding: 10px 12px;
		border-radius: 10px;
	}
}
</style>