Updated navigation.

components/layout/NavBar.module.css

@@ -1,62 +1,49 @@
 .navbar {
   position: relative;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   align-items: center;
+  height: 60px;
   background: var(--base75);
-  height: 100%;
-  width: 200px;
-  border-right: 2px solid var(--base200);
+  border-bottom: 1px solid var(--base200);
+  padding: 0 20px;
 }
 
-.header {
+.logo {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   font-size: 16px;
   font-weight: 700;
-  padding: 20px 0;
   cursor: pointer;
+  min-width: 0;
 }
 
-.header:hover .icon {
-  visibility: visible;
-}
-
-.icon {
-  visibility: hidden;
-  position: absolute;
-  right: -10px;
-  border-radius: 100%;
-  color: var(--base50);
-  background: var(--base800);
-  height: 20px;
-  width: 20px;
-}
-
-.minimized.navbar {
-  width: 60px;
-}
-
-.minimized .text {
-  display: none;
-}
-
-.footer {
-  flex: 1;
+.links {
   display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-  padding: 20px;
+  flex-direction: row;
+  gap: 20px;
+  padding: 0 40px;
+  flex: 1;
+  font-weight: 700;
 }
 
-.buttons {
+.links a {
   display: flex;
   align-items: center;
-  justify-content: center;
+  gap: 10px;
+  color: var(--font-color100);
 }
 
-.minimized .buttons {
-  flex-direction: column;
+.links a:hover {
+  color: var(--primary400);
+}
+
+.actions {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+  min-width: 0;
 }