diff --git a/LICENSE b/LICENSE index 451c4f5..31a122a 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2024 CostaPyTemplates +Copyright (c) 2024 Dita Aji Pratama Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: diff --git a/index.html b/index.html new file mode 100644 index 0000000..1d1d4dd --- /dev/null +++ b/index.html @@ -0,0 +1,105 @@ + + + + + + + Prime + + + + + + + + + + + + + +
+

Main Content Area

+

Welcome to the dashboard!

+ +
+ + + + + + + + + + + diff --git a/no-profile-donut.png b/no-profile-donut.png new file mode 100755 index 0000000..df4edf5 Binary files /dev/null and b/no-profile-donut.png differ diff --git a/style.css b/style.css new file mode 100644 index 0000000..4bbc736 --- /dev/null +++ b/style.css @@ -0,0 +1,98 @@ +body { + min-height: 100vh; +} + +.navbar { + z-index: 1030; /* Ensure the navbar is above other elements */ +} + +.sidebar { + height: calc(100vh - 56px); /* 56px is the height of the navbar */ + position: fixed; + top: 56px; /* Offset by the navbar height */ + left: 0; + width: 250px; + background-color: #343a40; + color: white; + z-index: 1020; /* Lower than navbar to stay behind it */ + transition: transform 0.3s ease-in-out; + overflow-y: auto; /* Make sidebar scrollable */ +} + +.sidebar.minimized { + transform: translateX(-100%); +} + +.content { + margin-left: 250px; + padding: 20px; + transition: margin-left 0.3s ease-in-out; +} + +.content.full-width { + margin-left: 0; +} + +.footer { + position: fixed; + bottom: 0; + width: calc(100% - 250px); + margin-left: 250px; + background-color: #f8f9fa; + padding: 10px; + text-align: center; + transition: margin-left 0.3s ease-in-out; +} + +.footer.full-width { + width: 100%; + margin-left: 0; +} + +.profile-image { + width: 30px; + height: 30px; + border-radius: 50%; + object-fit: cover; +} + +.sidebar-toggle { + position: fixed; + bottom: 20px; + left: 20px; + background-color: #343a40; + color: white; + border: none; + width: 100px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + z-index: 1040; /* Above the sidebar and navbar */ + padding: 5px; + border-radius: 8px; /* Rounded corners */ +} + +.sidebar-toggle span { + margin-left: 5px; +} + +@media (max-width: 768px) { + .sidebar { + transform: translateX(-100%); + } + + .sidebar.show { + transform: translateX(0); + } + + .content { + margin-left: 0; + } + + .footer { + width: 100%; + margin-left: 0; + } +}