Laravel / vuejs -navbar - темный фон - как поступить?

Question

Извините, если заголовок не очень точный, мне нужен совет о том, как поступить, и я постараюсь быть более ясным:)

Я использую laravel и vuejs.Я добавил панель поиска и ее результаты, и я хотел бы, чтобы все остальное на веб-сайте стало серым (с использованием оттенков серого)

website{
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    filter: grayscale(100%);
}

Я также хочу, чтобы панель скрывалась, когда пользователь нажимает в другом месте.

Но у меня так много компонентов, мне действительно интересно, возможно ли это вообще ... А пока вот как я это делаю:

в моем компоненте navbar

<input v-model="query" 
       type="text" 
       class="typeahead form-control" 
       placeholder="Search for an event"
       aria-label="Search"
       aria-describedby="basic-addon2">

<div id="search-results" v-if="query.length>0
    <div class="title-search">Results</div>
    <div v-for="event in events">
        <event class="animated fadeIn" :event="event" :query="query"></event>
    </div>
</div>


#search-results{
    position: absolute;
    background-color: white;
    width: 100%;
    z-index: 100000;
}

Эта навигационная панель находится в template.blade.php

<div id="app">
    <navbar></navbar>
<div>

@yield('contenu')

<div id="app">
    <footercomponent></footercomponent>
<div>

И каждая страница выглядит так

@extends('template')

    @section('contenu')
        <div id="app">
            <app></app>
        </div>

    @endsection

Возможно ли это вообще?

Спасибомного заранее!