Update folder structure

src/app.tsx

@@ -19,7 +19,8 @@ import {
 import { useEffect, useRef, useState } from "react";
 
 import { GlobalContext } from "./contexts";
-import { Header, SideNav } from "./components";
+import { LayerPanel } from "./layer-panel";
+import { Header } from "./header";
 
 const baseStyleSpec: StyleSpecification = {
   version: 8,
@@ -116,7 +117,7 @@ function App() {
   return (
     <GlobalContext.Provider value={{ map }}>
       <Header />
-      <SideNav />
+      <LayerPanel />
 
       {/* Map Container */}
       <div

src/components/ui/icon/icon.tsx → src/components/icon/icon.tsx

@@ -1,7 +1,7 @@
 import classNames from "classnames";
 import React, { HTMLProps } from "react";
 import IcoMoon from "react-icomoon";
-import iconSet from "../../../assets/icons/selection.json";
+import iconSet from "../../assets/icons/selection.json";
 import { IconIdentifier } from "./constants";
 
 export type IconProps = HTMLProps<SVGAElement> & {

src/components/index.ts

@@ -1,2 +1,3 @@
-export * from "./header";
-export * from "./sidenav";
+export * from "./modal";
+export * from "./button";
+export * from "./icon";

src/components/ui/modal/modal.tsx → src/components/modal/modal.tsx

@@ -3,7 +3,7 @@ import React from "react";
 
 import classNames from "classnames";
 import { Icon, IconIdentifier } from "../icon";
-import { ModalBaseProps, ModalComponents, ModalProps } from "./type";
+import { ModalComponents, ModalProps } from "./type";
 
 export const Modal: React.FC<ModalProps> & ModalComponents = ({
   title,

src/components/ui/modal/type.ts → src/components/modal/type.ts

@@ -1,5 +1,5 @@
 import { HTMLProps } from "react";
-import { ForwardRef } from "../../../utils";
+import { ForwardRef } from "../../utils";
 
 export type ModalBaseProps = HTMLProps<HTMLDivElement>;
 

src/components/header/header.tsx → src/header/header.tsx

@@ -1,4 +1,4 @@
-import { Icon, IconIdentifier } from "../ui";
+import { Icon, IconIdentifier } from "../components";
 import { Search } from "./search";
 
 export const Header = () => {

src/components/header/search.tsx → src/header/search.tsx

@@ -1,14 +1,14 @@
 import classNames from "classnames";
 import React, { ChangeEvent, useContext, useEffect, useState } from "react";
-import { GlobalContext } from "../../contexts";
+import { GlobalContext } from "../contexts";
 import {
   FeatureCollectionResponse,
   FeatureResponse,
   SelectedLocation,
 } from "./types";
 
 import { useDebounce } from "@uidotdev/usehooks";
-import { Icon, IconIdentifier } from "../ui";
+import { Icon, IconIdentifier } from "../components";
 
 type SearchProps = React.HTMLProps<HTMLDivElement>;
 

src/components/draw/constants.ts → src/layer-panel/draw/constants.ts

@@ -1,4 +1,4 @@
-import { IconIdentifier } from "../ui";
+import { IconIdentifier } from "../../components";
 
 export const MODES = {
   select: {

src/components/draw/draw.tsx → src/layer-panel/draw/draw.tsx

@@ -4,7 +4,7 @@ import { TerraDraw, TerraDrawMapLibreGLAdapter } from "terra-draw";
 import { GlobalContext } from "../../contexts";
 
 import classNames from "classnames";
-import { Button, IconIdentifier } from "../ui";
+import { Button, IconIdentifier } from "../../components";
 import { MODES } from "./constants";
 import { setupModes } from "./helpers";
 

src/layer-panel/index.ts

@@ -0,0 +1 @@
+export * from "./layer-panel";

src/components/sidenav.tsx → src/layer-panel/layer-panel.tsx

@@ -2,12 +2,12 @@ import { useLocalStorage } from "@uidotdev/usehooks";
 import classNames from "classnames";
 import { Draw } from "./draw";
 import { Layer } from "./layer";
-import { Icon, IconIdentifier } from "./ui";
+import { Icon, IconIdentifier } from "../components";
 
-export const SideNav = () => {
+export const LayerPanel = () => {
   // States.
   const [show, setShow] = useLocalStorage<boolean>(
-    "isSideNavOpen",
+    "isLayerPanelOpen",
     window.innerWidth >= 1024
   );
 
@@ -21,7 +21,7 @@ export const SideNav = () => {
   );
 
   // Handlers.
-  const onClickToggleSideNav = () => {
+  const onClickToggleLayerPanel = () => {
     setShow((prev) => !prev);
   };
 
@@ -30,7 +30,7 @@ export const SideNav = () => {
       {/* Toggle Button */}
       <button
         className="absolute flex ml-60 px-1 py-4 w-[1.4rem] top-2/4 -translate-y-2/4 bg-gray-900 text-gray-50 rounded-e-lg border-r border-t border-b border-gray-700"
-        onClick={onClickToggleSideNav}
+        onClick={onClickToggleLayerPanel}
       >
         <Icon
           identifier={

src/components/layer.tsx → src/layer-panel/layer.tsx

@@ -1,7 +1,7 @@
 import { useToggle } from "@uidotdev/usehooks";
 import { useContext } from "react";
 import { GlobalContext } from "../contexts";
-import { Icon, IconIdentifier } from "./ui";
+import { Icon, IconIdentifier } from "../components";
 
 export const Layer = () => {
   // States.