I am currently working on a layout design that includes a fixed sidebar on the left side, positioned beside a container with its own grid structure. Utilizing Vue.js means each template contains <div> elements where I attempt to incorporate additional <div>s for the sidebar and main content. Unfortunately, my layout seems to be rejecting CSS rules when trying to style the sidebar or apply colors. Any assistance would be greatly appreciated!
Here is how my layout is structured:
<template>
<div>
<sidebar />
<main-content />
</div>
</template>
The sidebar component looks like this:
<template>
<div>
<div class="sidebar">
<div id="logo">
<img src="" />
</div>
<h1><a href="#">Company</a></h1>
<ul>
<li><a href="#">Users</a>
<ul id="sublist">
<li><a href="#">Import</a></li>
<li><a href="#">Invitations</a></li>
</ul>
</li>
<li><a href="#">Polls</a></li>
</ul>
</div>
</div>
</template>
The main content section, which houses a table component, is structured as follows:
<template>
<div>
<div class="container-grid">
<div class="header">
<h2>Users</h2>
<button>Add</button>
<h3>Import users</h3>
</div>
<main-table />
</div>
</div>
</template>
My current CSS styles are set up like this:
.sidebar {
height: 100%;
width: 300px;
max-width: 1024px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
overflow-x: hidden;
box-sizing: border-box;
}
h1 {
display: inline;
height: 29px;
width: 156px;
}
ul,
#sublist {
list-style: none;
margin: 0;
padding: 0;
}
a {
height: 20px;
width: 200px;
text-decoration: none;
display: block;
}
// Main Content Style
.container-grid {
margin-left: 336px;
}