Welcome to my side menu
<template>
<div class="p-3 text-bg-dark shadow">
<div class="dropdown">
<a
href="#"
class="
align-items-center
text-white text-decoration-none
dropdown-toggle
"
data-bs-toggle="dropdown"
>
<strong>profile</strong>
</a>
<ul class="dropdown-menu dropdown-menu-dark shadow">
<li><a class="dropdown-item" href="#">Sign out</a></li>
</ul>
</div>
<hr />
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a href="#" class="nav-link active" data-bs-toggle="pill">
Today's Tasks
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" data-bs-toggle="pill">All Tasks</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" data-bs-toggle="pill">Create Task</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" data-bs-toggle="pill">Edit Task</a>
</li>
</ul>
</div>
</template>
<script>
export default {
name: "HelloWorld",
};
</script>
Enjoy exploring my main view
<template>
<div class="container-fluid">
<div class="row">
<div class="col-6 bg-danger"><Sidebar /></div>
<div class="col-6">content</div>
</div>
</div>
</template>
<script>
import Sidebar from "@/components/SidebarComp.vue";
export default {
components: {
Sidebar,
},
};
</script>
I encountered 3 problems, seeking solutions:
How can I make sure it fills the remaining height?
Why doesn't it fill the width even with container-fluid?
If I set its position to fixed as desired for a side menu, this issue arises: https://i.sstatic.net/A79s7.png
Basically, how can I achieve a fixed side menu that fills both width and height?