From 638bf4cb59dc48d054eeb316e69315b9ae9830ce Mon Sep 17 00:00:00 2001 From: Angelillo15 Date: Fri, 4 Aug 2023 20:22:31 +0200 Subject: [PATCH] added content container --- resources/scripts/assets/css/sidebar.css | 35 ++++++++++++++++++++---- 1 file changed, 30 insertions(+), 5 deletions(-) diff --git a/resources/scripts/assets/css/sidebar.css b/resources/scripts/assets/css/sidebar.css index d8a58dd88..bc4a86c5c 100644 --- a/resources/scripts/assets/css/sidebar.css +++ b/resources/scripts/assets/css/sidebar.css @@ -27,16 +27,29 @@ } /* The side navigation menu */ .sidebar { + position: fixed; margin: 0; padding: 0; width: var(--sidebar-size); background-color: var(--color-tertiary); - position: fixed; height: 100%; overflow: auto; z-index: 999999; } +.content-container { + margin-left: calc(var(--sidebar-size) + 40px); + margin-right: 40px; +} + +.content-dashboard { + max-width: 1200px; +} + +.navbar-button { + display: none; +} + /* Sidebar links */ .sidebar a { display: block; @@ -46,7 +59,7 @@ } /* Active/current link */ -.sidebar .active > .icon{ +.sidebar .active > .icon { background-color: var(--button-color-active); color: white; } @@ -92,14 +105,19 @@ div.content { height: 1000px; } -/* On screens that are less than 700px wide, make the sidebar into a topbar */ -@media screen and (max-width: 700px) { +@media screen and (max-width: 1150px) { .sidebar { + position: fixed; width: 100%; - left: -700px; + left: -1150px; transition: all 0.3s ease-in-out; } + .content-container { + margin-left: 40px; + margin-right: 40px; + } + div.content { margin-left: 0; padding: 1px 16px; @@ -116,6 +134,13 @@ div.content { .nav-bar { display: flex; } + + .navbar-button { + display: inline; + font-size: 1.5rem; + margin-left: 1rem; + cursor: pointer; + } } .avatar {