Skip to content

Commit

Permalink
Fix sidebar and header behaviour
Browse files Browse the repository at this point in the history
  • Loading branch information
AngeloThys committed Sep 18, 2023
1 parent 075c94c commit f17d941
Show file tree
Hide file tree
Showing 2 changed files with 52 additions and 41 deletions.
84 changes: 43 additions & 41 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -18,48 +18,50 @@
</head>
<body>
<aside>
<div class="dashboard">
<span class="material-symbols-outlined"> dashboard </span>
<a href="#">Dashboard</a>
</div>
<nav>
<div class="home">
<span class="material-symbols-outlined"> home </span>
<a href="#">Home</a>
</div>
<div class="profile">
<span class="material-symbols-outlined"> person </span>
<a href="#">Profile</a>
</div>
<div class="messages">
<span class="material-symbols-outlined"> chat_bubble </span>
<a href="#">Messages</a>
</div>
<div class="history">
<span class="material-symbols-outlined"> history </span>
<a href="#">History</a>
</div>
<div class="tasks">
<span class="material-symbols-outlined"> task </span>
<a href="#">Tasks</a>
<div class="sidebar">
<div class="dashboard">
<span class="material-symbols-outlined"> dashboard </span>
<a href="#">Dashboard</a>
</div>
<div class="communities">
<span class="material-symbols-outlined"> diversity_3 </span>
<a href="#">Communities</a>
</div>
<div class="settings">
<span class="material-symbols-outlined"> tune </span>
<a href="#">Settings</a>
</div>
<div class="support">
<span class="material-symbols-outlined"> help_center </span>
<a href="#">Support</a>
</div>
<div class="privacy">
<span class="material-symbols-outlined"> security </span>
<a href="#">Privacy</a>
</div>
</nav>
<nav>
<div class="home">
<span class="material-symbols-outlined"> home </span>
<a href="#">Home</a>
</div>
<div class="profile">
<span class="material-symbols-outlined"> person </span>
<a href="#">Profile</a>
</div>
<div class="messages">
<span class="material-symbols-outlined"> chat_bubble </span>
<a href="#">Messages</a>
</div>
<div class="history">
<span class="material-symbols-outlined"> history </span>
<a href="#">History</a>
</div>
<div class="tasks">
<span class="material-symbols-outlined"> task </span>
<a href="#">Tasks</a>
</div>
<div class="communities">
<span class="material-symbols-outlined"> diversity_3 </span>
<a href="#">Communities</a>
</div>
<div class="settings">
<span class="material-symbols-outlined"> tune </span>
<a href="#">Settings</a>
</div>
<div class="support">
<span class="material-symbols-outlined"> help_center </span>
<a href="#">Support</a>
</div>
<div class="privacy">
<span class="material-symbols-outlined"> security </span>
<a href="#">Privacy</a>
</div>
</nav>
</div>
</aside>
<header>
<div class="search">
Expand Down
9 changes: 9 additions & 0 deletions style.css
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,11 @@ aside {
font-size: 1.5rem;
grid-area: sidebar;
padding: 1rem;
}

.sidebar {
position: sticky;
top: 1rem;
display: grid;
grid-template-rows: 2fr repeat(10, 1fr);
grid-template-columns: auto 1fr;
Expand Down Expand Up @@ -105,6 +110,10 @@ aside a {
}

header {
position: sticky;
top: 0;
background-color: #fff;
box-shadow: 0px 2px 4px var(--tertiary-green);
padding: 0.75rem 2rem;
grid-area: header;
display: grid;
Expand Down

0 comments on commit f17d941

Please sign in to comment.