feat: Bookshelf,

src/app/features/bookShelfSlice.ts

@@ -0,0 +1,20 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+let initialState: BookShelf = [];
+if( localStorage.getItem("bookShelf")!==null ){
+    initialState = JSON.parse( localStorage.getItem("bookShelf") as string );
+}
+
+export const bookShelfSlice = createSlice({
+    name: "bookShelf",
+    initialState: initialState,
+    reducers: {
+        addBook: (state, {payload}: {payload: string}) => {
+            state.push(payload);
+            localStorage.setItem('bookShelf', JSON.stringify(state));
+        }
+    }
+})
+
+export const {addBook} = bookShelfSlice.actions;
+export default bookShelfSlice.reducer;

src/app/hook.ts

@@ -0,0 +1,5 @@
+import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
+import { AppDispatch, RootState } from "./store";
+
+export const useAppDispatch: () => AppDispatch = useDispatch
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

src/app/store.ts

@@ -1,8 +1,14 @@
 import { configureStore } from "@reduxjs/toolkit";
+import bookShelfReducer from "./features/bookShelfSlice";
 import bookReducer from "./features/bookSlice";
 
-export default configureStore({
+const store = configureStore({
     reducer: {
-        book: bookReducer
+        book: bookReducer,
+        bookShelf: bookShelfReducer
     }
-});
+});
+
+export default store;
+export type RootState = ReturnType<typeof store.getState>
+export type AppDispatch = typeof store.dispatch

src/components/Book.tsx

@@ -1,11 +1,11 @@
 import { useEffect, useRef } from "react";
-import { useDispatch, useSelector } from "react-redux";
 import { add } from "../app/features/bookSlice";
+import { useAppDispatch, useAppSelector } from "../app/hook";
 
 export default function Book(){
     // @ts-ignore
-    const text: string = useSelector(s => s.book.text);
-    const dispatch = useDispatch();
+    const text: string = useAppSelector(s => s.book.text);
+    const dispatch = useAppDispatch();
     const textRef = useRef<HTMLDivElement>(null);
 
     useEffect( ()=>{

src/components/Navbar.tsx

@@ -1,20 +1,72 @@
-import { useState } from "react";
+import { useState, useRef, FormEvent, useMemo } from "react";
+import { addBook } from "../app/features/bookShelfSlice";
+import { useAppDispatch, useAppSelector } from "../app/hook";
 
 export default function Navbar(){
+    const LABEL = 'New';
     const [state, setState] = useState(false);
+    const createBtnRef = useRef<HTMLDivElement>(null);
+    const [isHidden, setIsHidden] = useState(true);
+    // let [bookShelf, setBookShelf] = useState<BookShelf>([]);
+    let bookShelf: BookShelf = useAppSelector(s => s.bookShelf);
+    const dispatch = useAppDispatch();
 
-    const handleToggle = ()=>{
-        setState( (prev: boolean )=> !prev );
+    const bookListItem = useMemo( () => {
+        return bookShelf.map( book => <li key={book} className="px-2 lg:px-4 py-2 hover:text-front hover:cursor-pointer">{book}</li> );
+    }, [bookShelf]);
+
+    const handleToggle = ()=> setState( (prev: boolean )=> !prev );
+
+    const changeNewText = (e: FormEvent<HTMLDivElement>)=>{
+        let text: string|undefined|null = createBtnRef.current?.textContent;
+        (LABEL === text || text==="") ? setIsHidden(true) : setIsHidden(false);
+    }
+
+    const HandleEnter = (e: any) => {
+        if(e.key === 'Enter') {
+            e.preventDefault();
+            console.log(createBtnRef.current?.textContent);
+            if(createBtnRef.current !== null) {
+                // createBtnRef.current.textContent = LABEL;
+            }
+        }
+    }
+
+    const resetDefault = (e: FormEvent) => {
+        if(createBtnRef.current !== null) {
+            if(createBtnRef.current.textContent===""){
+                createBtnRef.current.textContent = LABEL;
+            }
+        }
+    }
+
+    const save = () => {
+        let text: string|undefined|null = createBtnRef.current?.textContent;
+
+        if( createBtnRef.current!==null ){
+            createBtnRef.current.textContent = LABEL;
+            createBtnRef.current.blur();
+        }
+        if( text!==undefined && text!==null && text!=="" && text.toLowerCase()!==LABEL.toLowerCase()) {
+            // setBookShelf( prev => [...prev, text?.toLowerCase() as string] )
+            dispatch(addBook(text.toLowerCase() as string));
+            setIsHidden(true)
+        }
     }
 
     return (
         <>
         <nav className="bg-hard text-mixed border-[1px] border-hard rounded-sm lg:px-0 lg:fixed lg:h-full lg:w-[280px]">
             <h1 className="text-light text-lg font-bold py-3 px-2 lg:px-4 border-b-[1px] rounded-sm">Note pen <span onClick={handleToggle} className="float-right lg:hidden">0</span></h1>
             <ul className={`px-2 lg:px-0 overflow-hidden ${ state?'h-full':'h-0' } lg:h-full`}>
-                <li className="px-2 lg:px-4 py-2 hover:text-front hover:cursor-pointer ">Scrapper</li>
-                <li className="px-2 lg:px-4 py-2 hover:text-front hover:cursor-pointer nav_active">Test</li>
-                <li className="px-2 lg:px-4 py-2 hover:text-front hover:cursor-pointer">qweuowqeuoieu wqeoui</li>
+                <li className="px-2 lg:px-4 py-2 hover:text-front hover:cursor-pointer flex">
+                    <div ref={createBtnRef} className="w-full text-blue-200 focus-visible:outline-none focus-visible:border-none" contentEditable="true" suppressContentEditableWarning={true} onInput={ (e)=>{ changeNewText(e) } } onKeyPress={HandleEnter} onBlur={(e)=>{resetDefault(e)}}>
+                        {LABEL}
+                    </div>
+                    <div onClick={save} className={`float-right text-xl ${ isHidden?"hidden":"" }`}>+</div>
+                </li>
+                <li className="px-2 lg:px-4 py-2 hover:text-front hover:cursor-pointer nav_active">Example</li>
+                { bookListItem }
             </ul>
         </nav>
         </>

src/index.css

@@ -15,6 +15,6 @@
 
 @layer components{
     .nav_active{
-        @apply bg-mixed text-hard rounded-sm;
+        @apply bg-mixed text-hard rounded-sm mb-1;
     }
 }

src/type.d.ts

@@ -0,0 +1 @@
+type BookShelf = string[];