colocando botões

assets/main.scss

@@ -1,67 +1,92 @@
-body{
-	margin: 0;
-	font-family: Arial, sans-serif;
-	display: flex;
-	height: 100vh;
+/* Estilos para o layout */
+
+body {
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh; /* Para ocupar pelo menos toda a altura da tela */
 }
 
-.container{
-	display:flex;
-	width: 100%;
-	height: 100%;
+header {
+  background-color: #f0f0f0;
+  padding: 20px;
 }
 
-.sidebar{
-	width: 200px;
-	background-color: #2c3e50;
-	color: #ecf0f1;
-	display: flex;
-	flex-direction: column;
-	padding: 20px;
-	box-shadow: 2px 0 5px rgba(0,0,0,0.1);
+.wrapper {
+  display: flex;
+  flex: 1;
 }
 
-.sidebar-button{
-	background-color: #34495e;
-	color: #ecf0f1;
-	border: none;
-	border-radius: 5px;
-	padding: 10px;
-	margin-bottom: 10px;
-	cursor: pointer;
-	text-align: left;
-	width: 100%;
+.sidebar {
+  width: 200px;
+  background-color: #333;
+  color: #fff;
 }
 
-.sidebar-button:hover{
-	background-color: #1abc9c;
+.sidebar nav ul {
+  list-style-type: none;
+  padding: 0;
 }
 
-.main-content{
-	flex: 1;
-	padding: 20px;
-	background-color: #ecf0f1;
-	display: flex;
-	flex-wrap: wrap;
-	gap: 10px;
+.sidebar nav ul li {
+  padding: 10px;
 }
 
-.post-grid{
-	display: grid;
-	grid-template-columns: repeat(3,1fr);
-	gap: 10px;
-	width: 100%;
+.sidebar nav ul li a {
+  color: #fff;
+  text-decoration: none;
 }
 
-.post{
-	background-color: #3498db;
-	color: #fff;
-	padding: 20px;
-	text-align: center;
-	border-radius: 5px;
-	height: 150px;
-	display: flex;
-	justify-content: center;
-	align-items: center;
+.container {
+  flex: 1;
+  padding: 20px;
+}
+
+.post-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 20px;
+}
+
+.post {
+  background-color: #f0f0f0;
+  padding: 20px;
+  border-radius: 5px;
+}
+
+footer {
+  background-color: #ccc;
+  padding: 10px;
+  text-align: center;
+}
+
+.footer-images {
+  margin-top: 10px;
+}
+
+.footer-images img {
+  width: 100px;
+  height: 100px;
+  margin: 5px;
+  border-radius: 50%;
+}
+
+/* Estilos para tornar o layout responsivo */
+
+@media only screen and (max-width: 768px) {
+  .wrapper {
+    flex-direction: column;
+  }
+
+  .sidebar {
+    width: 100%;
+    order: 2; /* Altera a ordem para colocar a sidebar abaixo no layout mobile */
+  }
+
+  .container {
+    order: 1; /* Coloca a área de conteúdo antes da sidebar no layout mobile */
+  }
 }