From ff9f87cec1cfe9dd900d273dfe3b641356dbddcd Mon Sep 17 00:00:00 2001 From: =?utf8?q?=EC=9E=84=EC=A4=80=ED=98=81?= Date: Sun, 8 Sep 2024 23:04:10 +0900 Subject: [PATCH] Modularizing navigation bar Issue-ID: AIMLFW-115 Change-Id: I8addf05d94e24a84511d5d53730c1e5bd9cf19d7 Signed-off-by: CodImJun --- src/components/button/index.js | 1 + src/components/button/theme-toggle-button.js | 9 ++++ src/components/home/HomePage.js | 4 +- src/components/home/navbar/NavbarComponent.js | 58 ---------------------- src/components/index.js | 3 ++ src/components/navigation/index.js | 1 + .../navigation-bar.css} | 0 src/components/navigation/navigation-bar.js | 26 ++++++++++ src/hooks/index.js | 1 + src/hooks/useTheme.js | 17 +++++++ 10 files changed, 60 insertions(+), 60 deletions(-) create mode 100644 src/components/button/index.js create mode 100644 src/components/button/theme-toggle-button.js delete mode 100644 src/components/home/navbar/NavbarComponent.js create mode 100644 src/components/index.js create mode 100644 src/components/navigation/index.js rename src/components/{home/navbar/NavbarComponent.css => navigation/navigation-bar.css} (100%) create mode 100644 src/components/navigation/navigation-bar.js create mode 100644 src/hooks/index.js create mode 100644 src/hooks/useTheme.js diff --git a/src/components/button/index.js b/src/components/button/index.js new file mode 100644 index 0000000..3b4c014 --- /dev/null +++ b/src/components/button/index.js @@ -0,0 +1 @@ +export * from './theme-toggle-button'; diff --git a/src/components/button/theme-toggle-button.js b/src/components/button/theme-toggle-button.js new file mode 100644 index 0000000..d1c65c4 --- /dev/null +++ b/src/components/button/theme-toggle-button.js @@ -0,0 +1,9 @@ +import { Button } from 'react-bootstrap'; + +export const ThemeToggleButton = ({ theme, toggleTheme }) => { + return ( + + ); +}; diff --git a/src/components/home/HomePage.js b/src/components/home/HomePage.js index 5ad0d14..9921e3b 100644 --- a/src/components/home/HomePage.js +++ b/src/components/home/HomePage.js @@ -22,8 +22,8 @@ import StatusPageRows from './status/StatusPageRows'; import UploadPipelineForm from './pipelines/UploadPipeline'; import CreateFeatureGroup from './create/CreateFeatureGroup'; import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; -import NavbarComponent from './navbar/NavbarComponent'; import ListFeatureGroup from './status/ListFeatureGroup'; +import { NavigationBar } from '../navigation'; import { debug_var } from '../../states'; var DEBUG = debug_var === 'true'; @@ -38,7 +38,7 @@ class HomePage extends React.Component { return ( <> - + } /> diff --git a/src/components/home/navbar/NavbarComponent.js b/src/components/home/navbar/NavbarComponent.js deleted file mode 100644 index 264a1b4..0000000 --- a/src/components/home/navbar/NavbarComponent.js +++ /dev/null @@ -1,58 +0,0 @@ -// ================================================================================== - -// Copyright (c) 2022 Samsung Electronics Co., Ltd. All Rights Reserved. - -// Licensed under the Apache License, Version 2.0 (the "License"); -// you may not use this file except in compliance with the License. -// You may obtain a copy of the License at - -// http://www.apache.org/licenses/LICENSE-2.0 - -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS IS" BASIS, -// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -// See the License for the specific language governing permissions and -// limitations under the License. - -// ================================================================================== - -import React, { useState, useEffect } from 'react'; -import { Container, Nav, Navbar, NavDropdown, Button } from 'react-bootstrap'; -import 'bootstrap-icons/font/bootstrap-icons.css'; -import './NavbarComponent.css'; - -function NavbarComponent() { - const [isDarkMode, setIsDarkMode] = useState(() => { - const savedTheme = localStorage.getItem('isDarkMode'); - return savedTheme === 'true'; - }); - - useEffect(() => { - document.body.setAttribute('data-bs-theme', isDarkMode ? 'dark' : 'light'); - localStorage.setItem('isDarkMode', isDarkMode); - }, [isDarkMode]); - - const toggleDarkMode = () => { - setIsDarkMode(!isDarkMode); - }; - - return ( - - - AI/ML Management Dashboard - - - - ); -} - -export default NavbarComponent; diff --git a/src/components/index.js b/src/components/index.js new file mode 100644 index 0000000..267be40 --- /dev/null +++ b/src/components/index.js @@ -0,0 +1,3 @@ +export * from './button'; +export * from './home'; +export * from './navigation'; diff --git a/src/components/navigation/index.js b/src/components/navigation/index.js new file mode 100644 index 0000000..c9099a2 --- /dev/null +++ b/src/components/navigation/index.js @@ -0,0 +1 @@ +export * from './navigation-bar'; diff --git a/src/components/home/navbar/NavbarComponent.css b/src/components/navigation/navigation-bar.css similarity index 100% rename from src/components/home/navbar/NavbarComponent.css rename to src/components/navigation/navigation-bar.css diff --git a/src/components/navigation/navigation-bar.js b/src/components/navigation/navigation-bar.js new file mode 100644 index 0000000..27058c4 --- /dev/null +++ b/src/components/navigation/navigation-bar.js @@ -0,0 +1,26 @@ +import { NavDropdown } from 'react-bootstrap'; +import { Container, Nav, Navbar } from 'react-bootstrap'; +import 'bootstrap-icons/font/bootstrap-icons.css'; +import './navigation-bar.css'; +import { useTheme } from '../../hooks'; +import { ThemeToggleButton } from '../button'; + +export const NavigationBar = () => { + const [theme, toggleTheme] = useTheme(); + + return ( + + + AI/ML Management Dashboard + + + + ); +}; diff --git a/src/hooks/index.js b/src/hooks/index.js new file mode 100644 index 0000000..7baad7d --- /dev/null +++ b/src/hooks/index.js @@ -0,0 +1 @@ +export * from './useTheme'; diff --git a/src/hooks/useTheme.js b/src/hooks/useTheme.js new file mode 100644 index 0000000..66752d9 --- /dev/null +++ b/src/hooks/useTheme.js @@ -0,0 +1,17 @@ +import { useState, useEffect } from 'react'; + +export const useTheme = () => { + const [theme, setTheme] = useState(() => { + const savedTheme = localStorage.getItem('theme'); + return savedTheme || 'light'; + }); + + useEffect(() => { + document.body.setAttribute('data-bs-theme', theme); + localStorage.setItem('theme', theme); + }, [theme]); + + const toggleTheme = () => setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light')); + + return [theme, toggleTheme]; +}; -- 2.16.6