Merge pull request #2 from Simple2B/kostia/fix/basic_ui

Kostia/fix/basic UI

.vscode/settings.json

@@ -11,6 +11,7 @@
     "**/.venv/*/**": true
   },
   "cSpell.words": [
+    "bookname",
     "flowbite",
     "jsonify",
     "pydantic",

app/__init__.py

@@ -21,6 +21,8 @@ def create_app(environment="development"):
         main_blueprint,
         auth_blueprint,
         user_blueprint,
+        books_blueprint,
+        home_blueprint,
     )
     from app.models import (
         User,
@@ -46,6 +48,8 @@ def create_app(environment="development"):
     app.register_blueprint(auth_blueprint)
     app.register_blueprint(main_blueprint)
     app.register_blueprint(user_blueprint)
+    app.register_blueprint(books_blueprint)
+    app.register_blueprint(home_blueprint)
 
     # Set up flask login.
     @login_manager.user_loader

app/static/img/logo.svg

@@ -0,0 +1,4 @@
+<svg width="23" height="24" viewBox="0 0 23 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.8464 0.740723H8.58307e-06L6.67216 7.41288H22.5185L15.8464 0.740723ZM6.67215 7.41288V23.2592L0 16.5871V0.740727L6.67215 7.41288Z" fill="#CCCCCC"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.67218 23.2592L22.5185 23.2592L15.8464 16.5871L2.28882e-05 16.5871L6.67218 23.2592ZM15.8464 16.5871L15.8464 0.740725L22.5186 7.41288L22.5186 23.2592L15.8464 16.5871Z" fill="black"/>
+</svg>

app/static/js/books.d.ts

@@ -0,0 +1 @@
+export declare function initBooks(): void;

app/templates/base.html

@@ -74,8 +74,10 @@
     <!-- SideBar -->
     <!-- prettier-ignore -->
     {% include 'sidebar.html' %}
+    {% include 'right_sidebar.html' %}
+    {% include 'books/add_book_modal.html' %}
 
-    <div class="sm:ml-64 mt-14 h-full overflow-x-scroll">
+    <div class="sm:mx-64 p-0 mt-16 h-full overflow-x-scroll">
       <!-- Main Content -->
       {% block content %}{% endblock %}
     </div>

app/templates/books/add_book_modal.html

@@ -0,0 +1,29 @@
+<!-- Edit user modal -->
+<!-- prettier-ignore-->
+<div id="add-book-modal" tabindex="-1" aria-hidden="true" class="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full">
+  <div class="relative w-full max-w-2xl max-h-full">
+    <!-- Modal content -->
+    <form action="#" method="post" class="relative bg-white rounded-lg shadow dark:bg-gray-700">
+      <input type="hidden" name="user_id" id="user-edit-id" value="0" />
+      <input type="hidden" name="next_url" id="user-edit-next_url" value="" />
+      <!-- Modal header -->
+      <div class="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600">
+        <h3 class="text-xl font-semibold text-gray-900 dark:text-white"> Add book </h3>
+        <button id="modalAddCloseButton" data-modal-hide="add-book-modal" type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"> <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg> </button>
+      </div>
+      <!-- Modal body -->
+      <div class="p-6 space-y-6">
+        <div class="grid grid-cols-6 gap-6">
+          <div class="col-span-6 sm:col-span-3">
+            <label for="book_label" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" >Label</label >
+            <input type="text" name="book_label" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Name" required />
+          </div>
+        </div>
+      </div>
+      <!-- Modal footer -->
+      <div class="flex items-center p-6 space-x-2 border-t border-gray-200 rounded-b dark:border-gray-600">
+        <button name="submit" type="submit" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Add new book </button>
+      </div>
+    </form>
+  </div>
+</div>

app/templates/books/index.html

@@ -0,0 +1,10 @@
+<!-- prettier-ignore -->
+{% extends 'base.html' %}
+{% block content %}
+<div class="relative overflow-x-auto shadow-md sm:rounded-lg mt-5"></div>
+{% include 'user/add.html' %}
+<!-- prettier-ignore -->
+{% endblock %}
+<!-- prettier-ignore -->
+{% block scripts %}
+{% endblock %}

app/templates/header.html

@@ -2,93 +2,41 @@
   class="fixed top-0 z-50 w-full bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700">
   <div class="px-3 py-3 lg:px-5 lg:pl-3">
     <div class="flex items-center justify-between">
-      <div class="flex items-center justify-start">
+      <div class="flex w-full items-center md:justify-start justify-between">
-        <button
+        <!-- prettier-ignore -->
-          data-drawer-target="logo-sidebar"
+        <button data-drawer-target="logo-sidebar" data-drawer-toggle="logo-sidebar" aria-controls="logo-sidebar" type="button" class="inline-flex items-center p-2 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600">
-          data-drawer-toggle="logo-sidebar"
-          aria-controls="logo-sidebar"
-          type="button"
-          class="inline-flex items-center p-2 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600">
           <span class="sr-only">Open sidebar</span>
-          <svg
+          <!-- prettier-ignore -->
-            class="w-6 h-6"
+          <svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path clip-rule="evenodd" fill-rule="evenodd" d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z"></path> </svg>
-            aria-hidden="true"
-            fill="currentColor"
-            viewBox="0 0 20 20"
-            xmlns="http://www.w3.org/2000/svg">
-            <path
-              clip-rule="evenodd"
-              fill-rule="evenodd"
-              d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z"></path>
-          </svg>
         </button>
-        <a href="#" class="flex ml-2 md:mr-24">
+             <button data-drawer-target="logo-right-sidebar" data-drawer-toggle="logo-right-sidebar" aria-controls="logo-right-sidebar" type="button" class="inline-flex items-center p-2 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600">
-          <img
+          <span class="sr-only">Open filters</span>
-            src="{{url_for('static',filename='img/logo.svg')}}"
+          <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"> <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75" /> </svg>
-            class="h-8 mr-3"
+          </button>
-            alt="OpenLaw Logo" />
+        <!-- prettier-ignore -->
-          <span
+        <a href="#" class="flex ml-2 md:mr-24"> <img src="{{url_for('static',filename='img/logo.svg')}}" class="h-8 mr-3" alt="OpenLaw Logo" /> <span class="hidden md:inline-block self-center text-xl font-semibold sm:text-2xl whitespace-nowrap dark:text-white" >OpenLaw</span > </a>
-            class="self-center text-xl font-semibold sm:text-2xl whitespace-nowrap dark:text-white"
+
-            >OpenLaw</span
+        {% include 'searchbar.html' %}
-          >
+          <button id="theme-toggle" type="button" class="md:ml-auto text-gray-500 dark:text-gray-400 hover:bg-gray-100 mr-2 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5">
-        </a>
+          <!-- prettier-ignore -->
-      </div>
+          <svg id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path> </svg>
-      <div class="flex items-center">
+          <svg id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path> </svg>
-        <button
-          id="theme-toggle"
-          type="button"
-          class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 mr-2 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5">
-          <svg
-            id="theme-toggle-dark-icon"
-            class="hidden w-5 h-5"
-            fill="currentColor"
-            viewBox="0 0 20 20"
-            xmlns="http://www.w3.org/2000/svg">
-            <path
-              d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
-          </svg>
-          <svg
-            id="theme-toggle-light-icon"
-            class="hidden w-5 h-5"
-            fill="currentColor"
-            viewBox="0 0 20 20"
-            xmlns="http://www.w3.org/2000/svg">
-            <path
-              d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
-              fill-rule="evenodd"
-              clip-rule="evenodd"></path>
-          </svg>
         </button>
         {% if current_user.is_authenticated %}
         <div class="flex items-center ml-3">
-          <button
+          <!-- prettier-ignore -->
-            id="dropdownNotificationButton"
+          <button id="dropdownNotificationButton" data-dropdown-toggle="dropdownNotification" class="inline-flex items-center text-sm font-medium text-center text-gray-500 hover:text-gray-900 focus:outline-none dark:hover:text-white dark:text-gray-400" type="button">
-            data-dropdown-toggle="dropdownNotification"
+            <svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"></path> </svg>
-            class="inline-flex items-center text-sm font-medium text-center text-gray-500 hover:text-gray-900 focus:outline-none dark:hover:text-white dark:text-gray-400"
-            type="button">
-            <svg
-              class="w-6 h-6"
-              aria-hidden="true"
-              fill="currentColor"
-              viewBox="0 0 20 20"
-              xmlns="http://www.w3.org/2000/svg">
-              <path
-                d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"></path>
-            </svg>
             <div class="relative flex">
               <div
                 class="relative inline-flex w-3 h-3 bg-red-500 border-2 border-white rounded-full -top-2 right-3 dark:border-gray-900"></div>
             </div>
           </button>
           <!-- Dropdown menu -->
-          <div
+          <!--Those notification for now with dummy data-->
-            id="dropdownNotification"
+          <!-- prettier-ignore -->
-            class="z-20 hidden w-full max-w-sm bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-800 dark:divide-gray-700"
+          <div id="dropdownNotification" class="z-20 hidden w-full max-w-sm bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-800 dark:divide-gray-700" aria-labelledby="dropdownNotificationButton">
-            aria-labelledby="dropdownNotificationButton">
+            <div class="block px-4 py-2 font-medium text-center text-gray-700 rounded-t-lg bg-gray-50 dark:bg-gray-800 dark:text-white"> Notifications </div>
-            <div
-              class="block px-4 py-2 font-medium text-center text-gray-700 rounded-t-lg bg-gray-50 dark:bg-gray-800 dark:text-white">
-              Notifications
-            </div>
             <div class="divide-y divide-gray-100 dark:divide-gray-700">
               <a
                 href="#"
@@ -125,156 +73,6 @@
                   </div>
                 </div>
               </a>
-              <a
-                href="#"
-                class="flex px-4 py-3 hover:bg-gray-100 dark:hover:bg-gray-700">
-                <div class="flex-shrink-0">
-                  <img
-                    class="rounded-full w-11 h-11"
-                    src="/docs/images/people/profile-picture-2.jpg"
-                    alt="Joseph image" />
-                  <div
-                    class="absolute flex items-center justify-center w-5 h-5 ml-6 -mt-5 bg-gray-900 border border-white rounded-full dark:border-gray-800">
-                    <svg
-                      class="w-3 h-3 text-white"
-                      aria-hidden="true"
-                      fill="currentColor"
-                      viewBox="0 0 20 20"
-                      xmlns="http://www.w3.org/2000/svg">
-                      <path
-                        d="M8 9a3 3 0 100-6 3 3 0 000 6zM8 11a6 6 0 016 6H2a6 6 0 016-6zM16 7a1 1 0 10-2 0v1h-1a1 1 0 100 2h1v1a1 1 0 102 0v-1h1a1 1 0 100-2h-1V7z"></path>
-                    </svg>
-                  </div>
-                </div>
-                <div class="w-full pl-3">
-                  <div class="text-gray-500 text-sm mb-1.5 dark:text-gray-400">
-                    <span class="font-semibold text-gray-900 dark:text-white"
-                      >Joseph Mcfall</span
-                    >
-                    and
-                    <span class="font-medium text-gray-900 dark:text-white"
-                      >5 others</span
-                    >
-                    started following you.
-                  </div>
-                  <div class="text-xs text-blue-600 dark:text-blue-500">
-                    10 minutes ago
-                  </div>
-                </div>
-              </a>
-              <a
-                href="#"
-                class="flex px-4 py-3 hover:bg-gray-100 dark:hover:bg-gray-700">
-                <div class="flex-shrink-0">
-                  <img
-                    class="rounded-full w-11 h-11"
-                    src="/docs/images/people/profile-picture-3.jpg"
-                    alt="Bonnie image" />
-                  <div
-                    class="absolute flex items-center justify-center w-5 h-5 ml-6 -mt-5 bg-red-600 border border-white rounded-full dark:border-gray-800">
-                    <svg
-                      class="w-3 h-3 text-white"
-                      aria-hidden="true"
-                      fill="currentColor"
-                      viewBox="0 0 20 20"
-                      xmlns="http://www.w3.org/2000/svg">
-                      <path
-                        fill-rule="evenodd"
-                        d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"
-                        clip-rule="evenodd"></path>
-                    </svg>
-                  </div>
-                </div>
-                <div class="w-full pl-3">
-                  <div class="text-gray-500 text-sm mb-1.5 dark:text-gray-400">
-                    <span class="font-semibold text-gray-900 dark:text-white"
-                      >Bonnie Green</span
-                    >
-                    and
-                    <span class="font-medium text-gray-900 dark:text-white"
-                      >141 others</span
-                    >
-                    love your story. See it and view more stories.
-                  </div>
-                  <div class="text-xs text-blue-600 dark:text-blue-500">
-                    44 minutes ago
-                  </div>
-                </div>
-              </a>
-              <a
-                href="#"
-                class="flex px-4 py-3 hover:bg-gray-100 dark:hover:bg-gray-700">
-                <div class="flex-shrink-0">
-                  <img
-                    class="rounded-full w-11 h-11"
-                    src="/docs/images/people/profile-picture-4.jpg"
-                    alt="Leslie image" />
-                  <div
-                    class="absolute flex items-center justify-center w-5 h-5 ml-6 -mt-5 bg-green-400 border border-white rounded-full dark:border-gray-800">
-                    <svg
-                      class="w-3 h-3 text-white"
-                      aria-hidden="true"
-                      fill="currentColor"
-                      viewBox="0 0 20 20"
-                      xmlns="http://www.w3.org/2000/svg">
-                      <path
-                        fill-rule="evenodd"
-                        d="M18 13V5a2 2 0 00-2-2H4a2 2 0 00-2 2v8a2 2 0 002 2h3l3 3 3-3h3a2 2 0 002-2zM5 7a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1zm1 3a1 1 0 100 2h3a1 1 0 100-2H6z"
-                        clip-rule="evenodd"></path>
-                    </svg>
-                  </div>
-                </div>
-                <div class="w-full pl-3">
-                  <div class="text-gray-500 text-sm mb-1.5 dark:text-gray-400">
-                    <span class="font-semibold text-gray-900 dark:text-white"
-                      >Leslie Livingston</span
-                    >
-                    mentioned you in a comment:
-                    <span class="font-medium text-blue-500" href="#"
-                      >@bonnie.green</span
-                    >
-                    what do you say?
-                  </div>
-                  <div class="text-xs text-blue-600 dark:text-blue-500">
-                    1 hour ago
-                  </div>
-                </div>
-              </a>
-              <a
-                href="#"
-                class="flex px-4 py-3 hover:bg-gray-100 dark:hover:bg-gray-700">
-                <div class="flex-shrink-0">
-                  <img
-                    class="rounded-full w-11 h-11"
-                    src="/docs/images/people/profile-picture-5.jpg"
-                    alt="Robert image" />
-                  <div
-                    class="absolute flex items-center justify-center w-5 h-5 ml-6 -mt-5 bg-purple-500 border border-white rounded-full dark:border-gray-800">
-                    <svg
-                      class="w-3 h-3 text-white"
-                      aria-hidden="true"
-                      fill="currentColor"
-                      viewBox="0 0 20 20"
-                      xmlns="http://www.w3.org/2000/svg">
-                      <path
-                        d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z"></path>
-                    </svg>
-                  </div>
-                </div>
-                <div class="w-full pl-3">
-                  <div class="text-gray-500 text-sm mb-1.5 dark:text-gray-400">
-                    <span class="font-semibold text-gray-900 dark:text-white"
-                      >Robert Brown</span
-                    >
-                    posted a new video: Glassmorphism - learn how to implement
-                    the new design trend.
-                  </div>
-                  <div class="text-xs text-blue-600 dark:text-blue-500">
-                    3 hours ago
-                  </div>
-                </div>
-              </a>
-            </div>
             <a
               href="#"
               class="block py-2 text-sm font-medium text-center text-gray-900 rounded-b-lg bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-white">
@@ -295,60 +93,6 @@
               </div>
             </a>
           </div>
-
-          <div>
-            <button
-              type="button"
-              class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 mr-2 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5"
-              aria-expanded="false"
-              data-dropdown-toggle="dropdown-user">
-              <span class="sr-only">Open user menu</span>
-              <!-- prettier-ignore -->
-              <svg xmlns="http://www.w3.org/2000/svg" fill="" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" /></svg>
-            </button>
-          </div>
-          <div
-            class="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded shadow dark:bg-gray-700 dark:divide-gray-600"
-            id="dropdown-user">
-            <div class="px-4 py-3" role="none">
-              <p class="text-sm text-gray-900 dark:text-white" role="none">
-                {{current_user.username}}
-              </p>
-              <p
-                class="text-sm font-medium text-gray-900 truncate dark:text-gray-300"
-                role="none">
-                {{current_user.email}}
-              </p>
-            </div>
-            <ul class="py-1" role="none">
-              <li>
-                <a
-                  href="#"
-                  class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white"
-                  role="menuitem"
-                  >Dashboard</a
-                >
-              </li>
-              <li>
-                <a
-                  href="#"
-                  class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white"
-                  role="menuitem"
-                  data-modal-target="editCurrentUserModal"
-                  data-modal-show="editCurrentUserModal"
-                  >Settings</a
-                >
-              </li>
-              <li>
-                <a
-                  href="{{ url_for('auth.logout') }}"
-                  class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white"
-                  role="menuitem"
-                  >Sign out</a
-                >
-              </li>
-            </ul>
-          </div>
           {% endif %}
         </div>
       </div>

app/templates/home/index.html

@@ -0,0 +1,18 @@
+<!-- prettier-ignore -->
+{% extends 'base.html' %}
+{% block content %}
+<div class="mt-4 border-b border-gray-200 dark:border-gray-700">
+  <!-- prettier-ignore -->
+  <ul class="flex flex-wrap -mb-px text-sm font-medium text-center text-gray-500 dark:text-gray-400">
+    <li class="mr-2">
+     <a href="" class="inline-flex p-4 text-blue-600 border-b-2 border-blue-600 rounded-t-lg active dark:text-blue-500 dark:border-blue-500 group" aria-current="page"> <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> Last Sections </a>
+    </li>
+    <li class="mr-2">
+       <a href="#" class="inline-flex p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 group" ><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="M16.5 3.75V16.5L12 14.25 7.5 16.5V3.75m9 0H18A2.25 2.25 0 0120.25 6v12A2.25 2.25 0 0118 20.25H6A2.25 2.25 0 013.75 18V6A2.25 2.25 0 016 3.75h1.5m9 0h-9" /> </svg> Explore Books </a>
+    </li>
+    <li class="mr-2">
+      <a href="#" class="inline-flex p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 group"><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="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m5.231 13.481L15 17.25m-4.5-15H5.625c-.621 0-1.125.504-1.125 1.125v16.5c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9zm3.75 11.625a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" /> </svg> All sections </a>
+    </li>
+  </ul>
+</div>
+{% endblock %}

app/templates/right_sidebar.html

@@ -0,0 +1,111 @@
+<aside
+  id="logo-right-sidebar"
+  class="fixed top-0 right-0 left-auto z-40 w-64 h-screen pt-28 transition-transform translate-x-96 bg-white border-r border-gray-200 sm:translate-x-0 dark:bg-gray-800 dark:border-gray-700"
+  aria-label="Right-sidebar">
+  <div class="h-full pb-4 overflow-y-auto bg-white dark:bg-gray-800">
+    <ul class="space-y-4 font-medium">
+      <li>
+        <!-- prettier-ignore -->
+        <button type="button" data-modal-target="add-book-modal" data-modal-toggle="add-book-modal" class="text-white ml-2 w-11/12 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"><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"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /> </svg> New book </button>
+      </li>
+      <li>
+        <button
+          id="dropdownDelayButton"
+          data-dropdown-toggle="dropdownDelay"
+          data-dropdown-delay="500"
+          data-dropdown-trigger="hover"
+          class="text-white ml-2 w-11/12 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+          type="button">
+          <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">
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M6 13.5V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 9.75V10.5" />
+          </svg>
+          Filters
+        </button>
+        <!-- Dropdown menu -->
+        <!-- prettier-ignore -->
+        <div id="dropdownDelay" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
+          <ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDelayButton">
+            <!-- prettier-ignore -->
+            <li> <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" >Dashboard</a > </li>
+            <li> <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" >Settings</a > </li>
+          </ul>
+        </div>
+      </li>
+      <li>
+        <button
+          id="dropdownDelayButton"
+          data-dropdown-toggle="dropdownDelay"
+          data-dropdown-delay="500"
+          data-dropdown-trigger="hover"
+          class="text-white ml-2 w-11/12 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+          type="button">
+          Tags
+          <svg
+            class="w-4 h-4 ml-auto"
+            aria-hidden="true"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg">
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M19 9l-7 7-7-7"></path>
+          </svg>
+        </button>
+        <!-- Dropdown menu -->
+        <!-- prettier-ignore -->
+        <div id="dropdownDelay" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
+          <ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDelayButton">
+            <!-- prettier-ignore -->
+            <li> <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" >Dashboard</a > </li>
+            <li> <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" >Settings</a > </li>
+          </ul>
+        </div>
+      </li>
+      <li>
+        <button
+          id="dropdownDelayButton"
+          data-dropdown-toggle="dropdownDelay"
+          data-dropdown-delay="500"
+          data-dropdown-trigger="hover"
+          class="text-white ml-2 w-11/12 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+          type="button">
+          Sort by
+          <svg
+            class="w-4 h-4 ml-auto"
+            aria-hidden="true"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg">
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M19 9l-7 7-7-7"></path>
+          </svg>
+        </button>
+        <!-- Dropdown menu -->
+        <!-- prettier-ignore -->
+        <div id="dropdownDelay" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
+          <ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDelayButton">
+            <!-- prettier-ignore -->
+            <li> <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" >Dashboard</a > </li>
+            <li> <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" >Settings</a > </li>
+          </ul>
+        </div>
+      </li>
+    </ul>
+  </div>
+</aside>

app/templates/searchbar.html

@@ -0,0 +1,14 @@
+<!-- prettier-ignore -->
+<div class="hidden items-center justify-center py-1 bg-white dark:bg-gray-800 md:flex">
+    <label for="table-search" class="sr-only">Search</label>
+    <div class="relative">
+        <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+        <!-- prettier-ignore -->
+        <svg class="w-5 h-5 text-gray-500 dark:text-gray-400" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg>
+        </div>
+        <!-- prettier-ignore -->
+        <input {% if search_query %}value={{ search_query }}{% endif %} type="text" id="table-search-users" class="block p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg w-80 bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Search for users"/>
+    </div>
+    <!-- prettier-ignore -->
+    <button type="button"id="table-search-user-button" class="md:flex px-3 py-2 text-xs text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 ml-2 font-medium rounded-lg text-center inline-flex items-center mr-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"><svg class="w-5 h-5 text-white-500" 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 ml-0 mr-1"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 15.75l-2.489-2.489m0 0a3.375 3.375 0 10-4.773-4.773 3.375 3.375 0 004.774 4.774zM21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>Search</button>
+</div>

app/templates/sidebar.html

@@ -1,23 +1,34 @@
 <aside
   id="logo-sidebar"
-  class="fixed top-0 left-0 z-40 w-64 h-screen pt-20 transition-transform -translate-x-full bg-white border-r border-gray-200 sm:translate-x-0 dark:bg-gray-800 dark:border-gray-700"
+  class="fixed top-0 left-0 z-40 w-64 h-screen pt-28 transition-transform -translate-x-full bg-white border-r border-gray-200 sm:translate-x-0 dark:bg-gray-800 dark:border-gray-700"
   aria-label="Sidebar">
   <div class="h-full px-3 pb-4 overflow-y-auto bg-white dark:bg-gray-800">
     <ul class="space-y-2 font-medium">
+      <li>
+        <a
+          href="{{ url_for('home.get_all') }}"
+          class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
+          <!-- prettier-ignore -->
+          <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"> <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" /> </svg>
+          <span class="ml-3">Home</span>
+        </a>
+      </li>
+      <li>
+        <a
+          href="{{ url_for('books.get_all') }}"
+          class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
+          <!-- prettier-ignore -->
+          <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"> <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 3.75V16.5L12 14.25 7.5 16.5V3.75m9 0H18A2.25 2.25 0 0120.25 6v12A2.25 2.25 0 0118 20.25H6A2.25 2.25 0 013.75 18V6A2.25 2.25 0 016 3.75h1.5m9 0h-9" /> </svg>
+          <span class="ml-3">My Books</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">
-          <svg
+          <!-- prettier-ignore -->
-            aria-hidden="true"
+          <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"> <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.76c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.076-4.076a1.526 1.526 0 011.037-.443 48.282 48.282 0 005.68-.494c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z" /> </svg>
-            class="w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+          <span class="ml-3">My Contributions</span>
-            fill="currentColor"
-            viewBox="0 0 20 20"
-            xmlns="http://www.w3.org/2000/svg">
-            <path d="M2 10a8 8 0 018-8v8h8a8 8 0 11-16 0z"></path>
-            <path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z"></path>
-          </svg>
-          <span class="ml-3">Dashboard</span>
         </a>
       </li>
       <li>

app/templates/user/users.html

@@ -1,29 +1,8 @@
 <!-- prettier-ignore -->
 {% extends 'base.html' %}
 {% block content %}
-<div class="relative overflow-x-auto shadow-md sm:rounded-lg">
+<div class="relative overflow-x-auto shadow-md sm:rounded-lg mt-5">
-  <div class="flex items-center justify-center py-4 bg-white dark:bg-gray-800">
-    <label for="table-search" class="sr-only">Search</label>
-    <div class="relative">
-      <div
-        class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none"
-      >
  
-      <!-- prettier-ignore -->
-        <svg class="w-5 h-5 text-gray-500 dark:text-gray-400" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg>
-      </div>
-      <!-- prettier-ignore -->
-      <input {% if search_query %}value={{ search_query }}{% endif %} type="text" id="table-search-users" class="block p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg w-80 bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Search for users"/>
-    </div>
-    <!-- prettier-ignore -->
-    <button type="button"id="table-search-user-button" class="px-3 py-2 text-xs text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 ml-2 font-medium rounded-lg text-center inline-flex items-center mr-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"><svg class="w-5 h-5 text-white-500" 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 ml-0 mr-1"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 15.75l-2.489-2.489m0 0a3.375 3.375 0 10-4.773-4.773 3.375 3.375 0 004.774 4.774zM21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>Search</button>
-    <div class="flex items-center ml-auto space-x-2 sm:space-x-3">
-      <button type="button" data-modal-toggle="add-user-modal" class="inline-flex items-center justify-center w-1/2 px-3 py-2 text-sm font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 sm:w-auto dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
-        <svg class="w-5 h-5 mr-2 -ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd"></path></svg>
-        Add user
-      </button>
-    </div>
-  </div>
   <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
     <thead
       class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400"

app/views/__init__.py

@@ -2,3 +2,5 @@
 from .auth import auth_blueprint
 from .main import main_blueprint
 from .user import bp as user_blueprint
+from .books import bp as books_blueprint
+from .home import bp as home_blueprint

app/views/books.py

@@ -0,0 +1,50 @@
+from flask import (
+    Blueprint,
+    render_template,
+    request,
+    flash,
+    redirect,
+    url_for,
+)
+from flask_login import login_required
+from app.controllers import create_pagination
+
+from app import models as m
+from app import forms as f
+from app.logger import log
+
+bp = Blueprint("books", __name__, url_prefix="/books")
+
+
+@bp.route("/", methods=["GET"])
+def get_all():
+    # q = request.args.get("q", type=str, default=None)
+    # books = m.Book.query.order_by(m.Book.id)
+    # if q:
+    #     books = books.filter(m.Book.label.like(f"{q}"))
+
+    # pagination = create_pagination(total=books.count())
+
+    # return render_template(
+    #     "books/index.html",
+    #     books=books.paginate(page=pagination.page, per_page=pagination.per_page),
+    #     page=pagination,
+    #     search_query=q,
+    # )
+    return render_template(
+        "books/index.html",
+    )
+
+
+@bp.route("/create", methods=["POST"])
+@login_required
+def create():
+    form = f.NewBookForm()
+    if form.validate_on_submit():
+        book = m.Book(
+            label=form.label.data,
+        )
+        log(log.INFO, "Form submitted. User: [%s]", book)
+        flash("Book added!", "success")
+        book.save()
+        return redirect(url_for("books.get_all"))

app/views/home.py

@@ -0,0 +1,15 @@
+from flask import (
+    Blueprint,
+    render_template,
+)
+
+
+bp = Blueprint("home", __name__, url_prefix="/home")
+
+
+@bp.route("/", methods=["GET"])
+def get_all():
+
+    return render_template(
+        "home/index.html",
+    )

config.py

@@ -11,7 +11,7 @@ class BaseConfig(BaseSettings):
     """Base configuration."""
 
     ENV: str = "base"
-    APP_NAME: str = "Simple Flask App"
+    APP_NAME: str = "Open Law"
     SECRET_KEY: str
     SQLALCHEMY_TRACK_MODIFICATIONS: bool = False
     WTF_CSRF_ENABLED: bool = False

project.env

@@ -1,7 +1,7 @@
 # Put environment variables that hold sensitive data such as passwords here.
 # NOTE: This file will not be placed under version control.
 
-APP_NAME=Simple Flask App
+APP_NAME=Open Law
 SECRET_KEY=set_here_secret
 
 # Database

src/books.ts

@@ -0,0 +1,32 @@
+import {Modal} from 'flowbite';
+import type {ModalOptions, ModalInterface} from 'flowbite';
+
+// // For your js code
+const $addUserModalElement: HTMLElement =
+  document.querySelector('#add-book-modal');
+
+const modalOptions: ModalOptions = {
+  placement: 'bottom-right',
+  closable: true,
+  onHide: () => {
+    console.log('modal is hidden');
+  },
+  onShow: () => {
+    console.log('user id: ');
+  },
+  onToggle: () => {
+    console.log('modal has been toggled');
+  },
+};
+
+const addModal: ModalInterface = new Modal($addUserModalElement, modalOptions);
+
+export function initBooks() {
+  // closing add book modal
+  const addModalCloseBtn = document.querySelector('#modalAddCloseButton');
+  if (addModalCloseBtn) {
+    addModalCloseBtn.addEventListener('click', () => {
+      addModal.hide();
+    });
+  }
+}

src/main.ts

@@ -1,4 +1,4 @@
 import './styles.css';
-import {initUsers} from './user';
+import {initBooks} from './books';
 
-initUsers();
+initBooks();