added top nav bar and fix some styles

app/templates/base.html

@@ -75,10 +75,6 @@
 
     {% block body %}
 
-    <!-- SideBar -->
-    <!-- prettier-ignore -->
-    {% include 'sidebar.html' %}
-
     {% block right_sidebar %} {% include 'right_sidebar.html' %} {% endblock %}
 
     {% include 'book/add_book_modal.html' %}
@@ -86,7 +82,7 @@
     <!-- prettier-ignore -->
     <script src="{{ url_for('static', filename='js/main.js') }}" type="text/javascript" defer></script>
 
-    <div class="p-0 mt-16 h-auto md:ml-64">
+    <div class="p-0 mt-36 h-auto">
       <!-- Main Content -->
       {% block content %}{% endblock %}
     </div>

app/templates/book/breadcrumbs_navigation.html

@@ -1,5 +1,5 @@
 <!-- prettier-ignore -->
-<nav class="fixed flex p-4 pl-1 mt-1.5 z-40 w-full md:w-4/5 bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700" aria-label="Breadcrumb">
+<nav class="fixed flex top-32 p-4 pl-1 mt-1.5 z-40 w-full md:w-4/5 bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700" aria-label="Breadcrumb">
   <ol class="inline-flex items-center space-x-1 md:space-x-3 ml-5 overflow-x-scroll md:overflow-auto p-0">
     {% for breadcrumb in breadcrumbs %}
     <li class="inline-flex items-center">

app/templates/book/interpretation_view.html

@@ -16,7 +16,7 @@
 {% include 'book/breadcrumbs_navigation.html'%}
 <div class="overflow-x-auto shadow-md sm:rounded-lg md:mr-64">
   <!-- prettier-ignore -->
-  <div class="fixed z-30 w-full md:w-4/5 top-28 pt-6 bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700">
+  <div class="fixed z-30 w-full md:w-4/5 top-44 pt-6 bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700">
     <!-- prettier-ignore -->
     <h1 class="text-l font-extrabold dark:text-white ml-4"> Interpretations page </h1>
     <!-- prettier-ignore -->
@@ -39,13 +39,9 @@
   </div>
   </div>
   <div id="myTabContent" class="mt-40">
-    <div
+    <!-- prettier-ignore -->
-      class="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800"
+    <div class="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800" id="section-text" role="tabpanel" aria-labelledby="text-tab">
-      id="section-text"
+      <dl class="bg-white dark:bg-gray-900 max-w-full p-3 text-gray-900 divide-y divide-gray-200 dark:text-white dark:divide-gray-700 m-3 border-2 border-gray-200 border-solid rounded-lg dark:border-gray-700">
-      role="tabpanel"
-      aria-labelledby="text-tab">
-      <dl
-        class="bg-white dark:bg-gray-900 max-w-full p-3 text-gray-900 divide-y divide-gray-200 dark:text-white dark:divide-gray-700 m-3 border-2 border-gray-200 border-solid rounded-lg dark:border-gray-700">
         <div class="flex flex-col w-full">
           <!-- prettier-ignore -->
           <dt class="flex w-full mb-1 text-gray-500 md:text-lg dark:text-gray-400 flex-col">
@@ -59,11 +55,8 @@
       </dl>
     </div>
 
-    <div
+    <!-- prettier-ignore -->
-      class="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800"
+    <div class="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800" id="interpretation" role="tabpanel" aria-labelledby="interpretation-tab">
-      id="interpretation"
-      role="tabpanel"
-      aria-labelledby="interpretation-tab">
       <!-- prettier-ignore -->
       <form
       {% if sub_collection %}

app/templates/book/section_view.html

@@ -20,9 +20,8 @@
 {% endblock %}
 
 {% block content %}
-{% include 'book/breadcrumbs_navigation.html'%}
 <div class="overflow-x-auto shadow-md sm:rounded-lg md:mr-64">
-<div class="fixed z-30 w-full md:w-4/5 top-28 pt-6 bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700">
+<div class="fixed z-30 w-full top-32 pt-6 bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700">
   <h1 class="text-l font-extrabold dark:text-white ml-4">Sections page</h1>
   <div class="mb-1">
     <!-- prettier-ignore -->
@@ -45,7 +44,7 @@
     </ul>
   </div>
 </div>
-  <div id="myTabContent" class="mt-36">
+  <div id="myTabContent" class="mt-20">
     <!-- prettier-ignore -->
     <div class="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800" id="files" role="tabpanel" aria-labelledby="files-tab">
       <dl class="w-md md:w-full text-gray-900 divide-y divide-gray-200 dark:text-white dark:divide-gray-700">

app/templates/book/sub_collection_view.html

@@ -20,10 +20,9 @@
 {% endblock %}
 
 {% block content %}
-{% include 'book/breadcrumbs_navigation.html'%}
 <div class="overflow-x-auto shadow-md sm:rounded-lg md:mr-64">
   <!-- prettier-ignore -->
-  <div class="fixed z-30 w-full md:w-4/5 top-28 pt-6 bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700">
+  <div class="fixed z-30 w-full top-32 pt-6 bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700">
     <!-- prettier-ignore -->
     <h1 class="text-l font-extrabold dark:text-white ml-4"> Sub collections page </h1>
     <div class="mb-1">
@@ -47,7 +46,7 @@
     </div>
   </div>
 
-  <div id="myTabContent" class="mt-40">
+  <div id="myTabContent" class="mt-20">
     <!-- prettier-ignore -->
     <div class="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800" id="files" role="tabpanel" aria-labelledby="files-tab">
       <!-- prettier-ignore -->

app/templates/header.html

@@ -1,5 +1,6 @@
 <nav
   class="fixed top-0 z-50 w-full bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700">
+  <div>  
   <div class="px-3 py-3 lg:px-5 lg:pl-3">
     <div class="flex items-center justify-between">
       <div class="flex w-full items-center justify-between">
@@ -108,4 +109,29 @@
       </a>
     </div>
   {% endif %}
+</div>
+<!-- Second top navbar -->
+<div class="px-3 py-3 lg:px-5 lg:pl-3 border-t border-gray-200 dark:border-gray-700">
+  <div class="flex items-center justify-between">
+    <div class="flex w-full items-center justify-between">
+      <ul class="flex font-medium items-center">
+      <li class="mx-2">
+        <a href="#" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
+          <span>My Library</span>
+        </a>
+      </li>
+      <li class="my-auto">
+        <a href="#" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
+          <span>My Contributions</span>
+        </a>
+      </li>
+      <li>
+        <a href="#" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
+          <span>Favorite Books</span>
+        </a>
+      </li>
+      </ul>
+    </div>
+  </div>
+</div>
 </nav>

app/templates/home/index.html

@@ -3,7 +3,7 @@
 {% block content %}
 <div class="border-b border-gray-200 dark:border-gray-700 md:mr-64">
   <!-- prettier-ignore -->
-  <ul class="flex flex-wrap -mb-px text-sm font-medium text-center" id="myTab" data-tabs-toggle="#myTabContent" role="tablist">
+  <ul class="flex md:flex-wrap -mb-px text-xs md:text-sm font-medium text-center" id="myTab" data-tabs-toggle="#myTabContent" role="tablist">
     <li class="mr-2 w-full md:w-auto" role="presentation">
       <!-- prettier-ignore -->
       <button class="inline-flex p-4 border-b-2 rounded-t-lg" id="last-sections-tab" data-tabs-target="#last-sections" type="button" role="tab" aria-controls="last-sections" aria-selected="false"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mr-3"> <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" /> </svg>

app/views/main.py

@@ -1,4 +1,4 @@
-from flask import render_template, Blueprint
+from flask import redirect, url_for, Blueprint
 
 
 main_blueprint = Blueprint("main", __name__)
@@ -6,4 +6,4 @@ main_blueprint = Blueprint("main", __name__)
 
 @main_blueprint.route("/")
 def index():
-    return render_template("index.html")
+    return redirect(url_for("home.get_all"))