bookmark-bar wip

traefikturkey · May 6, 2024 · 0e98d9f · 0e98d9f
1 parent 1152dd0
commit 0e98d9f
Show file tree

Hide file tree

Showing 4 changed files with 224 additions and 6 deletions.
diff --git a/app/static/css/bookmark_bar.css b/app/static/css/bookmark_bar.css
diff --git a/app/static/css/layout.css b/app/static/css/layout.css
@@ -6,21 +6,23 @@ html, body {
   padding: 0;
 }
 
-/* Body Styles */
 body {
-  font-family: 'Roboto', Helvetica, sans-serif;
-  font-size: 0.95em; 
+  margin: 0;
+  padding: 0;
+  font-family: 'Roboto', sans-serif;
+  font-size: 14px;
   line-height: 1.25em;
   color: #D3D3D3;
   background-color: #2a2a2c;
   overflow-x: hidden;
+  padding-top: calc(var(--bookmark-bar-height)); /* Reference the variable */
 }
 
 .container {
   display: flex;
-	flex: 1 0 auto;
-	flex-direction: column;
-	min-height: 100vh;
+  flex: 1 0 auto;
+  flex-direction: column;
+  min-height: calc(100vh - var(--bookmark-bar-height)); /* Reference the variable */
 }
 
 /* Row */
@@ -45,4 +47,68 @@ footer {
   background-color: #1a1a1c;
   margin-top: auto;
   text-align: center;
+}
+
+:root {
+  --bookmark-bar-height: 30px; /* Define the height of the bookmark bar */
+}
+
+#bookmarkBar {
+  background-color: #2c2c2c;
+  width: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+  height: var(--bookmark-bar-height);
+  font-size: 12px;
+  padding-left: 4px;
+}
+
+#bookmarkBar ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+}
+
+#bookmarkBar li {
+  position: relative;
+  border-bottom: 0;
+  margin: 0;
+}
+
+#bookmarkBar a {
+  display: block;
+  color: #ddd;
+  text-decoration: none;
+  padding: 8px;
+}
+
+#bookmarkBar a i {
+  margin-right: 5px;
+}
+
+#bookmarkBar a .fa-folder {
+  color: #eece00;
+}
+
+#bookmarkBar ul ul {
+  display: none;
+  position: absolute;
+  background-color: #2c2c2c;
+  min-width: 160px;
+  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+  z-index: 1;
+  top: var(--bookmark-bar-height);
+  border: 1px solid #525252; /* Add a light outline */
+  border-radius: 5px; /* Add rounded corners */
+}
+
+#bookmarkBar ul li:hover > ul {
+  display: block;
+}
+
+#content {
+  padding-top: 36px;
 }
diff --git a/app/static/testing.html b/app/static/testing.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Bookmark Bar</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+      font-family: 'Roboto', sans-serif;
+      font-size: 14px;
+    }
+
+    /* Body Styles */
+:root {
+  --bookmark-bar-height: 30px; /* Define the height of the bookmark bar */
+}
+
+#bookmarkBar {
+  background-color: #2c2c2c;
+  width: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+  height: var(--bookmark-bar-height);
+  font-size: 12px;
+  padding-left: 4px;
+}
+
+#bookmarkBar ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+}
+
+#bookmarkBar li {
+  position: relative;
+  border-bottom: 0;
+  margin: 0;
+}
+
+#bookmarkBar a {
+  display: block;
+  color: #ddd;
+  text-decoration: none;
+  padding: 8px;
+}
+
+#bookmarkBar a i {
+  margin-right: 5px;
+}
+
+#bookmarkBar a .fa-folder {
+  color: #eece00; 
+}
+
+#bookmarkBar ul ul {
+  display: none;
+  position: absolute;
+  background-color: #2c2c2c;
+  min-width: 160px;
+  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+  z-index: 1;
+}
+
+#bookmarkBar ul li:hover > ul {
+  display: block;
+}
+
+    #content {
+      padding-top: 36px;
+    }
+  </style>
+</head>
+<body>
+  <div id="bookmarkBar">
+    <ul>
+      <li>
+        <a href="#">
+          <i class="fa fa-folder"></i>
+          Folder 1
+        </a>
+        <ul>
+          <li><a href="#"><i class="fa fa-link"></i> Link 1</a></li>
+          <li><a href="#"><i class="fa fa-link"></i> Link 2</a></li>
+          <li><a href="#"><i class="fa fa-link"></i> Link 3</a></li>
+        </ul>
+      </li>
+      <li>
+        <a href="#">
+          <i class="fa fa-folder"></i>
+          Folder 2
+        </a>
+        <ul>
+          <li><a href="#"><i class="fa fa-link"></i> Link 4</a></li>
+          <li><a href="#"><i class="fa fa-link"></i> Link 5</a></li>
+        </ul>
+      </li>
+      <li><a href="#"><i class="fa fa-link"></i> Link 6</a></li>
+    </ul>
+  </div>
+
+  <div id="content">
+    <!-- Your page content goes here -->
+  </div>
+
+  <script>
+    // Add Font Awesome icons
+    var script = document.createElement('script');
+    script.src = 'https://use.fontawesome.com/releases/v5.15.3/js/all.js';
+    document.head.appendChild(script);
+  </script>
+</body>
+</html>
diff --git a/app/templates/index.html b/app/templates/index.html
@@ -17,6 +17,12 @@
 
 	<script defer src="https://unpkg.com/[email protected]/dist/htmx.min.js"></script>
 	<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
+	<script>
+    // Add Font Awesome icons
+    var script = document.createElement('script');
+    script.src = 'https://use.fontawesome.com/releases/v5.15.3/js/all.js';
+    document.head.appendChild(script);
+  </script>
 
 	<link href="https://use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet">
 	{% assets "css_all" %}
@@ -26,6 +32,32 @@
 
 <body>
 	{% include('flash_message.html') %}
+	<div id="bookmarkBar">
+    <ul>
+      <li>
+        <a href="#">
+          <i class="fa fa-folder"></i>
+          Folder 1
+        </a>
+        <ul>
+          <li><a href="#"><i class="fa fa-link"></i> Link 1</a></li>
+          <li><a href="#"><i class="fa fa-link"></i> Link 2</a></li>
+          <li><a href="#"><i class="fa fa-link"></i> Link 3</a></li>
+        </ul>
+      </li>
+      <li>
+        <a href="#">
+          <i class="fa fa-folder"></i>
+          Folder 2
+        </a>
+        <ul>
+          <li><a href="#"><i class="fa fa-link"></i> Link 4</a></li>
+          <li><a href="#"><i class="fa fa-link"></i> Link 5</a></li>
+        </ul>
+      </li>
+      <li><a href="#"><i class="fa fa-link"></i> Link 6</a></li>
+    </ul>
+  </div>
 	<div class="container">
 		<div class="row header">
 			<div class="column">