update

reader/src/App.jsx

@@ -1,5 +1,11 @@
 import { useLayoutEffect, useState, useRef, useEffect } from "react";
-import { ArrowBackIcon, ArrowForwardIcon, MenuBookIcon, MyLocationIcon } from "./icons/Icons";
+import {
+  ArrowBackIcon,
+  ArrowForwardIcon,
+  MenuBookIcon,
+  MyLocationIcon,
+  TitleIcon,
+} from "./icons/Icons";
 
 import structureOriginal from "./structure.json";
 
@@ -67,12 +73,14 @@ export function TopicListView({ selectedIndex, onChange }) {
   );
 }
 
-function Layout({ children, title }) {
+function Layout({ children, title, displayTitle }) {
   return (
     <div className="max-w-7xl mx-auto h-full relative flex flex-col">
-      <div className="w-full px-4 py-2 font-medium text-large text-white bg-blue-600">
-        <span>{title}</span>
-      </div>
+      {displayTitle && (
+        <div className="w-full px-4 py-2 font-medium text-large text-white bg-blue-600">
+          <span>{title}</span>
+        </div>
+      )}
       {children}
     </div>
   );
@@ -82,6 +90,7 @@ export default function App() {
   const [isMenuOpen, setIsMenuOpen] = useState(true);
   const [selectedIndex, setSelectedIndex] = useState(null);
   const [versions, setVersions] = useState(Array.from({ length: structure.length }, () => 0));
+  const [displayTitle, setDisplayTitle] = useState(true);
 
   function handleChange(i) {
     setSelectedIndex(i);
@@ -90,25 +99,38 @@ export default function App() {
 
   if (isMenuOpen) {
     return (
-      <Layout title="Конспект за Държавен Изпит">
+      <Layout title="Конспект за Държавен Изпит" displayTitle>
         <TopicListView selectedIndex={selectedIndex} onChange={handleChange} />
       </Layout>
     );
   }
 
   return (
-    <Layout title={`${selectedIndex + 1}: ${structure[selectedIndex].title}`}>
+    <Layout
+      title={`${selectedIndex + 1}: ${structure[selectedIndex].title}`}
+      displayTitle={displayTitle}
+    >
       <div className="flex-1">
         <Reader file={structure[selectedIndex].files[versions[selectedIndex]]} />
         <div className="absolute bottom-10 flex justify-between px-4 py-2 w-full z-999">
-          <button
-            className="cursor-pointer p-2 rounded-full bg-blue-600 text-white"
-            onClick={() => {
-              setIsMenuOpen(true);
-            }}
-          >
-            <MenuBookIcon className="fill-gray-100" />
-          </button>
+          <div className="flex space-x-2">
+            <button
+              className="cursor-pointer p-2 rounded-full bg-blue-600 text-white"
+              onClick={() => {
+                setIsMenuOpen(true);
+              }}
+            >
+              <MenuBookIcon className="fill-gray-100" />
+            </button>
+            <button
+              className={`cursor-pointer p-2 rounded-full text-white border ${displayTitle ? "bg-blue-100 border-blue-400" : "bg-gray-100 border-gray-400"}`}
+              onClick={() => {
+                setDisplayTitle((prev) => !prev);
+              }}
+            >
+              <TitleIcon className="fill-gray-600" />
+            </button>
+          </div>
           {structure[selectedIndex].files.length > 1 && (
             <div className="flex space-x-1">
               {structure[selectedIndex].files.map((file, vIndex) => (
@@ -139,7 +161,7 @@ export default function App() {
           {selectedIndex === 0 ? (
             <div className="flex-1 border-r border-blue-200" />
           ) : (
-            <div
+            <button
               onClick={() => setSelectedIndex((prev) => prev - 1)}
               className="border-r border-blue-200 w-1/2 flex-1 px-4 py-2 hover:bg-blue-200 cursor-pointer flex align-center justify-start"
             >
@@ -147,12 +169,12 @@ export default function App() {
               <span className="ml-2 truncate w-full ">
                 {selectedIndex}: {structure[selectedIndex - 1].title}
               </span>
-            </div>
+            </button>
           )}
           {selectedIndex === structure.length - 1 ? (
             <div className="flex-1" />
           ) : (
-            <div
+            <button
               onClick={() => setSelectedIndex((prev) => prev + 1)}
               className="flex-1 px-4 py-2 hover:bg-blue-200 w-1/2 cursor-pointer flex align-center justify-end"
             >
@@ -160,7 +182,7 @@ export default function App() {
                 {selectedIndex + 2}: {structure[selectedIndex + 1].title}
               </span>
               <ArrowForwardIcon />
-            </div>
+            </button>
           )}
         </div>
       </div>

reader/src/icons/Icons.jsx

@@ -14,6 +14,22 @@ export function MyLocationIcon({ className }) {
   );
 }
 
+export function TitleIcon({ className }) {
+  return (
+    <svg
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+      height="24px"
+      viewBox="0 0 24 24"
+      width="24px"
+      fill="inherit"
+    >
+      <path d="M0 0h24v24H0V0z" fill="none" />
+      <path d="M5 4v3h5.5v12h3V7H19V4H5z" />
+    </svg>
+  );
+}
+
 export function MenuBookIcon({ className }) {
   return (
     <svg